Introduction To .NET Multi-Platform App UI (MAUI) - An Overview

Introduction

What if we could create native mobile apps and desktop apps using .NET C# and XAML from a single code base? How cool would that be? Yes, now we can create native Android, iOS, macOS, and Windows applications from a single code base. This is possible using .NET’s new feature called Multi-platform App UI (MAUI). In this article, we will discuss more MAUI, by the end of this article you will get some basic ideas about MAUI and how to get started.

Table of Contents

• What is MAUI
• MAUI vs Xamarin Forms
• Similarities between MAUI and Xamarin Forms
• Who can use MAUI Framework
• MAUI Architecture
• Features of MAUI
• IDEs for Developing MAUI
• MAUI for Web Applications
• Getting Started with MAUI
• Building Sample Application
• MAUI Project Structure
• Conclusion

What is MAUI

As stated before, MAUI means Multi-Platform App UI which is an open-source cross-platform framework. We can develop and build native Android, iOS, macOS, and Windows applications from a single code base using MAUI.

MAUI is an evolution of Xamarin.Forms, which extended from Mobile to Desktop application. If you are already worked on Xamarin.Forms, you can easily relate .NET MAUI.

Fig. 1 MAUI (Image Credit Microsoft)

MAUI vs Xamarin Forms

The evolution of Xamarin forms will be integrated into the single. NET. With .NET 6, the native application development becomes a part of. NET. Single MAUI project is for all platforms is the most important advantage.

Similarities between MAUI and Xamarin Forms

• We still can use XAML and C# to develop the applications
• We can choose MVVM, Reactive UI, Model-View-Update
• We can build Android, iOS, macOS, Windows desktop applications using the MAUI framework.
• If you already have experience with Xamarin, you can easily relate to MAUI.

Who can use MAUI Framework

• Developers who want to build cross-platform applications using C# and XAML from a single code base.
• Across platforms to share the same UI layouts and designs, which saves more time in design implementations.
• Across the platforms, to apply the same business logic, code, and testing.

MAUI Architecture

In a .NET MAUI app, we write code that primarily interacts with,

• The .NET MAUI API first (marked as 1 in the image Fig.2).
• Then the .NET MAUI directly consumes the native platform APIs (marked as 3 in the image Fig.2).
• App code may directly exercise platform APIs if required (marked as 2 in the image in the image Fig.2).

Fig.2 Architecture of MAUI (Image credits Microsoft)

.NET MAUI apps compiled into native app packages,

• Android apps built using .NET MAUI compile from C# into an intermediate language (IL) which is then just-in-time (JIT) compiled to a native assembly when the app launches.
• iOS apps built using .NET MAUI are fully ahead-of-time (AOT) compiled from C# into native ARM assembly code.
• macOS apps built using .NET MAUI use Mac Catalyst, a solution from Apple that brings your iOS app built with UI Kit to the desktop, and augments it with additional App Kit and platform APIs as required.
• Windows apps built using .NET MAUI use Windows UI Library (WinUI) 3 to create native apps that can target the Windows desktop and the Universal Windows Platform (UWP).

Features of MAUI

.NET MAUI provides cross-platform APIs for native device features. Here are some good features provided by MAUI,

• Access to sensors, such as the accelerometer, compass, and gyroscope on devices.
• Ability to check the device’s network connectivity state, and detect changes.
• Provide information about the device the app is running on.
• Copy and paste text to the system clipboard, between apps.
• Pick single or multiple files from the device.
• Store data securely as key/value pairs.
• Utilize built-in text-to-speech engines to read text from the device.
• Initiate browser-based authentication flows that listen for a callback to a specific app registered URL.
• .NET MAUI includes support for .NET hot reload

IDEs for Developing MAUI Application

• Visual Studio
• Visual Studio Code

Using these two IDEs, we can build native Android, iOS, macOS, and Windows applications using MAUI. Just coding is all we need, then choosing Visual Studio Code is a wise option.

