Introduction to .NET Multi-platform App UI (MAUI) – An Overview

Introduction

What if we are able to create native Mobile apps, Desktop apps using .NET C# and XAML from a single code base?. !!! How cool it will be right ?. 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. Using MAUI, we can develop and build native Android, iOS, macOS, and Windows applications from a single code base.

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 the part of .NET. Single MAUI project is for all platforms is the most important advantages.

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 on Xamarin, you can easily relate MAUI.

Who can use MAUI Framework

  • Developers who wants 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 logics, 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 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

By using these two IDEs, we can build native Android, iOS, macOS, Windows application 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 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:

| \ | | | ____| |_   _|   |  \/  |    / \    | | | | |_ _|
     |  \| | |  _|     | |     | |\/| |   / _ \   | | | |  | |
  _  | |\  | | |___    | |     | |  | |  / ___ \  | |_| |  | |
 (_) |_| \_| |_____|   |_|     |_|  |_| /_/   \_\  \___/  |___|

 .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!

Install MAUI Workloads in another way

A new dotnet workload install command is available for installing the mobile workloads.

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 MAUI application using Visual Studio 2022. First lets 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 files in this project in our next article (refer here).

Run the MAUI Application

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

Fig. 6 To run MAUI Application from VS click 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 MAUI application by using installing it into an Android phone.

Some useful MAUI GitHub resources

Conclusion

In this article, we have discussed about the MAUI and build 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.

One thought on “Introduction to .NET Multi-platform App UI (MAUI) – An Overview

Add yours

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out /  Change )

Google photo

You are commenting using your Google account. Log Out /  Change )

Twitter picture

You are commenting using your Twitter account. Log Out /  Change )

Facebook photo

You are commenting using your Facebook account. Log Out /  Change )

Connecting to %s

Website Built with WordPress.com.

Up ↑

%d bloggers like this: