Announcing .NET MAUI Preview 12

David Ortinau

Today we are shipping a Preview 12 of .NET Multi-platform App UI with many quality improvements and some new capabilities. As we near shipping our first stable release, the balance of work begins to shift towards quality improvements and stabilization, though there are still some interesting new things to highlight including:

  • New documentation for App icons, App lifecycle, Brushes, Controls, and Single Project.
  • FlyoutView handler implemented on Android (#3513)
  • Compatibility handlers added for RelativeLayout and AbsoluteLayout (#3723)
  • Z Index property added (#3635)
  • .NET 6 unification – iOS types (Issue)
  • Windows extended toolbar – non-Shell (#3693)

Windows app with extended toolbar

This release also brings an exciting enhancement to Shell. Let’s take a deeper look at Shell in Preview 12.

Shell is an app scaffold that simplifies common app designs that use flyout menus and tabs. Within your Shell, commonly named AppShell in our examples, you start adding your app pages and arrange them in the navigation structure you want. For example, here is the .NET Podcast app sample:

<Shell xmlns="http://schemas.microsoft.com/dotnet/2021/maui"
       xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
       xmlns:pages="clr-namespace:Microsoft.NetConf2021.Maui.Pages"
       xmlns:root="clr-namespace:Microsoft.NetConf2021.Maui"
       xmlns:viewmodels="clr-namespace:Microsoft.NetConf2021.Maui.ViewModels"
       x:DataType="viewmodels:ShellViewModel"
       x:Class="Microsoft.NetConf2021.Maui.Pages.MobileShell">
    <TabBar>
        <Tab Title="{Binding Discover.Title}"
             Icon="{Binding Discover.Icon}">
            <ShellContent ContentTemplate="{DataTemplate pages:DiscoverPage}" />
        </Tab>
        <Tab Title="{Binding Subscriptions.Title}"
             Icon="{Binding Subscriptions.Icon}">
            <ShellContent ContentTemplate="{DataTemplate pages:SubscriptionsPage}" />
        </Tab>
        <Tab Title="{Binding ListenLater.Title}"
             Icon="{Binding ListenLater.Icon}">
            <ShellContent ContentTemplate="{DataTemplate pages:ListenLaterPage}" />
        </Tab>
        <Tab Title="{Binding ListenTogether.Title}"
             Icon="{Binding ListenTogether.Icon}"
             IsVisible="{x:Static root:Config.ListenTogetherIsVisible}">
            <ShellContent 
                ContentTemplate="{DataTemplate pages:ListenTogetherPage}" />
        </Tab>
        <Tab Title="{Binding Settings.Title}"
             Icon="{Binding Settings.Icon}">
            <ShellContent ContentTemplate="{DataTemplate pages:SettingsPage}" />
        </Tab>
    </TabBar>
</Shell>

.NET Pods Mobile Tabs screenshots

Navigation in a Shell context is done with URI based routing. In the center image of the screenshot we have navigated to a details view which isn’t represented in the XAML above. For pages that don’t need to be visible, you can declare routes for them in code and then navigate to them by URI. You can see this again in the podcast app code “App.xaml.cs”:

Routing.RegisterRoute(nameof(DiscoverPage), typeof(DiscoverPage));
Routing.RegisterRoute(nameof(ShowDetailPage), typeof(ShowDetailPage));
Routing.RegisterRoute(nameof(EpisodeDetailPage), typeof(EpisodeDetailPage));
Routing.RegisterRoute(nameof(CategoriesPage), typeof(CategoriesPage));
Routing.RegisterRoute(nameof(CategoryPage), typeof(CategoryPage));

To move from the home screen to the details view, when the user taps the cover image the app executes a command on the ShowViewModel binding context:

private Task NavigateToDetailCommandExecute()
{
    return Shell.Current.GoToAsync($"{nameof(ShowDetailPage)}?Id={Show.Id}");
}

From anywhere in your app code you can access Shell.Current to issue navigation commands, listen to navigation events, and more.

This also demonstrates one of the powerful features of navigation in Shell: query parameters for passing simple data. In this case the “Show.Id” is passed with the route and then Shell will apply that value to the binding context of ShowDetailPage making it instantly ready for use. The “QueryProperty” handles the mapping of querystring parameter to public property.

 [QueryProperty(nameof(Id), nameof(Id))]
public class ShowDetailViewModel : BaseViewModel
{
    public string Id { get; set; }
}

Shell and Dependency Injection

.NET MAUI’s use of HostBuilder and powerful dependency injection have been a highlight of the previews. One of the top feedback items we have received about Shell is the desire to use constructor injection, and in this release thanks to the efforts contributor Brian Runck you can now use it!

Define your dependencies in the DI container, typically in the “MauiProgram.cs”:

public static class MauiProgram
    {
        public static MauiApp CreateMauiApp()
        {
            var builder = MauiApp.CreateBuilder();
            builder
                .UseMauiApp<App>();

            builder.Services
                .AddSingleton<MainViewModel>();

            return builder.Build();
        }
    }

Then in the page where want it injected:

public partial class MainPage
{
    readonly MainViewModel _viewModel;

    public MainPage(MainViewModel viewModel)
    {
        InitializeComponent();

        BindingContext = _viewModel = viewModel;
    }
}

Shell offers a lot of styling and templating capabilities so you can quickly achieve most common needs. For more details check out the Shell documentation.

Get Started Today

Before installing Visual Studio 2022 Preview, we highly recommend starting from a clean slate by uninstalling all .NET 6 previews and Visual Studio 2022 previews.

Now, install Visual Studio 2022 Preview (17.1 Preview 3) and confirm .NET MAUI (preview) is checked under the “Mobile Development with .NET workload”.

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

Preview 12 release notes are on GitHub. For additional information about getting started with .NET MAUI, refer to our documentation.

Feedback Welcome

Please let us know about your experiences using .NET MAUI 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, and for a status of feature completeness visit our status wiki.

37 comments

Discussion is closed. Login to edit/delete existing comments.

  • Tim Belvin 0

    This is great stuff! It’s time to do more than lots of “File | New” and experiment with a feature or two. Question: where are the templates for Shell?

    • David OrtinauMicrosoft employee 0

      Thanks Tim. We haven’t created a Shell template just yet. It is planned for a future release.

      • Daniel Smith 0

        I’d also really like to see an option for Shell added as well. One suggestion though – would it be possible to simply add Shell as an option to the wizard of the existing template, rather than adding as a totally separate template?

  • Marie storch 0

    nice update, I m working with maui + blazor, is there any way I can customize the window style, like removing the titlebar and make the background transparency, currently I didnt found any way to do it.

    • David OrtinauMicrosoft employee 0

      To really get into the chrome of the desktop window you’ll want to do that from the platform code. If WinUI 3, then check the platform documentation for the API you need to use.

      For example on where you can implement such things, check out the WeatherTwentyOne app. Here I touch the “ExtendsContentIntoTitleBar” API. https://github.com/davidortinau/WeatherTwentyOne/blob/main/src/WeatherTwentyOne/MauiProgram.cs#L27

      Here are some other examples using extension methods. https://github.com/davidortinau/WeatherTwentyOne/blob/main/src/WeatherTwentyOne/Platforms/Windows/MauiWinUIWindowExtensions.cs

      • Rod Macdonald 0

        I can’t get enough .NET MAUI Blazor!

        I’ll check out the links but one thing the component vendors seem reluctant to tackle is a responsive menu which is full width with dropdowns on the desktop and hamburger on mobile. Equally being able to add icons in a horizontal line in mobile (beside the hamburger). It’s not an easy thing to do at all and the nearest thing I’ve seen is a JQuery control called StellarNav.

  • John 0

    Thanks for the update! Will there be an upgrade from preview 11 to 12 guide? Or is there nothing required?

    Also, on the status page, Label.FormattedText is still marked as Pending, do you know when that will get picked up?

    Lastly, I still don’t see any way of configuring android in a Maui project, specifically for Xamarin.UITest which requires binaries with Mono Shared Runtime disabled. Release builds are throwing the same ‘Mono Shared Runtime must be disabled’ error as debug and I don’t see where in the .csproj I can set this manually.

    One more question, when will the preview 12 binaries be available to install via CLI? Im using CLI install in ADO build pipelines, but it is still picking up preview 11.
    sudo dotnet workload install maui

    And one more, Xamarin.TestCloud.Agent no longer works and needs to be rebuilt. So with Preview 13 we can no longer perform UI testing with Xamarin.UITest.

    • David OrtinauMicrosoft employee 0

      Right, I didn’t have any upgrade notes this time around.

      Label.FormattedText should be in the next release. https://github.com/dotnet/maui/pull/3637

      As for your other questions, let me confirm answers and have someone get back to you.

      • John 0

        Hi David, any updates on those other questions?
        1: Highest priority for us: We can’t install preview 12 via CLI in the ADO build pipeline, so we can’t update our .NET Maui test suite to update 12 either as it will fail to build.
        2: No longer be able to use Xamarin.UITest in on iOS as Xamarin.TestCloud.Agent can’t be in the .NET Maui project (ok it can, but only for maccatalyst).
        3: How to configure the android specific settings so we can setup ui testing for android (release builds also report that Mono Shared Runtime is enabled)
        4: Any chance of getting access to pre-preview nuget that includes the FormattedText PR?

  • Alishoooo Esteres 0

    Hi David, I have several questions

    1- How to use Java library for Android in Maui?
    2- Can ml.net be used on maui?
    3- Is there direct access to Windows App SDK classes?
    4- Is there a plan for better interaction and easier debugging between Visual Studio and WSA? (Like controlling traffic and networking)
    5- What is the approximate size (in megabyte) of a project for each platform in MAUI?

  • Thomas Adrian 0

    how do I create a simple inputbox in a Maui app?

  • Vincent Niehues 0

    I’m excited!
    dotnet workload install maui still installs pre11 for me. Is there any way to force it to pre12?
    I’m on MacOS.

        • Andres G. Aragoneses 0

          Hey, VS4mac works for me, but only the first time when running the app. If I make any more changes to the app, they don’t get deployed when hitting “run”, the old version of the app is still there and never gets updated. I don’t even know how to uninstall the app manually in the iPhone emulator to try to workaround the issue.

  • Damian Wyka 0

    Very nice to see zindex implemented. I wonder if this concept could be extended to windows themselves: would be useful for custom drag&drop on desktop between different windows within single app. (That being said there are multiple ways to tackle the problem eg. A function that tells if given window is fully visible under given point or rectangle or z ordered list of windows so we can implement these functions ourselves, i would be fine with any of these). Note im NOT interested in mobile only solutions. I want something that works on desktop too.

  • spearheadHD 0

    Hi David, there is no dependency for net6.0-windows when creating a new project using VS 2022 version 17.1 Preview 3.0. Therefore, debugging on windows side is not possible. Could you please help? Thank you.

    • amirreza solt 0

      thanks alot

  • Jura B 0

    Hello, I have a question. How can I use the new Sigle Project template, android and ios simulator at the same time. as with xamarin forms

    with visual studio 2022

  • piercarlo schiavo 0

    Hello David,

    today is friday 21 of january,

    I Installed the VisualStudio Preview 3, the latest Net 6.0.200-preview.22069.5 and the latest Maui Worload successfully.

    I created a new project Blazor “.Net MAUI Blazor App” and I get following errors:

    Microsoft.Maui.Graphics package with version (> = 6.0.200-preview.13.899) was not found

    Microsoft.Maui.Graphics.Win2D.WinUI.Desktop with version (> = 6.0.200-preview.13.899) was not found

    This because for bought latest version is: 6.0.200-preview.12.852

    So there is a workaround or need to wait for the next release of that packages ?

    Thank you

    Piercarlo

    • Justin Armstrong 0

      For anyone who gets this error you need to add a new NuGet source for dotnet6. https://aka.ms/dotnet6/nuget/index.json

Feedback usabilla icon