Wednesday, April 27, 2022

Build .NET MAUI apps on macOS 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 on April 26, 2022. This means that it is supported by Microsoft for production apps. 

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

Getting Started

From within a terminal window on macOS, run the following command:

dotnet new --list

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

TemplateShort Name
.NET MAUI App (Preview) .NET MAUI App (Preview) maui
.NET MAUI Blazor App (Preview) maui-blazor
.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.

On the mac, you will need iOS 15.2 SDK (shipped with Xcode 13.2). If you have multiple versions of Xcode, you can choose a suitable version to be used with MAUI with:

sudo xcode-select -s /Applications/Xcode-beta.app/

Let us create a new MAUI app on macOS. 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 macOS

To run the sample app as a macOS application, we will use the net6.0-maccatalyst target framework moniker:

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

The actual macOS application resides in the Debug/net6.0-maccatalyst/maccatalyst-x64 directory as shown below:

Run app on iOS simulator

To run the sample app as an iOS application, we will use the net6.0-ios target framework moniker:

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

The above opens the app in a default iOS simulator. If you want to target a specific simulator (say iPhone 11), start Xcode, then choose Window >> Devices and Simulators.


Right-click on your device of choice, then select “Copy Identifier”.



Run the following command with the -p switch shown below and replace the highlighted Device ID with the one just copied:

dotnet build -t:Run -f net6.0-ios -p:_DeviceName=:v2:udid=7CD70FD4-BC03-42A9-AAC7-1045F8EB9C32


Run app in Android emulator

To run the sample app as an Android application, it is necessary to open an Android emulator first. The easiest way to do so is to start Android Studio,  then start the AVD Manager.



After you create a virtual device (or emulator), start it by clicking on the green arrow.


Once the emulator starts you can run the sample app in an Android environment.



We will use the net6.0-android target framework moniker to run the sample app in Android:

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 macOS, iOS and Android. If you are on Windows, you can also run the same app on the Windows Operating System. 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.

No comments:

Post a Comment