Announcing .NET MAUI Preview 12

David Ortinau

January 19th, 202237 0

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.

David Ortinau Principal Product Manager, .NET Multi-platform App UI

Read next

37 comments

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

  • Kyle Fuller 0

    Thanks Tim. With this viewmodel dependency injection, how do i get XAML to pickup the viewmodel correctly for intellisense?

    • Kyle Fuller 0

      I was able to fix this with:
      x:DataType=”{x:Type vm:MyViewModel}”

    • Mark Dev 0

      Hi David
      I have a question about maui collectionview is it ready ? On the status wiki looks not done yet. We have had a fair amount of issue with collectionview and its vital for us to move to maui.
      Also i am a prism user but unfortunately there isnt any movements so far from the prism guys ,i have never used shell . Does shell have a navigation service similar to prism? We are looking to move away from it even though really good bcse hardly any updates during the year. Many thanks

  • Josh Comley 0

    Is there a plan to have a more functional sample app with demonstrations of individual things like accelerometer, camera, background services, maybe even an OAuth implementation?

  • Andy Walter 0

    Only disappointing thing is if somebody used preview 7 of maui, then the newest versions won’t even compile anymore even the default templates.
    Would be really disappointing if the rule is if a person ever used any preview, then even when the full release of maui comes out, will never work.

  • Burton Rodman 0

    I’d like to package my Maui app to try it out on my Windows Tablet. Unfortunately, Visual Studio crashes when trying to start the App Packaging wizard.

    a) are you aware of this crash? — I saw it on a Dev Community post, but the response was basically “sorry, Maui not supported yet”
    b) can you off a work-around — like building the package from the command line?

  • Jon Weighell 0

    Is SQLite still the recommended database to use for MAUI? This is working great on Android and Windows, but we’re having big problems when deploying to iOS 😖

    We’ve been trying everything, but it’s crashing on start-up with the following error…

    [0:] An error occurred: ‘e_sqlite3’. Callstack: ‘ at SQLitePCL.SQLite3Provider_e_sqlite3.SQLitePCL.ISQLite3Provider.sqlite3_libversion_number()
    at SQLitePCL.raw.SetProvider(ISQLite3Provider imp)

    We’re using the following packages:
    Microsoft.EntityFrameworkCore v6.0.1
    Microsoft.EntityFrameworkCore.Sqlite v6.0.1

    Please help! Thanks ☺️

    • SwaRajCooking nFun 0

      Hi Jon !! Can you help me here : how to publish maui blazor app on windows non dev machine? I published it on the non dev machine using MSIX installer with self signed certificate but after installation of the app using MSIX, app is getting crashed and in event viewer it’s showing the error
      related to faulty module Kernelbase.dll.

      • Sanjana Patel 0

        Hi Swaraj!!
        I am facing the same issue have to get the solution to this issue..

        • SwaRajCooking nFun 0

          Hi Sanjana,
          I am waiting for Jon to answer this query.

  • Rajesh Kashyap 0

    Hi MAUI Team,

    I Installed VS 2022 Version 17.1.0 Preview 4.0, becouse couldn’t find Preview 3.0. and created a “.Net MAUI App” but unfortunatly the code is not compiling giving error if anybody hvae any solution please help. I am getting folloeing errors.

    Severity Code Description Project File Line Suppression State
    Error Failed to retrieve information about ‘Microsoft.Maui’ from remote source ‘https://packagesource/FindPackagesById()?id=’Microsoft.Maui’&semVerLevel=2.0.0’.
    An error occurred while sending the request.
    The remote name could not be resolved: ‘packagesource’

  • prodbyjonny 0

    Give me VS for Mac support i NEED IT it drives me crazy because… lets be honest vscode on m1 mac for c# is absolutely dumb and not in a useable state
    I NEED TO TRY MAUI PLEAASE

    ok but thank you for developing it
    keep up your work guys

  • Hasti Fallah 0

    hi david.
    as always your docs are amazing and completed.just wanted to know will be there any kind of “getting started with maui” when it is officially out?
    thanks

  • Souleymane Ba 0

    I am a C# developer wanting to create a rich editor app (like quilljs for example).
    I started with WPF RichTextBox .net 4.7 framework.
    UWP was not an option because I tried it in a small projet 5 years ago and I was not convinced at all.
    Then I discovered all the new stuff from .net core and .net5.
    I decided to go with WPF and Quilljs embedded in WebView2.
    Several weeks later I decided to go with Blazor WebAssembly PWA
    (i.e. I am not targeting Windows only).
    My last shift was MAUI (no sandbox and native API).
    I want to use MAUI xaml and some web component (Quilljs) written with Blazor.
    I read all the documentation (it was quick as I read WPF documentation 6 month ago).
    I tried the two templates (MAUI, MAUI Blazor) and after maui workload update (project were not building out of the bow after installing Visual Studio 2022 preview 17.1.0 Preview 5.0) both projects are running fine (at least on Windows).
    I hope that components written in Blazor and components written in pure maui code can communicate (at least using code) within one application.

  • Vaibhav Joshi 0

    Hi David,

    I am working on MAUI Project where I have couple of detailed questions. Do you have a way I can send you message without posting publicly?

    Thanks.

Feedback usabilla icon