Announcing .NET MAUI Preview 5

David Ortinau

David

While we are still recovering from Microsoft Build and .NET 6 Preview 4, we are here to share our continued progress with .NET Multi-platform App UI (.NET MAUI) with .NET 6 Preview 5. In this release we have enabled animations and view transformations, completed the porting of several UI components, and introduced improvements to the single project templates.

We have also published our first batch of preview documentation covering introductory and foundational aspects of .NET MAUI: https://docs.microsoft.com/dotnet/maui/.

Image mauiFadeTo

Animations

There are a few ways to perform animation in .NET MAUI, the easiest of which is using view extension methods such as FadeTo, RotateTo, ScaleTo, TranslateTo, and more. In the following example I grab a reference to each view bound to the layout (see bindable layouts) using the new HandlerAttached event:

<DataTemplate x:Key="FavouriteTemplate">
    <Frame
        AttachedHandler="OnAttached"
        Opacity="0">
        ...
    </Frame>
</DataTemplate>
<FlexLayout
    BindableLayout.ItemTemplate="{StaticResource FavouriteTemplate}"
    BindableLayout.ItemsSource="{Binding Favorites}"
    >
    ...
</FlexLayout>

When the page appears I then animate the views in with a slight stagger to create the beautiful 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 more complete orchestration of view animations, check out the Custom Animation documentation which demonstrates adding multiple child animations that can run parallel.

You can view and run the source for this example from the WeatherTwentyOne project on GitHub.

UI Components

In this release several controls now have all properties and events ported to handlers from the renderer architecture of Xamarin.Forms, including ActivityIndicator, CheckBox, Image, and Stepper. In previous previews you would need to check if a control was ported and register renderers from the compatibility package for those unavailable. In .NET MAUI Preview 5 we have made this much easier by updating the UseMauiApp extension (see the Startup wiki) to wire up all the controls for you, whether they are based on handlers or renderers.

Image maui pre5 controls

Also new in preview 5 is the first introduction of Shell, an application container that provides URI navigation and a quick way to implement flyout menus and tabs. To get started add Shell as the root element to your window in the App.xaml.cs. The typical pattern I follow is naming it “AppShell”, though you can name it as you wish.

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 that represents the navigation you wish to display, either FlyoutItem or Tab. These are not UI controls, but rather represent the types that will create those UI controls. You can later style the controls with content templates which we’ll introduce 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>

Image maui shell catalyst

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

Single Project Templates Updates

We have made progress in this release consolidating the multiple WinUI projects into one. Now when you dotnet new maui a project you’ll see two projects: the multi-targeted .NET MAUI project, and the WinUI project.

visual studio showing two projects

Now to run the WinUI project you’ll have no confusion about which project to choose. This is one step closer to the final vision of having just one project that can build and deploy to all supported platforms. In order to support this, you’ll need to install these Project Reunion 0.8 (Preview) extensions for Visual Studio 16.11 Preview 2.

Getting Started with .NET MAUI Preview 5

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

To install:

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

Now run and follow the updates to get .NET 6 Preview 5, platform SDKs, .NET MAUI, project templates, and even check your environment for 3rd party dependencies.

$ maui-check

If you wish to go step-by-step yourself, you can install everything individually with these instructions.

Once installed, you’re ready to create a new app 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 installed .NET 6 Preview 4 previously (either directly or by installing .NET MAUI), then you may run into issues installing and running .NET 6 Preview 5. See the .NET 6 Known Issues for instructions on how to fix up your installation.

Eager to try Visual Studio 2022 Preview 1? Start exploring with the mobile platforms using the Android emulator and iOS with a remote iOS device, or connected Mac host. Be sure to disable XAML Hot Reload to avoid a type error, or stick with Visual Studio 2019 version 16.11 Preview 2.

In the future, Project Reunion extensions will support Visual Studio 2022 and you’ll be able to use all the platforms on Windows.

If you have existing .NET MAUI projects you wish to migrate to Preview 5, I recommend creating a new project like above and copying your files over to the multi-targeted project so you can avoid the trouble of reconciling the WinUI projects.

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

Feedback Welcome

Please let us know about your experiences using .NET MAUI Preview 5 to create new applications by engaging with us on GitHub at dotnet/maui.

For a look at what is coming in future releases, visit our product roadmap.

48 comments

