All about .NET MAUI (+15 NEW Features)🏅

.NET MAUI means .NET Multi-Platform App User Interface and allows us to build native desktop and mobile apps with a single code base. .NET MAUI will be running on .NET 6, which will be released in November 2021.

According to Microsoft, .NET MAUI is an evolution of Xamarin Forms with rebuilt controls from the group up for performance and extensibility.

What’s the difference between .NET MAUI and Xamarin Forms?

With .NET MAUI based on .NET 6, the evolution of Xamarin Forms will be integrated into the new world of a single .NET.

With .NET 6 native app development becomes part of .NET like other frameworks such as ASP.NET Core already have with .NET 5.

In .NET MAUI, all your code is in a single project compared to Xamarin Forms, where you had to have a project for every platform. It should reduce complexity and make it an overall better developer experience.

🟢.NET MAUI features: Let’s start with basics

🟢Support

.NET 6 will be released in November 2021 and will be supported for three years, as a Long Term Support (LTS) release. The platform matrix has been significantly expanded compared to .NET 5.

The additions are:

• Android.

• iOS.

• Mac and Mac Catalyst, for x64 and Apple Silicon (AKA “M1”).

• Windows Arm64 (specifically Windows Desktop).

.NET 6 Debian container images are based on Debian 11 (“bullseye”), which is currently in testing.

🟢 Startup

The .NET MAUI applications will use a Startup class that will allow:

• Configure method to pipe service registration, handler registration, or application customization processes.

• Be able to create a custom HostBuilder.

For instance 👇

public void Configure(IAppHostBuilder appBuilder)
{     
  appBuilder = appBuilder         
 .UseCompatibilityRenderers()         
 .UseMauiApp<MyApp>(); 
}

By default, if you don’t want to customize anything special, or you want to use your own dependency container or something, you can.

🟢 Accessibility

Adding more control and improving the accessibility API to avoid confusion in addition to aligning the behavior in all cases and platforms is one of the priorities in one of the sections with such importance as accessibility.

<Entry     
  Text="Entry text TH"     
  FontSize="14"     
  SemanticProperties.Description="Description text"    
  SemanticProperties.Hint="Hint text"/>

The concept of SemanticProperties is added. Microsoft are talking about a series of properties that add extra information to Views to allow it to correctly interpret what happens when using the screen reader, or keyboard navigation.

🟢 Workload Installation

As part of .NET unification, Microsoft have introduced the concept of SDK workloads to enable specific developer scenarios on top of the .NET SDK. In previous preview the underlying SDKs for iOS, Mac Catalyst, macOS, Android were enabled. Now they are introducing the maui, maui-desktop, maui-mobile and workloads. The first will acquire and install all the required SDKs for building .NET MAUI applications.

In the near future Visual Studio 2022 will include these with its installer.

If you want use them, just open a CLI and check what you have installed 👇

dotnet sdk check

After verifying what’s installed, you can see how the additional workloads are running 👇

dotnet workload list

Finally to install .NET MAUI you need to execute 👇

dotnet workload install maui

🟡.NET MAUI features: UI and UX

🟡Shared fonts, images, and app icons

Fonts and images can be placed in one location in your solution and .NET MAUI will enable them to natively work on all platforms you target. These are tracked in your *.csproj as SharedImage and SharedFont.

<ItemGroup>
    <SharedImage Include="appicon.svg" ForegroundFile="appiconfg.svg" IsAppIcon="true" />
    <SharedFont Include="Resources\Fonts\ionicons.ttf" />
</ItemGroup>

Both accept wildcards to include all files within a location.

<ItemGroup>
    <SharedImage Include="appicon.svg" ForegroundFile="appiconfg.svg" IsAppIcon="true" />
    <SharedImage Include="Resources\Images*" />
    <SharedFont Include="Resources\Fonts*" />
</ItemGroup>

🟡 Font Scaling

All controls across all platforms now have font scaling enabled by default. This means as your application users adjust their text scaling preferences in the OS, your UI will reflect their choice. This produces a more accessible app by default.

Each control has an added FontAutoScalingEnabled, and it even works with FontImageSource or your font icons. Setting a FontSize is your 100% size, and to lock it in you’ll set FontAutoScalingEnabled =”false" 👇

<VerticalStackLayout>
  <Label
    Text="Scaling disabled"
    FontSize="18"
    FontAutoScalingEnabled="False"/>
  <Label
    Text="Scaling enabled"
    FontSize="18"/>
