Exercise: Create your first .NET MAUI app

Completed

In this exercise, you start to build the .NET MAUI (Multi-platform Application User Interface) app for the grocery-store chain. You use the template to generate the default app and run it on Windows and in the Android emulator. In a later exercise, you modify this app to customize the user interface and add the functionality required by the grocery store chain app.

Create a new project

  1. Open Visual Studio and create a new solution. This action opens the New Project wizard in Visual Studio.

    Tip

    Make sure you have the .NET MAUI workload installed with Visual Studio 2022 v17.3 or later (v17.8 preferred with .NET 8). More info here.

  2. Select the MAUI project type, select the .NET MAUI App template, and select Next.

    A screenshot of the Create a new project dialog box. The .NET MAUI App template is selected.

  3. On the Configure your new project page, name the project Phoneword, and save it in a location of your choice. Select Next.

    A screenshot of the Configure your new project dialog box. The user names the project Phoneword and selects a location on their hard drive to store it.

  4. Select .NET 8.0 (Long Term Support) in the Framework drop-down, then select Create to create the app.

Examine the solution structure

  1. In the Solution Explorer window, expand the Phoneword project. Expand the Resources folder and its subfolders, expand the App.xaml node, AppShell.xaml node, and the MainPage.xaml node.

    A screenshot of the Phoneword project in the Visual Studio solution explorer window.

  2. In the project, note the following items:

    • The Resources folder contains shared fonts, images, and assets used by all platforms.

    • The MauiProgram.cs file contains the code that configures the app and specifies that the App class should be used to run the application.

    • The App.xaml.cs file, the constructor for the App class, creates a new instance of the AppShell class, which is then displayed in the application window.

    • The AppShell.xaml file contains the main layout for the application and starting page of MainPage.

    • The MainPage.xaml file contains the layout for the page. This layout includes the XAML (Extensible Application Markup Language) code for a button with the caption Click me and an image that displays the dotnet_bot.png file. There are two other labels as well.

    • The MainPage.xaml.cs file contains the application logic for the page. Specifically, the MainPage class includes a method named OnCounterClicked that runs when the user taps the Click me button.

Build and run the application on Windows

  1. In the Visual Studio toolbar, select the Windows Machine profile. Select .net8.0-windows from the list in the frameworks drop-down list box.

    A screenshot of the target runtime dropdown in Visual Studio. The user sets the Windows Machine profile as the startup profile for the solution.

  2. On the Debug menu, select Start Debugging. This action builds, deploys, and runs the app on Windows:

    A screenshot of the Visual Studio debug menu. The user is debugging the app using the Windows Machine profile.

  3. Verify that the Windows version of the app starts up. Select the Click me button several times. The button text should update with the count being incremented with each tap.

    A screenshot of the Windows UI app running. The user tapped the 'Click me' button four times.

  4. On the View menu, select Solution Explorer. In the Solution Explorer window, expand the MainPage.xaml node and open the MainPage.xaml.cs code-behind file.

  5. In the OnCounterClicked method, change the statement that increments the count variable to add 5 to this variable instead:

    private void OnCounterClicked(object sender, EventArgs e)
    {
        count+=5; // update this
    
        if (count == 1)
            CounterBtn.Text = $"Clicked {count} time";
        else
            CounterBtn.Text = $"Clicked {count} times";
    
        SemanticScreenReader.Announce(CounterBtn.Text);
    }
    
  6. In the Visual Studio toolbar, select the Hot Reload button:

    A screenshot of the Visual Studio toolbar. The Hot Reload button is highlighted.

  7. Switch back to the app and select the Click me button. Verify that the count is now incrementing by 5.

    Note

    Visual Studio's Hot Reload feature allows you to modify your code while the app is running in Debug mode. You don't need to stop the app to see the changes. As well as modifying code, you can also make changes to the XAML markup for a page, and these changes will become visible in the running app.

  8. Close the app and return to Visual Studio.

Build and run the application on Android

  1. In the Visual Studio toolbar, select the Phoneword project.

  2. On the Tools menu, select Android and then select Android Device Manager. If you're prompted to let Android Device Manager make changes to your computer, select Yes.

    A screenshot of the Visual Studio tools menu. The user selected the Android Device Manager option.

  3. In the Android Device Manager window, select + New. In the New Device window, select the Pixel 3a (+ Store) base device, select the API 30 OS, and select Create. Wait while the various libraries are downloaded and the device is configured.

    Note

    The example in this exercise uses the Pixel 3a (+ Store) base device, but you can use more recent devices. For example the Pixel 5 - API 31 or Pixel 5 - API 34.

    A screenshot of the New Device window from the Android SDK. The user is creating a new Pixel 3 device with API 30 selected.

  4. When the device is created, return to Visual Studio.

  5. In the Visual Studio toolbar, in the Debug configuration drop-down list box, select the Android Emulators profile. Select the pixel_3a-api_30 device that you created.

    A screenshot of the Visual Studio toolbar. The user specified the Pixel 3 with the API 30 profile for the Android emulator to start debugging with.

  6. Start debugging use the pixel_3a-api_30 profile. This action builds, deploys, and runs the app on the Android device.

    A screenshot of the Visual Studio toolbar. It shows the pixel 3 a p i 30 profile is selected and ready to start debugging with as soon as the user presses the play button.

  7. When the app starts running on the emulator (this action can take several minutes), select the Click me button and check that the app runs in exactly the same way that it did on Windows.

    A screenshot of the Android version of the Phoneword application running in the selected emulator.

  8. Return to Visual Studio and stop debugging.