The Microsoft team and community behind the .NET MAUI had an active and productive summer. New updates and features were introduced to the platform, giving the developers the updates in the form of Preview 6 in July and Preview 7 in August this summer.
July was a month for Preview 6, and it brings to the developers more improvements to a single project along with several new capabilities such as gesture, modal pages, view clipping, native alerts, flex layout and more.
In the middle of August, the developers got the .NET MAUI. Preview 7 was also released bringing the new layouts for .NET MAUI and some of the new accessibility focused capabilities, font scaling options and compatibility support for Xamarin.Forms Effects.
SDK workloads are introduced as one of the concepts from .NET unification. They enable specific developer scenarios on the top of the .NET SDK which is installed on the machine. With Preview 4, the underlying SDKs for Android, iOS, macOS, and Mac Catalyst were enabled, and now with preview 6 version: maui, maui-mobile, and maui-desktop workloads are available to use. The developers can choose which type of apps they want to target if they want to target mobile or desktop.
On the GitHub wiki page of .NET MAUI, there is a detailed list that shows the .NET MAUI status and evolution.
Gesture recognizers can be used to detect user interaction with views in a Xamarin.Forms and now in the .NET MAUI application too. They enable you to apply tap, pinch, pan, swipe, and drag-and-drop to any view instance. Usage of gesture recognizers is straightforward inside of XAML:
<Grid>
<Grid.GestureRecognizers>
<TapGestureRecognizer NumberOfTapsRequired="2" Command="{Binding OnTileTapped}" />
</Grid.GestureRecognizers>
<!-- Grid content -->
</Grid>
Clipping is a way of masking the parts of the content; with this new feature, developers can add the shapes to the clipping region of a layout or the view. The next code sample shows how to make a circle image:
<Image Source="face.png">
<Image.Clip>
<EllipseGeometry RadiusX="80"
RadiusY="80"
Center="80,80" />
</Image.Clip>
</Image>
One of the bigger updates introduced with Preview 6 is native Alerts.
Usage of them can be from simple informational popups, some input forms or action sheets with multiple options. These are now available from any page in the .NET MAUI application.
await DisplayAlert ("Alert", "You have been alerted", "OK");
There were a lot of updates regarding the layouts with .NET MAUI Preview 7:
Up to now the layouts you’ve been using in .NET MAUI are the Xamarin.Forms layouts that were made aware of how to size and position both renderers and the new handler based controls. We began with this approach in order to quickly put UI on screen and focus our efforts on completing our library of UI 40 controls, and to prove out our ability to be compatible with projects migration from Xamarin.Forms. At the same time, we have been building optimized layouts based on a new LayoutManager approach employing our 7 years of Xamarin.Forms layout learning to optimize for consistency, performance, and maintainability. - David Ortinau, Principal Program Manager, .NET Multi-platform App UI
Microsoft.Maui.Controls.Compatibility - namespace is a place to look for the old layouts, the new layouts which are enabled by default are Grid, FlexLayout, StackLayout with two “editions” HorizontalStackLayout and VerticalStackLayout.
Regarding the StackLayout there is a recommendation to choose the one that fits the UI needs. LayoutManager is responsible for measuring and position views and each of these layouts is using it.
Layouts now also use zero value for default spacing, in contrast to how those values were set in the legacy layouts. Zero value sets a more clear expectation, and it will be easier for developers to meet design needs.
There is also a way to set those starting values in the global styles:
<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>
AbsoluteLayout and RelativeLayout are only available from Microsoft.Maui.Controls.Compatibility namespace. If there is a need to use them inside of the app, this is possible with the usage of the Compatibility namespace.
<ContentPage
xmlns:cmp="clr-namespace:Microsoft.Maui.Controls.Compatibility;assembly=Microsoft.Maui.Controls"
...
>
<cmp:AbsoluteLayout>
...
</cmp:AbsoluteLayout>
</ContentPage>
Font scaling is enabled by default on all the controls across all platforms in .NET MAUI. This update leads to a more accessible app. When users adjust the text scaling preference on the OS level, those changes should reflect inside of an app. The new property which is added is FontAutoScalingEnabled, and it also works with FontImageSource for font icons. By using FontAutoScalingEnabled, the developer can decide if the font will be scaled or not.
Other noticeable updates include: support for Effects in .NET MAUI, AppThemeBinding improvements for supporting dark and light theme modes, ScrollView handler is merged and available for WinUI, Android and iOS, Android Shell ported to the core, Shell navigation passing complex objects, Window lifecycle events, Page navigation events, and much more.
To follow the project development progress and next releases of .NET MAUI, the official roadmap is available on the GitHub wiki roadmap.
