Build .NET MAUI apps on Windows with VS Code

.NET Multi-platform App UI (.NET MAUI) is a cross-platform framework for creating native mobile and desktop apps with C# and XAML.It is the evolution of the Xamarin.Forms cross-platform framework. .NET MAUI Release Candidate 2 was made available recently on April 26, 2022. This means that the product is supported by Microsoft for production apps. 

I shall demonstrate how easy it is to get started with.NET MAUI on Windows. In order to follow on, you will need the following pre-requisites:

• You need a computer running on the Windows 10 or Windows 11 operating system
• Download & install Android Studio
• Install .NET MAUI on Windows by following these instructions
• If you do not already have VS Code, download and install it

Getting Started

From within a terminal window, run the following command:

dotnet new --list

This should will show you the available .NET application templates for cross platform applications:

Template	Short Name
.NET MAUI App (Preview) .NET MAUI App (Preview)	maui
.NET MAUI Blazor App (Preview)	maui-blazo
.NET MAUI Class Library (Preview)	mauilib
.NET MAUI ContentPage (C#) (Preview)	maui-page-csharp
.NET MAUI ContentPage (XAML) (Preview)	maui-page-xaml
.NET MAUI ContentView (C#) (Preview)	maui-view-csharp
.NET MAUI ContentView (XAML) (Preview)	maui-view-xaml
Android Activity template	android-activity
Android Application (Preview)	android
Android Class Library (Preview)	androidlib
Android Java Library Binding (Preview)	android-bindinglib
Android Layout template	android-layout

In today's exercise, we will create an app using the first maui template.

Let us create a new MAUI app on Windows. In a terminal window, navigate to a suitable work directory, then run the following command to create a .NET MAUI app named 'maui2022':

dotnet new maui -o maui2022

cd maui2022

The full set of .NET 6 TFMs (target framework monikers), including operating-specific ones, are:

net6.0

net6.0-android

net6.0-ios

net6.0-maccatalyst

net6.0-macos

net6.0-tvos

net6.0-windows

Run app on Windows

To run the sample app as a Windows application, we need to use the net6.0-windows target framework moniker:

dotnet build -t:run -f net6.0-windows

Currently (April 2022), this command does not work and results in the following error message:

The system cannot find the path specified.

C:\Program Files\dotnet\sdk\6.0.300-preview.22204.3\Sdks\Microsoft.NET.Sdk\targets\Microsoft.NET.Sd

k.targets(901,5): error MSB3073: The command "D:\_playground\maui\maui2022\bin\Debug\net6.0-windows

\win10-x64\maui2022.exe " exited with code 3. [D:\_playground\maui\maui2022\maui2022.csproj]

However, it works from the latest version of Visual Studio 2022 (Preview) for Windows - Version 17.2.0 Preview 5.0.

Run app in Android simulator from Visual Studio 2022 (Preview)

You need to first configure an Android Virtual Device (or emulator) by choosing Tools >> Android >> Android Device Manager...

You can run the Android Device Manager directly from the following location:

C:\Program Files\Microsoft Visual Studio\2022\Preview\Common7\IDE\Extensions\Xamarin\AndroidDeviceManager\AndroidDevices.exe

Configure at least one virtual device by clicking on the “+ New” button.

To run your MAUI app from Visual Studio 2022 (Preview), first choose the emulator you want to use:

Then click on the emulator in the toolbar to start your app:

Run app in Android simulator from terminal window

Add the following directories to your path so that you can call android emulator commands from anywhere on your computer:

C:\Program Files (x86)\Android\android-sdk\emulator

C:\Program Files (x86)\Android\android-sdk\platform-tools

To display a list of Android Virtual Devices (or emulators), run the following command:

emulator -list-avds

I got the following output:

pixel_4_-_api_30

pixel_5_-_api_30

To start the first of the above emulators, you must first start the adb.exe (Android Debug Bridge) app with the following command:

adb devices

You can then execute the following to start an Android emulator:

Start emulator pixel_4_-_api_30	emulator -avd pixel_4_-_api_30
Start emulator pixel_4_-_api_30 after wiping all the data in the emulator	emulator -avd pixel_4_-_api_30 -wipe-data

Once the emulator starts, open a separate terminal window, and run your app in the emulator with:

dotnet build -t:run -f net6.0-android

Making a tiny change

Open the application workspace in VS Code, then open MainPage.xaml.cs in the editor. Change the statement on line 14 from "count++;" to "count += 10;" such that the count increments by 10 instead of 1. When you run the app in the Android emulator, you will see that it behaves as expected.

Conclusion

In this short journey we have learned how easy it is to run the same .NET MAUI app in Windows and Android. If you are on macOS, you can also run the same app on macOS. Having come this far, try some simple changes to the app, like:

• change the picture on the main screen
• change the application icon that appears on the phone
• change the theme color of your app

Happy .NET MAUI development.