.NET Multi-Platform App UI (MAUI) | California

November 2, 2022

Introduction

To create native mobile apps and desktop apps using .NET C# and XAML from a single code base.
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, Let’s gets started.

What is .NET MAUI

As started 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.

IDE’s for Developing MAUI Application

Xamarin Forms vs MAUI

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.

Major difference between Xamarin forms and .NET MAUI

Common usage between Xamarin Forms and .NET MAUI

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.

MAUI Architecture

In a .NET MAUI app, we write code that primarily interacts with,App code may directly exercise platform APIs if required

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

MAUI for Web Applications

Lets Start with Creating MAUI Applications

After clicked create button, 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.

.csproj

First let’s look into this project file, where we can see some important details such as Target frameworks and does the project needs to use MAUI workload or not.

Since MAUI is single project which is going to be deployed in multiple platforms, those platforms frameworks are mentioned in the tag <TargetFrameworks>

Platforms

MAUI is a cross platform framework to build Mobile, Desktop applications from the single code base. Those multiple platforms are listed under the Platforms Folder.

MauiProgram.cs

The point of entry for our application is MauiProgram.cs.
It includes a Configure method to pipe service registration, handler registration.

App.xaml & App.xaml.cs

App.xaml and App.xaml.cs file is inherited by Microsoft.Maui.Controls.Application.
The App.xaml will work same like Xamarin form and will add the all the common resources and style.

Resources

This folder holds the default fonts, Images ,Icons, Raw, SplashScreen and Style’s. which are used in the project.

MainPage.xaml

This file holds the UI designs of our MAUI application.
This file is mostly used to define the visual contents of a page and works together with a C# code-behind file.

We have discussed all the folder in MAUI Application. Let’s test the Application in all platforms.

Run the 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.