MAUI for Web Applications

There is an option to integrate the Blazor application into MAUI using WebView.

Getting Started with MAUI

Installing MAUI

At the time of writing this article, we have to follow the below-mentioned steps. These will be changing as new releases of Visual Studio and .NET MAUI are released.

• Framework – .NET 6 Preview 6 with .NET MAUI
• Platform SDKs – Android, iOS, macOS, tvOS, and Mac Catalyst
• IDE – Visual Studio 2022 preview with the workloads Desktop and Mobile

Fig.3 Workloads required for MAUI using Visual Studio 2022 Preview

Install MAUI workloads using .NET CLI,

dotnet workload install maui

Install Missing Components,

dotnet tool install -g redth.net.maui.check

Check,

maui-check

If any tools and SDKs required by .NET MAUI are missing, maui-check will install them. The example below shows the output generated if the tools and SDKs required by .NET MAUI are already installed,

| \ | | | ____| |_   _|   |  \/  |    / \    | | | | |_ _|
     |  \| | |  _|     | |     | |\/| |   / _ \   | | | |  | |
  _  | |\  | | |___    | |     | |  | |  / ___ \  | <img width="16" height="16" class="wp-smiley emoji" draggable="false" alt="|_|" src="https://s0.wp.com/wp-content/mu-plugins/wpcom-smileys/white-russian.svg" style="height: 1em; max-height: 1em;"> |  | |

 (_) <img width="16" height="16" class="wp-smiley emoji" draggable="false" alt="|_|" src="https://s0.wp.com/wp-content/mu-plugins/wpcom-smileys/white-russian.svg" style="height: 1em; max-height: 1em;"> \_| |_____|   <img width="16" height="16" class="wp-smiley emoji" draggable="false" alt="|_|" src="https://s0.wp.com/wp-content/mu-plugins/wpcom-smileys/white-russian.svg" style="height: 1em; max-height: 1em;">     <img width="16" height="16" class="wp-smiley emoji" draggable="false" alt="|_|" src="https://s0.wp.com/wp-content/mu-plugins/wpcom-smileys/white-russian.svg" style="height: 1em; max-height: 1em;">  <img width="16" height="16" class="wp-smiley emoji" draggable="false" alt="|_|" src="https://s0.wp.com/wp-content/mu-plugins/wpcom-smileys/white-russian.svg" style="height: 1em; max-height: 1em;"> /_/   \_\  \___/  |___|
 .NET MAUI Check v0.6.1.0
────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────
This tool will attempt to evaluate your .NET MAUI development environment.
If problems are detected, this tool may offer the option to try and fix them for you, or suggest a way to fix them yourself.
Thanks for choosing .NET MAUI!
────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────
» Synchronizing configuration... ok
» Scheduling appointments... ok
> OpenJDK 11.0 Checkup...
  - 11.0.10 (C:\Program Files\Microsoft\jdk-11.0.10.9-hotspot\bin\..)
  - 1.8.0-25 (C:\Program Files\Android\Jdk\microsoft_dist_openjdk_1.8.0.25)
> Visual Studio 17.0.0-pre.2.0 Checkup...
  - 17.0.0-pre.2.0 - C:\Program Files\Microsoft Visual Studio\2022\Preview
> Android SDK Checkup...
  - emulator (30.7.5)
  - build-tools;30.0.2 (30.0.2)
  - platforms;android-30 (3)
  - system-images;android-30;google_apis_playstore;x86 (9)
  - platform-tools (31.0.2)
> Android Emulator Checkup...
  - Emulator: pixel_2_r_11_0_-_api_30 found.