Leave a comment

    • james re
      james re

      GO TO AMAZON SITE FOR $1000 VOUCHER: DO NOT CLICK

      You will be redirected to the new address in five seconds.

      If you see this message for more than 5 seconds, please click on the link above!

  • Avatar
    Robert Sundström

    I have not been able to test MAUI yet, since, as of yet, you don’t support multiple architectures side-by-side on Mac Silicon.
    But will it work side-by-side on my Intel Mac without messing up my other .NET SDK installs?

    And another question:

    Is it now possible to use dependency injection to inject services into the DataTemplate of ShelItem, or indeed, any other view in MAUI?
    This is not possible in Xamarin.Forms.

  • Avatar
    Shanzhang Fang

    got below error when I run dotnet tool install -g redth.net.maui.check :

    C:\Program Files\dotnet\sdk\6.0.100-preview.5.21302.13\Sdks\Microsoft.NET.Sdk\targets\Microsoft.NET.Sdk.ImportWorkloads.props(14,38): error MSB4236: The SDK ‘Microsoft.NET.SDK.WorkloadAutoImportPropsLocator’ specified could not be found. [C:\Users\fangs\AppData\Local\Temp\sn1gzabu.lxd\restore.csproj]
    The tool package could not be restored.
    Tool ‘redth.net.maui.check’ failed to install. This failure may have been caused by:

    • You are attempting to install a preview release and did not use the –version option to specify the version.
    • A package by this name was found, but it was not a .NET tool.
    • The required NuGet feed cannot be accessed, perhaps because of an Internet connection problem.

    I just installed .net 6 preview5 & latest vs preview.

    • Avatar
      zephania Eliah

      Battling the same error and every thing seems to fall apart nothing working on my development machine per now. Joy of waiting .net 6 preview 5 changed into nightmare I tried to solve the whole night without any success…

    • Avatar
      zephania Eliah

      I think I have found the solution for this from Daniel Roth post that states
      Note: There is a known issue with installing optional SDK workloads using the .NET 6 Preview 5 SDK included with Visual Studio 2022 Preview 1. To workaround this issue, install the .NET 6 Preview 5 SDK from https://dot.net/get-dotnet6 after installing Visual Studio 2022 Preview 1.
      Though am not sure if its the only thing solved my issue as I tried different work arounds hope it will help u too

    • Avatar
      Shane DeSeranno

      I found that if I set this environment variable before installing/upgrading maui-check, it fixed it:

      set MSBuildEnableWorkloadResolver=false
  • Avatar
    Shane DeSeranno

    Things are definitely better for me. I can now deploy to Android with no issues, but if I try to debug a Maui Blazor app, it immediately crashes with:

    [HostConnection] createUnique: call
    [HostConnection] HostConnection::get() New Host Connection established 0xf6b01a50, tid 19254
    [goldfish-address-space] allocate: Ask for block of size 0x100
    [goldfish-address-space] allocate: ioctl allocate returned offset 0x3fda57000 size 0x2000
    [HostConnection] HostComposition ext ANDROID_EMU_CHECKSUM_HELPER_v1 ANDROID_EMU_native_sync_v2 ANDROID_EMU_native_sync_v3 ANDROID_EMU_native_sync_v4 ANDROID_EMU_dma_v1 ANDROID_EMU_direct_mem ANDROID_EMU_host_composition_v1 ANDROID_EMU_host_composition_v2 ANDROID_EMU_vulkan ANDROID_EMU_deferred_vulkan_commands ANDROID_EMU_vulkan_null_optional_strings ANDROID_EMU_vulkan_create_resources_with_requirements ANDROID_EMU_YUV_Cache ANDROID_EMU_async_unmap_buffer ANDROID_EMU_vulkan_ignored_handles ANDROID_EMU_vulkan_free_memory_sync ANDROID_EMU_vulkan_shader_float16_int8 ANDROID_EMU_vulkan_async_queue_submit ANDROID_EMU_sync_buffer_data GL_OES_EGL_image_external_essl3 GL_OES_vertex_array_object GL_KHR_texture_compression_astc_ldr ANDROID_EMU_host_side_tracing ANDROID_EMU_async_frame_commands ANDROID_EMU_gles_max_version_3_0 
    [.MauiAppBlazor] * Assertion at /__w/1/s/src/mono/mono/mini/debugger-agent.c:4389, condition `tls' not met
    Thread started:  #9
    [libc] Fatal signal 6 (SIGABRT), code -6 (SI_TKILL) in tid 19274 (ThreadPoolForeg), pid 19218 (.MauiAppBlazor1)
    

    I have tested this with an emulator and a real device with the same result. I also, commented out the BlazorWebView in the MainPage.xaml and it did not crash. So, it feels like something related to Blazor/BlazorWebView on Android. I also tested on Windows (WinUI) and it attached and debugged fine.

  • Avatar
    Igal Flegmann

    If we start developing with the two projects still being separated, is there going to be an easy way to migrate once it is all in one? or would you recommend waiting until MAUI is consolidated into one project?

    • David Ortinau
      David OrtinauMicrosoft employee

      The migration guide for moving from two projects to one will likely be just like this release: create a new project with the updated template and then copy your app files over. I would start now. That move in the coming releases should be really easy.

  • Avatar
    hamid Darab

    hello . thank you for MAUI project. according to excessive number of problems in XAMARIN Forms reported in Github (especially for Right to Left languages ) and considering the fact that MAUI covers much more platforms ,I like to know whether the previous problems in XAMARIN Forms(especially ones related to Right to Left languages ) persist in MAUI?
    thank you.

  • Avatar
    Andy Walter

    So far, I am really disappointed. I was unable to get any maui apps to work. Even just the sample templates, it always fail on desktop and android. This could be a huge scam.

      • Avatar
        Andy Walter

        I sent an email now. The good news is there was somebody who was helpful for the android side which is the most important part. I just hope the change required can be put to future templates so others won’t have the same issue. For windows, the installation is much harder. Disappointed that windows did not work out of the box. However, I still have wpf so that is not as important.

  • Avatar
    Nicolò Carandini

    Installed Visual Studio Version 16.11.0 Preview 2.0
    Updated maui-check tool and run it.
    Created a new MAUI app with VS template

    I can run it on my Android emulated device but only with Hot Reload disabled, otherwise the app start and the Mainpage is shown but after few seconds the app crash.
    I’ve created a VS Feedback but is still syncing at the moment (Ticket with id ‘1454838’ not found).

    • Avatar
      Shane DeSeranno

      I am having the same thing. I haven’t tried with hot reload disabled. Do you have instructions for how to disable hot reload? EDIT: I think I found it (in Visual Studio’s options, search for reload and disable). Thanks for the tip!

      • Avatar
        Nicolò Carandini

        Oddly enough, my VS feedback is still unavailable so I think I’d do it again 🙂
        And yes, the Hot Reload can be disabled from the VS Options | Debugging | Hot Reload | Enable XAML Hot Reload checkbox.

    • Avatar
      Lu N

      The same for me.
      Disabile Hot Reload doesn’t make sense.
      I waited the preview 5 to play with MAUI and I’m really disappointed

  • Avatar
    Lo Kinfey

    I update .NET 6 preview 5 ,

    I want to update redth.net.maui.check

    But the error is coming :

    /var/folders/rt/xqzgzfjd1bvcq4r7tw_vdpqc0000gn/T/jbmrgarh.5hk/restore.csproj(5,3): warning MSB4242: The SDK resolver “Microsoft.DotNet.MSBuildWorkloadSdkResolver” failed to run. An item with the same key has already been added. Key: microsoft-android-sdk-full
    /usr/local/share/dotnet/sdk/6.0.100-preview.5.21302.13/Sdks/Microsoft.NET.Sdk/targets/Microsoft.NET.Sdk.ImportWorkloads.props(14,3): warning MSB4242: The SDK resolver “Microsoft.DotNet.MSBuildWorkloadSdkResolver” failed to run. An item with the same key has already been added. Key: microsoft-android-sdk-full
    /usr/local/share/dotnet/sdk/6.0.100-preview.5.21302.13/Sdks/Microsoft.NET.Sdk/targets/Microsoft.NET.Sdk.ImportWorkloads.props(14,38): error MSB4236: The SDK ‘Microsoft.NET.SDK.WorkloadAutoImportPropsLocator’ specified could not be found. [/var/folders/rt/xqzgzfjd1bvcq4r7tw_vdpqc0000gn/T/jbmrgarh.5hk/restore.csproj]
    The tool package could not be restored.
    Tool ‘redth.net.maui.check’ failed to install. This failure may have been caused by:

    • You are attempting to install a preview release and did not use the –version option to specify the version.
    • A package by this name was found, but it was not a .NET tool.
    • The required NuGet feed cannot be accessed, perhaps because of an Internet connection problem.
    • You mistyped the name of the tool.

    For more reasons, including package naming enforcement, visit https://aka.ms/failure-installing-tool