Although Microsoft Build is only a few years old, we will continue to share our experience here. Continued progress in.NET Multiplatform Application UI (.NET Maui). In this release, we enabled animation and view transformation, completed the migration of multiple UI components, and improved a single project template.

We have also released the first batch of preview documents covering the introduction and basics of.NET Maui:https://docs.microsoft.com/en-us/dotnet/maui/.

animation

There are several ways to perform animations in.NET Maui, the simplest of which is to use view extension methods such as FadeTo, RotateTo, ScaleTo, TranslateTo, and so on. In the following example, I use the new handlerAttached event to get a reference to each view that is bound to the layout (see Bindable 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 fashion to create a nice cascade 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 choreography, check out the Custom Animation documentation, which demonstrates adding multiple child animations that can be run in parallel. You can view and run the source code for this example from the WeatherTwentyOne project on GitHub.

User Interface Components

In this release, several controls have now migrated all properties and events from the Xamarin.Forms renderer architecture to the handler, including the ActivityIndicator, Checkbox, Image, and Steper. In the previous preview, you needed to check whether the controls were migrated and register renderers from the compatibility package for renderers that were not available. In.NET Maui Preview 5, we updated the UsemauiApp extension (seeStartup wiki) makes this easier by connecting all the controls for you, whether they are processer-based or renderer-based.

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

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

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

<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 functionality on our.NET Maui status page.

Individual project template updates

We made progress in this release by combining multiple WinUI projects into one. Now, when you create a new Maui project, you will see two projects: the multi-objective.NET Maui project and the WinUI project.

Now that you’re running the WinUI project, you won’t be confused about which project to choose. This is a step toward the ultimate vision of a single project that can be built and deployed to all supporting platforms. To support this feature, you will need to install these Project Reunion 0.8 (Preview) extensions in Visual Studio 16.11 Preview 2.

  • Project Reunion(preview) expansion
  • Single-project MSIX packaging tool (preview)

NET Maui Preview 5 Getting started

In this release, we 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. Installation:

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

Now run and follow the updates to get.NET 6 Preview 5, the platform SDK,.NET Maui, project templates, and even check to see if there are third-party dependencies in your environment.

$ maui-check

If you want to do it step by step, you can follow these instructions to install everything separately. Once installed, 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 the platform of your choice!

Note: If you have previously installed.NET 6 Preview 4 (either directly or by installing.NET Maui), you may be installing and running.NET 6


Preview 5 encountered problems. For instructions on how to repair, see
.NET 6 known issuesThe 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. Be sure to disable XAML hot overloading to avoid type errors, or stick with 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 a multi-objective project so you can avoid the hassle of coordinating WinUI projects. For more information about using.NET Maui, please refer to our new documentation site.

Welcome feedback

Please let us know how you use it. NET Maui Preview 5 is an experience for creating new applications through our partnership on DotNet/Maui GitHub. To learn about what will be released in future releases, visit our product roadmap. If you have any technical questions, please ask them on Microsoft Q&A.