</VerticalStackLayout>

🟡 New Layouts

Microsoft also tells us that the layouts that have been used in the .NET MAUI are the Xamarin.Forms layouts. They say they started with that approach to quickly get the user interface on screen and focus on completing their library of UI 40 controls.

At the same time, they have been creating streamlined layouts based on a new LayoutManager approach that employs its long 7 years of Xamarin.Forms design training to optimize consistency, performance, and maintainability.

One of the updates that you may have noticed is the leveling out of the default spacing values in these layouts: 0. If you’ve used the legacy layouts, then you already know the different arbitrary values previously set there. Zero sets a clearer expectation and prompts you to set your preferred values that best suit your design needs.

A very easy way is 👇

<ResourceDictionary>
  <Style TargetType="StackLayout">
    <Setter Property="Spacing" Value="6"/>
  </Style>
<Style TargetType="Grid">
    <Setter Property="ColumnSpacing" Value="6"/>
    <Setter Property="RowSpacing" Value="6"/>
  </Style>
</ResourceDictionary>

🟡 Native Alerts

Each platform has a native way of displaying alerts to users. These can be simple informational popups, simple input forms, and even action sheets with multiple options to guide a user.
These are available from any Page in a .NET MAUI application. 👇

await DisplayAlert ("Alert", "You have been alerted", "OK");

🟡 Clipping

When you need to mask content you can now add shapes to the clipping region of a layout or view. The most common use for this is to make a circle image.

🟡Gestures

Gesture recognizers allow you to apply tap, pinch, pan, swipe, and drag-and-drop to any view instance. You can apply them easily in XAML.

<Grid>
  <Grid.GestureRecognizers>
    <TapGestureRecognizer NumberOfTapsRequired="2" Command="{Binding OnTileTapped}"/>
</Grid.GestureRecognizers>
  <!-- Grid content -->
</Grid>

🟡 Splash Screen

On mobile platforms especially you want your first screen to appear as quickly as possible, and this is done by implementing a static splash screen. .NET MAUI now has a single place to describe your splash screen for all platforms that support them.

<MauiSplashScreen Include="Resources\appiconfg.svg" Color="#512BD4" />

🟡 New Control Handlers

They have introduced the first controls and properties that implement a new handler approach. These include partial implementations of Button, Label, and Entry, Slider, and Switch. They are now accepting pull requests to fill out complete implementations, and several contributors have already successfully contributed.

The HelloMaui sample application now runs from a single project to macOS, iOS, and Android showcasing the current set of ported controls.

• macOS 👇

• iOS 👇

• Android 👇

🟠 .NET MAUI: Better improvements

🟠 Mac Catalyst

You can add the following TargetFramework settings to your project to build for macOS desktop, using Mac Catalyst.

<TargetFrameworks>net6.0-android;net6.0-ios</TargetFrameworks>
<TargetFrameworks Condition=" '$(OS)' != 'Windows_NT' ">$(TargetFrameworks);net6.0-maccatalyst</TargetFrameworks>

🟠 Single Project and Windows

Microsoft have made a few updates to single project based on developer feedback and Windows support to adopt the latest features.

• The NuGet package is replaced with the .NET MAUI workload (true in the .csproj).

• Single project solutions now nest individual platforms within a “Platforms” folder for tidy organization.

• Updated to Windows App SDK 0.8.1 RC. Use the latest Visual Studio 2022 compatible extension from the marketplace.

🔴 The TOP of .NET MAUI

🔴 .NET Hot Reload

.NET Hot Reload is a new experience that enables you to make live edits to your .NET MAUI app’s source code while it is running, reducing the number of times you need to rebuild your app.
To start testing this feature install both .NET 6 Preview 4 and Visual Studio 2019 version 16.11 Preview 1. Start your app through the Visual Studio debugger (F5) targeting a WinUI 3 host. Once your app is running, you’ll now have the new option to make code changes and apply them using our new “apply code changes” button as illustrated below.

In coming releases .NET Hot Reload will also be available for Android, iOS, and macOS, and we’ll be integrating XAML Hot Reload and the Live Visual Tree as well.

🔹 Conclution:

.NET MAUI has only a few months left to go officially. The latest features mentioned by Microsoft in the Previews are very powerful. At the moment we still have a little left to have it and apparently it will greatly facilitate developers to program web, console or mobile applications.

What do you think?🤔