DEV Community

Cover image for All about .NET MAUI (+15 NEW Features)๐Ÿ…
Dotnetsafer
Dotnetsafer

Posted on

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>(); 
}
Enter fullscreen mode Exit fullscreen mode

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"/>
Enter fullscreen mode Exit fullscreen mode

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
Enter fullscreen mode Exit fullscreen mode

Checking dotnet sdk version<br>

After verifying whatโ€™s installed, you can see how the additional workloads are running ๐Ÿ‘‡

dotnet workload list
Enter fullscreen mode Exit fullscreen mode

Checking additional workloads<br>

Finally to install .NET MAUI you need to execute ๐Ÿ‘‡

dotnet workload install maui
Enter fullscreen mode Exit fullscreen mode

๐ŸŸก.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>
Enter fullscreen mode Exit fullscreen mode

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>
Enter fullscreen mode Exit fullscreen mode

๐ŸŸก 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.

.NET MAUI font scaling feature<br>

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>
Enter fullscreen mode Exit fullscreen mode

๐ŸŸก 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>
Enter fullscreen mode Exit fullscreen mode

๐ŸŸก 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");
Enter fullscreen mode Exit fullscreen mode

.NET MAUI new alert feature


๐ŸŸก 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.

Clipping function in .NET MAUI


๐ŸŸก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>
Enter fullscreen mode Exit fullscreen mode

.NET MAUI gestures


๐ŸŸก 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" />
Enter fullscreen mode Exit fullscreen mode

.NET MAUI splash screen


๐ŸŸก 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 ๐Ÿ‘‡

.NET MAUI Control handlers (macOS)

  • iOS ๐Ÿ‘‡

.NET MAUI Control handlers (iOS)

  • Android ๐Ÿ‘‡

.NET MAUI Control handlers (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>
Enter fullscreen mode Exit fullscreen mode

๐ŸŸ  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.

.NET MAUI single project and Windows


๐Ÿ”ด 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.

.NET MAUI Hot Reload feature


๐Ÿ”น 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?๐Ÿค”

Discussion (1)

Collapse
zangassis profile image
Assis Zang

Thanks for the info ๐Ÿฅ‡, it reminded me that I need to learn MAUI ASAP ๐Ÿ˜ฑ