.NET 6 Preview 7 is now out, and we introduce all the new layouts for the.NET Multi-platform Application UI (MAUI). This is a major change in performance and reliability. We are glad that we have also added some functionality for accessibility based on the new SemanticService, font scaling options, and compatibility with xamarin.forms effects.

The new layout

So far, you’ve been. The layouts used in NET MAUI are xamarin.Forms layouts, and they know how to adjust the size and placement of renderers and new control-based handlers. We started with this approach in order to quickly put the UI on screen and focus on finishing our UI 40 control library and proving that we could be compatible with projects migrated from Xamarin.Forms. At the same time, we’ve been building optimized layouts based on our new LayoutManager approach, leveraging our 7 years of xamarin.form layout experience to optimize consistency, performance, and maintainability.

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

  • Grid layout
  • Elastic layout
  • The stack layout
  • Horizontal stack layout
  • Vertical stack layout

The stack layout now wraps two layouts, focusing on horizontal and vertical orientation. We recommend that you choose a layout that suits your needs. Stack layout still has a orientation property that you can set, which is necessary in some cases when your adaptive layout changes orientation based on screen size or device habits.

Each layout has a corresponding layout manager that measures and positions views. The Measure method accepts height and width limits and is responsible for measuring all of the layout’s child elements. The ArrangeChildren function then sets the size and location of each view according to layout rules. In some cases, you can override the layout’s CreateLayoutManager method to provide a custom implementation of the ILayoutManager interface.

One of the immediate updates you’ll notice is the adjustment of the default spacing value on these layouts: 0. If you’ve used an older layout, you already know the various arbitrary values that were set there earlier. Zero sets clearer expectations and directs you to set values that better meet your needs. For convenience, 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>
Copy the code

Absolute and relative layouts now only exist in compatibility namespaces, and we encourage you to think carefully about whether you really need to use them. Where possible, use one of the layouts listed above. In the meantime, you can update your 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>Copy the code

.NET Upgrade Assistant is updating for all of these changes, and if they are not handled for you during the upgrade process, we will do our best to guide you through the changes.

We will focus on improving these new layouts for the next sprint, so check them out and note any problems you observe when you try to use them.

Accessibility changes and improvements

We meet with several developers each month from different companies that have invested heavily in delivering applications that meet the highest accessibility ratings. As a result of these meetings, we made some changes and additions to accessibility support to make it easier for everyone to produce accessible applications.

TabIndex and IsTabStop properties have been removed

TabIndex and IsTabStop properties are introduced in Xamarin.Forms to help developers control the order in which screen readers read UI elements. In practice, they end up confusing and unsatisfying. In.NET MAUI, we recommend taking a thoughtful design approach and arranging your UI the way you want it, rather than finding programmatic ways to manipulate your interface structure. For situations where directives must be controlled, we recommend using SemanticOrderView of the Community Toolkit, which is also available in the same.NET MAUI version.

SetSemanticFocus and Announce methods

As part of the new SemanticExtensions class, we added a new SetSemanticFocus method that allows you to move screen reader focus to specific elements. Compare this to VisualElement.focus, which 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();
}
Copy the code

In Essentials, we added another new method Announce, which sets the text to be announced by the screen reader. For example, by clicking a 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");
}
Copy the code

The font scaling

Font scaling is enabled by default for all controls on all platforms. This means that when your application users adjust their text zoom preferences in the operating system, your UI will reflect their choices. By default, this produces a more accessible application.

Each control has an added FontAutoScalingEnabled, which can even be used with FontImageSource for your font icon. 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>
Copy the code

Be sure to look at your screens and adjust styles as needed to make sure they work for all sizes.

Other highlights

There are several notable additions to this release.

  • We have added support for Effects, which will support project #1574 upgraded from Xamarin.Forms.
  • Improvements to AppThemeBinding, support for dark and light theme modes #1657.
  • Scroll view handler #1669.
  • Android Shell ported to Core #979.
  • Shell navigation passes complex object #204.
  • Visual Tree Helper added XAML hot overload #1845.
  • Switch to the System.Com ponentModel. TypeConverter # 1725.
  • Window lifecycle event #1754.
  • Page navigation event #1812.
  • The CSS prefix is updated to -maui #1877.

For a complete set of changes, see branch comparisons.

now

First, install.net 6 Preview 7. Next add the MAUI workload using maui-Check. Also ensure that you have updated to the latest preview release of Visual Studio 2022.

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

Are you 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, see our documentation.

Welcome feedback

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

Currently, we are also working on the latest Windows APPLICATION SDK single project MSIX extension and Visual Studio 2022. NET MAUI does final troubleshooting to resolve debugging failures. You can successfully deploy a Windows application directly and run it from the Start menu.

Let us know about your experience with.NET Maui Preview 7 by interacting with us at Dotnet/Maui on GitHub.

For future releases, visit our product roadmap, and for feature completeness, visit our status wiki.