Using .NET MAUI to Create Mobile Apps——Get Start

1. IDE Download and Installation

• If you haven't installed Visual Studio 2022 Preview yet

You can click Download

During installation, you should select .NET Multi-platform App UI development, as shown below:

• Already have Visual Studio 2022 Preview

If you already have Visual Studio 2022 Preview, you can Update to add .NET MAUI support.

2. Create an App

• Open Visual Studio 2022 Preview.
• Select the Create new project button.
• Select MAUI from the project type dropdown.
• Select the .NET MAUI App template and choose the Next button.

• Enter MyFirstMauiApp as the project name and select the Create button.

• Restore NuGet packages

Wait for NuGet to automatically restore the app's dependencies. You'll see a message like Restored or Ready in the status bar at the bottom left of the screen.

3. Run the App

This tutorial focuses on deploying the .NET MAUI app to a local Windows machine first. Later, you can choose to set up an Android device or emulator.

• Set up Windows for development

To develop Windows apps, you need to enable developer mode to sideload apps on Windows 11 or Windows 10.

Enable Developer Mode

1. On Windows, go to the Settings app.
2. Search for Developer Settings under Privacy & Security on Windows 11 and Update & Security on Windows 10.
3. Turn on the toggle under Developer Mode.

4. A Use developer features dialog will appear. Select Yes to confirm enabling developer mode.

• Run on Windows

Now you are ready to run the .NET MAUI app and deploy it to Windows. In the toolbar, the Windows Machine is set as the debug target by default.

Select Debug > Start Debugging (or press F5)

4. Edit Code

When developing with .NET MAUI, you can use XAML Hot Reload while debugging. This means you can change the XAML user interface at runtime, and the UI will update automatically.

In the Solution Explorer, double-click the MainPage.xaml file under the MyFirstMauiApp project.

Currently, the Text of the first Label is set to Hello, World! as shown in the code below:

<Label
    Text="Hello, World!"
    SemanticProperties.HeadingLevel="Level1"
    FontSize="32"
    HorizontalOptions="Center" >

Update the text to Hello, .NET MAUI!:

<Label
    Text="Hello, .NET MAUI!"
    SemanticProperties.HeadingLevel="Level1"
    FontSize="32"
    HorizontalOptions="Center" >

The UI will update automatically:

When developing with .NET MAUI, you can also use .NET Hot Reload to reload C# code. Let's modify the logic in the program to increment the count by 10 instead of 1.

Open MainPage.xaml.cs (this file is nested under MainPage.xaml, or you can right-click and select View Code from the menu).

The OnCounterClicked method on this file currently has the following code:

private void OnCounterClicked(object sender, EventArgs e)
{
    count++;

    if (count == 1)
        CounterBtn.Text = $"Clicked {count} time";
    else
        CounterBtn.Text = $"Clicked {count} times";

    SemanticScreenReader.Announce(CounterBtn.Text);
}

Update count++; to increment by 10 by changing it to count += 10;:

private void OnCounterClicked(object sender, EventArgs e)
{
    count += 10;

    if (count == 1)
        CounterBtn.Text = $"Clicked {count} time";
    else
        CounterBtn.Text = $"Clicked {count} times";

    SemanticScreenReader.Announce(CounterBtn.Text);
}

To apply the code changes, select the Hot Reload button in Visual Studio or press ALT+F10.

Click the "Click me" button and see it increments by 10.

5. Configure Android Device

You can choose to deploy to multiple platforms based on your development environment. You just ran and deployed to Windows. Now, let's set up an Android device or emulator.

• Android SDK Installation

From the debug dropdown menu, select net6.0-android under the framework.

Building the project requires a specific version of the Android SDK. If you haven't accepted the Android SDK license yet, you will see the following error message in the Error List window.

Double-click the message to start the license acceptance process. Click Accept for each license that appears, and automatic installation will begin.

• Set up Android Emulator

If you don't have an Android device to deploy to, you can set up an Android emulator. If you've already done this, you can skip this step.

If this is your first time building a .NET MAUI app, you will see "Android Emulator" in the debug menu. Click it to start the creation process.

This will pop up a User Account Control prompt. Select the Yes button, and the emulator creation process will begin. Select the Create button to create the emulator with default settings.

At this point, you may be prompted to agree to the license agreement for the Android emulator. Select Accept to continue the process, download the emulator image, and complete the emulator creation. After creating the emulator, you'll see a button that says Start. Click it.

You might be prompted to enable the Windows Hypervisor Platform. Follow the documentation to enable acceleration for better performance (highly recommended).

The Android emulator will start. Wait for it to fully boot up, and you'll see it appear in the Visual Studio debug menu.

Your Android emulator is now created and ready to use. The next time you run Visual Studio, the emulator will appear directly in the debug target window and will start when you select it.

• Set up Android Device

To use an Android device for development, you need to enable USB debugging. Follow these steps on your device to connect it to Visual Studio. If you don't have an Android device, you can skip this section.

Enable Developer Mode

1. Go to the Settings screen.
2. Use the search at the top of the Settings screen to find Build number or find it under About phone.
3. Tap Build number 7-10 times until "You are now a developer!" pops up.
4. Click Create.

Check USB Debugging Status

1. Go to the Settings screen.
2. Use the search at the top of the Settings screen to find USB debugging or find it under Developer options.
3. Enable USB debugging if it is not already enabled.

Trust the Device

1. Plug your device into your computer.
2. You will be prompted to allow USB debugging.
3. Check always allow from this computer.
4. Click Allow.

Your device is now configured and will appear as a deployment target in Visual Studio.

• Run on Android

Make sure your device or emulator is selected as the debug target.

From the menu, select Debug > Start Debugging (or press F5). If this option is disabled, make sure the emulator or device is selected.

The app will build, deploy to the selected Android device/emulator, and run.