What's the surprise of the latest .NET MAUI?

.NET 6 Preview 7 is now available, and we have introduced all the new layouts for the .NET Multiplatform Application UI (MAUI). This is a major change in performance and reliability. We are very pleased that we have also added some functions based on the new SemanticService, font scaling options and compatibility with Xamarin.Forms effects in terms of accessibility.

New layout

So far, the layouts you use in .NET MAUI are Xamarin.Forms layouts, and they know how to adjust the size and position of the renderer and the new control-based handler. We started using this method to quickly put the UI on the screen, and to concentrate on completing our UI 40 control library, and to prove that we can be compatible with the project migrating from Xamarin.Forms. At the same time, we have been building an optimized layout based on the new LayoutManager method, using our 7 years of Xamarin.Form layout experience to optimize consistency, performance and maintainability.

In this preview, the old layout can now only be found in the Microsoft.Maui.Controls.Compatibility namespace, and the new layout is enabled by default:

• grid layout
• Flexible layout

• stack layout

  Horizontal stack layout
  Vertical stack layout

The stack layout now packs two layouts, focusing on the horizontal and vertical directions. We recommend that you choose a layout that suits your needs. The stack layout still has an orientation property that you can set. In some cases, this is necessary when your adaptive layout changes orientation according to screen size or device habits.

Each layout has a corresponding layout manager responsible for measuring and positioning the view. The Measure method accepts height and width restrictions, and is responsible for measuring all the sub-elements of the layout. Then, the ArrangeChildren function sets the size and position of each view according to the layout rules. In some cases, you can override the CreateLayoutManager method of the layout to provide a custom implementation of the ILayoutManager interface.

One of the immediate updates you will notice is the adjustment of the default spacing value on these layouts: 0. If you have used the old layout, you already know the various arbitrary values set there before. Zero sets clearer expectations and guides you to set values that better meet your needs. For convenience, please set these starting values in the global style:

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

absolute layout and relative layout now only exist in the compatibility namespace, we recommend that you carefully consider whether you really need to use them. When possible, use one of the layouts listed above. At the same time, you can update the code to use them by adding new namespaces and prefixing XAML references:

<ContentPage
    xmlns:cmp="clr-namespace:Microsoft.Maui.Controls.Compatibility;assembly=Microsoft.Maui.Controls"
    ...
    >
    <cmp:AbsoluteLayout>
        ...
    </cmp:AbsoluteLayout>
</ContentPage>

.NET Upgrade Assistant is for all these changes are updated , if you do not handle the upgrade process, we will do our best to guide you through these changes.

In the next sprint phase, we will focus on improving these new layouts, so please review them and record any issues you observe while trying to use them .

Grid layout:
https://docs.microsoft.com/zh-cn/xamarin/xamarin-forms/user-interface/layouts/grid?WT.mc_id=dev
Flexible layout:
https://docs.microsoft.com/zh-cn/xamarin/xamarin-forms/user-interface/layouts/flex-layout?WT.mc_id=dev
Stack layout:
https://docs.microsoft.com/zh-cn/xamarin/xamarin-forms/user-interface/layouts/stacklayout?WT.mc_id=dev
Absolute layout:
https://docs.microsoft.com/zh-cn/xamarin/xamarin-forms/user-interface/layouts/absolutelayout?WT.mc_id=dev
Relative layout:
https://docs.microsoft.com/zh-cn/xamarin/xamarin-forms/user-interface/layouts/relativelayout?WT.mc_id=dev
All these changes are updated:
https://github.com/dotnet/upgrade-assistant/issues/774
Record any problems you observe when trying to use them:
https://github.com/dotnet/maui/issues/new/choose

Accessibility changes and improvements

Every month we meet with several developers from different companies who have invested heavily in delivering applications that meet the highest accessibility ratings. Through these meetings, we made some changes and additions to accessibility support, making it easier for everyone to produce accessibility applications.

1. TabIndex and IsTabStop properties have been removed

The TabIndex and IsTabStop properties have been introduced in Xamarin.Forms to help developers control the order in which screen readers read UI elements. In practice, they end up being confused and unable to meet this need. In .NET MAUI, we recommend a well-thought-out design method to arrange your UI the way you want, rather than looking for a programmatic way to manipulate your interface structure. For situations where commands must be controlled, we recommend using the SemanticOrderView of the community toolkit, which can also be used in the same .NET MAUI version.

2. SetSemanticFocus and Announce methods

As part of the new SemanticExtensions class, we added a new SetSemanticFocus method that allows you to move the screen reader focus to a specific element. Compare this with the VisualElement.Focus that sets the input focus.