> .NET SDK Checkup...
  - 2.1.700 - C:\Program Files\dotnet\sdk\2.1.700
  - 2.1.816 - C:\Program Files\dotnet\sdk\2.1.816
  - 3.1.410 - C:\Program Files\dotnet\sdk\3.1.410
  - 5.0.101 - C:\Program Files\dotnet\sdk\5.0.101
  - 5.0.104 - C:\Program Files\dotnet\sdk\5.0.104
  - 5.0.204 - C:\Program Files\dotnet\sdk\5.0.204
  - 6.0.100-preview.6.21355.2 - C:\Program Files\dotnet\sdk\6.0.100-preview.6.21355.2
> .NET SDK - Workload Deduplication Checkup...
> Edge WebView2 Checkup...
  - Found Edge WebView2 version 91.0.864.67
> .NET SDK - Workloads (6.0.100-preview.6.21355.2) Checkup...
  - microsoft-android-sdk-full (Microsoft.NET.Sdk.Android.Manifest-6.0.100 : 30.0.100-preview.6.62) installed.
  - microsoft-ios-sdk-full (Microsoft.NET.Sdk.iOS.Manifest-6.0.100 : 15.0.100-preview.6.63) installed.
  - microsoft-maccatalyst-sdk-full (Microsoft.NET.Sdk.MacCatalyst.Manifest-6.0.100 : 15.0.100-preview.6.63) installed.
  - microsoft-tvos-sdk-full (Microsoft.NET.Sdk.tvOS.Manifest-6.0.100 : 15.0.100-preview.6.63) installed.
  - microsoft-macos-sdk-full (Microsoft.NET.Sdk.macOS.Manifest-6.0.100 : 12.0.100-preview.6.63) installed.
  - maui (Microsoft.NET.Sdk.Maui.Manifest-6.0.100 : 6.0.100-preview.6.1003) installed.
  - microsoft-net-runtime-android (microsoft.net.workload.mono.toolchain.manifest-6.0.100 : 6.0.0-preview.6.21352.12)
installed.
────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────
- Congratulations, everything looks great!

A new dotnet workload install a command is available for installing the mobile workloads. Install MAUI Workloads in another way.

On Windows, in an Administrator command prompt,

dotnet workload install maui

And then install the below-listed workloads one by one as well,

dotnet workload install maui-android
dotnet workload install maui-ios
dotnet workload install maui-maccatalyst
dotnet workload install maui-windows
dotnet workload install microsoft-android-sdk-full
dotnet workload install microsoft-ios-sdk-full
dotnet workload install microsoft-maccatalyst-sdk-full
dotnet workload install microsoft-maccatalyst-sdk-full
dotnet workload install microsoft-macos-sdk-full
dotnet workload install microsoft-tvos-sdk-full

Building Sample Application

In this example, we are going to create an MAUI application using Visual Studio 2022. First, let's create a new application by running the below command in the Command Prompt,

dotnet new maui -n HelloMaui

Now open Visual Studio 2022 and open the created project from Open a project or solution and browse the project.

Fig.4 Browse our newly created MAUI project

We have to wait for a while to load the dependencies.

MAUI Project Structure

The below image shows the project structure of the MAUI application.

Fig.5 Project Structure of MAUI Application

We will discuss each file in this project in our next article (refer here).

Run the MAUI Application

To run the MAUI Application, we need either an Emulator or Local Android device connected with our system for mobile application. To run our application on a local Android device, we have to enable the developer settings.

Fig. 6 To run MAUI Application from VS click the start button

• In the Visual Studio toolbar, press the Start button to launch the app in your chosen Android emulator or Android Local Device.
• In the running app press, the CLICK ME button several times and observe that the count of the number of button clicks is incremented.

Fig 7. Running MAUI Application

In my next article, we will discuss how to run the MAUI application by using installing it into an Android phone.

Some useful MAUI GitHub resources

• https://github.com/dotnet/maui
• https://github.com/dotnet/maui-samples
• https://github.com/dotnet/maui/wiki/FAQs

Conclusion

In this article, we have discussed the MAUI and build a sample application. We will explore more about MAUI in upcoming articles. I hope you all found this article much useful and please share your feedback in the comment section.