.NET MAUI Preview 5 feature preview

Although Microsoft Build has just passed, we will continue to share our continuous progress in the .NET multi-platform application UI (.NET MAUI) here. In this version, we have enabled animation and view transitions, completed the migration of multiple UI components, and improved a single project template.
We also released the first batch of preview documents covering the introduction and basic aspects of .NET MAUI: https://docs.microsoft.com/en-us/dotnet/maui/ .

Animation

animation in .NET MAUI. The simplest method is to use view extension method , such as FadeTo, RotateTo, ScaleTo, TranslateTo, etc. In the following example, I use the new HandlerAttached event to get a reference to each view bound to the layout ( see Binding Layout ):

<DataTemplate x:Key="FavouriteTemplate">
    <Frame
        AttachedHandler="OnAttached"
        Opacity="0">
        ...
</Frame>

<FlexLayout
BindableLayout.ItemTemplate="{StaticResource FavouriteTemplate}"
BindableLayout.ItemsSource="{Binding Favorites}"
 >
...
</FlexLayout>

When the page appears, I animate the view in a slightly staggered manner to create a beautiful cascading effect.

public partial class FavoritesPage : ContentPage
{
 List<Frame> tiles = new List<Frame>();
void OnAttached(object sender, EventArgs e)
{
  Frame f = (Frame)sender;
tiles.Add(f);
}
protected override async void OnAppearing()
{
base.OnAppearing();
await Task.Delay(300);
TransitionIn();
}
async void TransitionIn()
{
foreach (var item in tiles)
{
item.FadeTo(1, 800);
await Task.Delay(50);
   }
}    
}

For a more complete view animation layout, please check custom animation document , which demonstrates adding multiple sub-animations that can run in parallel.
You can view and run the source code of this example WeatherTwentyOne

User interface components

In this version, several controls have now ported all properties and events from Xamarin.Forms' renderer architecture to handlers, including ActivityIndicator, CheckBox, Image, and Stepper. In the previous preview version, you need to check whether the control is ported and register the renderer for the unavailable renderer from the compatibility pack. In .NET MAUI Preview 5, we made this easier by updating the UseMauiApp extension (see Startup wiki ) for you to connect all controls, whether they are based on handlers or renderers.

Another new feature in Preview 5 is the first introduction of Shell , which is an application container that provides URI navigation and a quick way to implement pop-up menus and tabs. First, add Shell as the root element to the window in App.xaml.cs. The typical pattern I follow is to name it "AppShell", but you can name it whatever you want.

protected override IWindow CreateWindow(IActivationState activationState)
{
    return new Microsoft.Maui.Controls.Window(
        new AppShell()
    );
}

Now, in your AppShell class, start filling the menu with content that represents the type of navigation you want to display (FlyoutItem or Tab). These are not UI controls, but represent the type of UI controls that will be created. You can use the content template we will introduce in Preview 6 to style the control later.

<Shell xmlns="http://schemas.microsoft.com/dotnet/2021/maui" 
       xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
       xmlns:pages="clr-namespace:ControlGallery.Pages"
       Title="ControlGallery"
       x:Class="ControlGallery.AppShell">

    <FlyoutItem Title="Margin and Padding">
        <ShellContent Route="marginpadding" 
                      ContentTemplate="{DataTemplate pages:ControlsPage}" />
    </FlyoutItem>

    <FlyoutItem Title="ActivityIndicator">
        <ShellContent Route="activityindicator" 
                      ContentTemplate="{DataTemplate pages:ActivityIndicatorPage}" />
    </FlyoutItem>

    ...

</Shell>

Get the latest information about controls, layouts and functions on our .NET MAUI status page

Single project template update

We have made progress in this version, merging multiple WinUI projects into one. Now, when you create a new maui project, you will see two projects: the multi-target .NET MAUI project and the WinUI project.

Now to run the WinUI project, you will not be confused about which project to choose. This is a step towards the ultimate vision that only one project can be built and deployed to all supported platforms. To support this feature, you need to install these Project Reunion 0.8 (Preview) extensions in Visual Studio 16.11 Preview 2.

• Project Reunion (preview) extension
• single project MSIX packaging tool (preview)

Getting started with .NET MAUI Preview 5

In this release, we have enabled restoring your project without adding a custom NuGet source. Just create a new project and run it! To get all the latest content, we continue to recommend running the maui-check dotnet tool.
Install:

$ dotnet tool install -g redth.net.maui.check

Run and follow the update now to get .NET 6 Preview 5, platform SDK, .NET MAUI, project templates, and even check your environment for third-party dependencies.

$ maui-check

If you want to go step by step, you can follow these instructions to install a separate all content .
After installation, you can create a new application based on the Preview 5 template.

$ dotnet new maui -n MauiFive

Open your new MauiFive.sln in Visual Studio 16.11 Preview 1 and run it on the platform of your choice!

Note: If you have previously installed .NET 6 Preview 4 (either directly or by installing .NET MAUI), then you may be installing and running .NET 6
I'm having trouble with Preview 5. For instructions on how to fix it, see .NET 6 Known Issues Installation.

Eager to try Visual Studio 2022 Preview1 ? Start exploring mobile platforms using Android emulators or remote iOS devices, or connecting to a Mac host. Make sure to disable XAML hot reloading to avoid type errors, or stick to Visual Studio 2019 version 16.11 Preview 2.2.
In the future, the Project Reunion extension will support Visual Studio 2022, and you will be able to use all platforms on Windows.
If you already have a .NET MAUI project and want to migrate to Preview 5, I suggest you create a new project like the one above and copy your files to the multi-target project so that you can avoid coordinating the WinUI project trouble.
For more information on using .NET MAUI, please refer to our new documentation website .

Feedback is welcome

Please let us know about your experience of creating new applications with .NET MAUI Preview 5, by cooperating with us dotnet/ MAUI
To understand what will be released in future versions, please visit our product roadmap .
If you have any technical questions, please ask on Microsoft Q&A .