<VerticalStackLayout>
    <Label
        Text="Explore SemanticExtensions below"
        TextColor="RoyalBlue"
        FontAttributes="Bold"
        FontSize="16"
        Margin="0,10"/>
    <Button
        Text="Click to set semantic focus to label below"
        FontSize="14"
        Clicked="SetSemanticFocusButton_Clicked"/>
    <Label
        x:Name="semanticFocusLabel"
        Text="Label receiving semantic focus"
        FontSize="14"/>
</VerticalStackLayout>

private void SetSemanticFocusButton_Clicked(object sender, System.EventArgs e)
{
  semanticFocusLabel.SetSemanticFocus();
}

In Essentials, we added another new method, Announce, which sets the text to be announced by the screen reader. For example, by clicking the button, you can trigger the following important information to read:

void Announce_Clicked(object sender, EventArgs e)
{
  SemanticScreenReader.Announce("Make accessible apps with .NET MAUI");
}

SemanticOrderView：
https://github.com/xamarin/XamarinCommunityToolkit/pull/1240

Font scaling

All controls on all platforms have font scaling enabled by default. This means that when users of your application adjust their text zoom preferences in the operating system, your UI will reflect their selection. By default, this will generate a more accessible application.

Each control has an added FontAutoScalingEnabled, which can even be used with FontImageSource for your font icons. Set FontSize to be 100% of your size, and lock it, you will set FontAutoScalingEnabled="false".

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

Be sure to check your screen and adjust the styles as needed to make sure they are suitable for all sizes.

Other highlights

Several notable contents have been added in this version.

We have added support for Effects , which will support the project #1574 upgraded from Xamarin.Forms.
Effects：
https://docs.microsoft.com/zh-cn/xamarin/xamarin-forms/app-fundamentals/effects/introduction?WT.mc_id=dev
1574：
https://github.com/dotnet/maui/pull/1574

Improvements to AppThemeBinding, support dark and light theme modes #1657 .
1657：
https://github.com/dotnet/maui/pull/1657

Scroll view handler #1669 .
1669：
https://github.com/dotnet/maui/pull/1669

Android Shell is ported to core #979 .
979：
https://github.com/dotnet/maui/pull/979

Shell navigation passes complex objects #204 .
204：
https://github.com/dotnet/maui/pull/2004

Visual Tree Helper added XAML hot reload #1845 .
1845：
https://github.com/dotnet/maui/pull/1845

Switch to System.ComponentModel.TypeConverter #1725 .
1725：
https://github.com/dotnet/maui/pull/1725

Window life cycle events #1754 .
1754：
https://github.com/dotnet/maui/pull/1754

Page navigation event #1812 .
1812：
https://github.com/dotnet/maui/pull/1812

The CSS prefix is updated to -maui #1877 .
1877：
https://github.com/dotnet/maui/pull/1877

For a complete set of changes, see branch comparison .
Branch comparison:
https://github.com/dotnet/maui/compare/release/6.0.1xx-preview7...release/6.0.1xx-preview6

Start now

First, install .NET 6 Preview 7. Next, use maui-check to add the maui workload. Also make sure you have updated to the latest preview version of Visual Studio 2022.

In future versions of Visual Studio 2022, MAUI will be installed along with other workloads. Now, we recommend that you install all the required components via the command line.

Ready? Open Visual Studio 2022 Preview 3 and create a new project. Search and select .NET MAUI.

For additional information about getting started with .NET MAUI, please refer to our documentation.

Feedback is welcome

The Visual Studio 2022 preview version is quickly enabling the new features of .NET MAUI. When you encounter any problems with debugging, deployment, and editor-related experience, please use the "Help"> "Send Feedback" menu to report your experience.

At present, we are also single project MSIX extension and .NET MAUI in Visual Studio 2022 to solve the problem of debugging failure. You can directly deploy a Windows application successfully and run it from the "Start" menu.

dotnet/maui on GitHub to let us know your experience of creating new applications with .NET MAUI Preview 7.

If you want to know about future versions, please visit our product roadmap , if you want to know the completeness of the features, please visit our status wiki .

Single project MSIX extension:
https://marketplace.visualstudio.com/items?itemName=ProjectReunion.MicrosoftSingleProjectMSIXPackagingToolsDev17
dotnet/maui：
https://github.com/dotnet/maui
Product roadmap:
https://github.com/dotnet/maui/wiki/roadmap
Status wiki:
https://github.com/dotnet/maui/wiki/status

---

Here are more Microsoft official learning materials and technical documents, scan the code to get the free version!
The content will be updated from time to time!