Wednesday, April 27, 2022

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:

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:

TemplateShort 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.
Posted by at No comments:

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.
Posted by at No comments:
Subscribe to: Posts (Atom)