Announcing .NET MAUI Preview 4

David Ortinau

Image maui weather hero sm

Today we are pleased to announce the availability of .NET Multi-platform App UI (.NET MAUI) Preview 4. Each preview introduces more controls and features to this multi-platform toolkit on our way to general availability this November at .NET Conf. .NET MAUI now has enough building blocks to build functional applications for all supported platforms, new capabilities to support running Blazor on the desktop, and exciting progress in Visual Studio to support .NET MAUI.

Weather ’21

To showcase our progress in Preview 4 for Microsoft Build, we rapidly designed and developed a simple yet beautiful weather app. As we wait for Visual Studio to integrate .NET MAUI productivity features, we began with Xamarin.Forms. We implemented each UI widget and screen with shared styling in a single codebase. After a few hours, we then ported that work to .NET MAUI by making a few, small changes such as adopting the new Microsoft.Maui namespace. The process was painless and quick!

Image macOS maui

We also took the opportunity to show have easy it is to light up deep platform integrations by implementing app actions, an icon in the system tray (status bar), and platform-native notifications all from a single project running on Android, iOS, macOS, and Windows.

private void SetupAppActions()
{
    try
    {
        AppActions.SetAsync(   
            new AppAction("current_info", "Check Current Weather", icon: "current_info"),
            new AppAction("add_location", "Add a Location", icon: "add_location")
        );
    }
    catch (System.Exception ex)
    {
        Debug.WriteLine("App Actions not supported", ex);
    }
}

Image platform integrations png

Check out the WeatherTwentyOne source code here on GitHub, and our demos from Build 2021.

New Features

Progress continues porting controls and layouts from Xamarin.Forms to the .NET MAUI architecture. In this way, .NET MAUI both is excitingly new and not new at the same time. We have learned much over the past 7 years about how to make cross-platform native UI performant and easy to extend, and we are putting that to work here. For ongoing status of this work visit our GitHub status report.

BlazorWebView

The new BlazorWebView enables you to host a Blazor web application right in your .NET MAUI application and take advantage of seamless native platform features and UI controls. The control can be added to any XAML page and pointed to the root of the Blazor application.

<BlazorWebView 
    HostPage="wwwroot/index.html"
    Services="{StaticResource Services}">
    <BlazorWebView.RootComponent>
        <RootComponent 
            Selector="#app"
            ComponentType="{x:Type local:Main}"
        />
    </BlazorWebView.RootComponent>
</BlazorWebView>

For a deeper look at this powerful integration, read more on our ASP.NET blog.

Splash Screen

On mobile platforms especially you want your first screen to appear as quickly as possible, and this is done by implementing a static splash screen. .NET MAUI now has a single place to describe your splash screen for all platforms that support them.

<MauiSplashScreen Include="Resources\appiconfg.svg" Color="#512BD4" />

Image splash screens

Any image format may be provided along with a background brush, similar to how we also do app icons. For more advanced scenarios, platform-native splash screen methods all still apply.

Raw Assets

.NET MAUI now makes it very easy to add other assets to your project and reference them directly while retaining platform-native performance. For example, if you want to display a static HTML file in a WebView you can add the file to your project and annotate it as a MauiAsset in the properties.

<MauiAsset Include="Resources\Raw\index.html" />

Tip: you can also use wildcards to enable all files in a directory: Include="Resources\Raw\*"

Then you can use it in your application by filename.

<WebView Source="index.html" />

Visual Studio Productivity

In Visual Studio 16.11 Preview 1 we get a first look at the productivity features for .NET MAUI including new run options for a multi-targeted single project, and the all-new .NET Hot Reload for editing your managed code.

Single Project Run

Single Project introduces a new experience for selecting the target platform and device when running your .NET MAUI applications. These changes simplify the startup process and give you access to all the platforms and devices in a single place.

For Single Project, platform-specific application projects are no longer within the solution, thus you will no longer right-click on a project to set it as the startup project.

In the new target debug selector, you will select the platform you are targeting first. After selecting your target platform, you will be given the list of devices you can run your .NET MAUI application on. All of this will be accessible through the Run Menu when you have a .NET MAUI Single Project.

Image run static profiles

The new run menu is the first of a host of changes within Visual Studio to support Single Project applications. We’ll be announcing new features in the upcoming releases, so keep an eye out for updates!

.NET Hot Reload

.NET Hot Reload is a new experience that enables you to make live edits to your .NET MAUI app’s source code while it is running, reducing the number of times you need to rebuild your app.

To start testing this feature install both .NET 6 Preview 4 and Visual Studio 2019 version 16.11 Preview 1. Start your app through the Visual Studio debugger (F5) targeting a WinUI 3 host. Once your app is running, you’ll now have the new option to make code changes and apply them using our new “apply code changes” button as illustrated below.

Image dotnetmaui hotreload winui preview

In coming releases .NET Hot Reload will also be available for Android, iOS, and macOS, and we’ll be integrating XAML Hot Reload and the Live Visual Tree as well.

To learn more about Hot Reload check out Introducing .NET Hot Reload.

Ecosystem Readiness

Image telerik maui

One of the major advantages of using .NET is leveraging a rich ecosystem of controls and libraries for building apps. With Preview 4 the Telerik team has released their first set of controls for .NET MAUI at https://www.telerik.com/maui-ui. Check out their full announcement here.

“Since the very early days of .NET MAUI, our team has been thrilled about the concept behind its multi-platform capabilities! This will be a new era for .NET developers, and we are excited to partner with Microsoft in this journey.” said Stefan Stefanov, Director of Product Management at Progress. “The early preview version of Telerik UI for MAUI provides the .NET developer community with professionally designed, feature rich UI components to kickstart their cross-platform development and deliver stunning applications.”

Other component vendors are also planning .NET MAUI support such as Syncfusion, DevExpress, and GrialKit.

What about your favorite open-source libraries? Dan Siegel has already shared an early preview of Prism, a popular MVVM library.

Image prism tweet

We host a monthly community call to help maintainers bring their libraries to .NET 6 and .NET MAUI. If you would like to participate, send an email to david.ortinau@microsoft.com.

Get Started Today

Check out .NET MAUI today. Get started quickly be running the maui-check .NET tool from the command line to install .NET 6 Preview and all the SDK dependencies you need for developing .NET MAUI apps.

Don’t have maui-check? Run this from your command line:

dotnet tool install -g Redth.Net.Maui.Check

Run maui-check and follow the instructions.

Open Visual Studio 2019 16.11 Preview 1 and create a new .NET Multi-platfrom App UI project.

Image new project dialog

The new solution format includes the multi-targeted project which runs on Android, iOS, and macOS, and the two WinUI projects for Windows. In future releases, the WinUI projects will be absorbed into the multi-targeted project.

The .NET MAUI and AndroidX packages are temporarily on a hosted feed. Once we have those packages bundled as a workload this step will no longer be needed. Run the following terminal commands to add the required source.

dotnet new nugetconfig

dotnet nuget add source -n maui-preview https://aka.ms/maui-preview/index.json

To run for Android, set the multi-targeted project as your startup project and select the Android platform from the Run menu to see your Android emulators.

Android emulators – if this is your first run, you may be asked to create your own emulator before the app will deploy and run.

In coming releases we will enable iOS on Windows support for developing from Visual Studio to your connected iOS device.

For additional information about getting started with .NET MAUI, refer to our wiki documentation on GitHub.

Feedback Welcome

Please let us know about your experiences using .NET MAUI Preview 4 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.

63 comments

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

  • Ahmed Mohamed Abdel-Razek 0

    can i use BlazorWebView inside a wpf core project?

      • Ahmed Mohamed Abdel-Razek 0

        well that’s going to save me a ton of time, thanks

      • kartik poddar 0

        BlazorWebView not redering blazor component in our windows app

        <b:BlazorWebView VerticalOptions="FillAndExpand" HostPage="wwwroot/index.html">
            <b:BlazorWebView.RootComponents>
                <b:RootComponent Selector="#app" ComponentType="{x:Type local:Main}" />
            </b:BlazorWebView.RootComponents>
        </b:BlazorWebView>
        

  • Emmanuel Adebiyi 0

    Awesome Stuff. Really cool. Great work from the team. Can’t wait to try these new toys

  • Троепольский Алексей 0

    I would like to see schematically how blazor technology relates to MAUI or interacts with it and how MAUI itself works

    • Ahmed Hemdan 0

      I agree

    • David OrtinauMicrosoft employee 0

      How .NET MAUI works is the same as how Xamarin works: documentation here.

      Blazor apps render UI within a BlazorWebView. All app code and platform code is run in the same process as other .NET MAUI code. Any native UI or platform services are accessed through .NET MAUI.

      There’s no real boundary between the Blazor code and the .NET MAUI code because it’s all .NET. How you write your app is up to you: Razor, CSS, XAML, C#, etc.

      Check out this community standup where Eilon Lipton describes using Blazor with .NET MAUI.

      • Троепольский Алексей 0

        Thanks for answer. But, does blazor render ui to html (dom) in this case? If yes, which browser engine use for process dom?
        If it own “browser engine”, where can I see his html features support? like html grid, sub grid and etc

  • Masoud Moghaddam 0

    Your team is very great, just please continue, so that we can continue to achieve a result like ‘Blazor Wasm’

    I will use this technology at the first opportunity And I will give feedback on the results of use.Thank you very much
    David Ortinau
    Daniel Roth 😉

  • Matthias Lange 0

    I was really excited to try MAUI but I can’t run either the basic template nor this example here.

    Trying to run it in Android Emulator yields: “The project doesn’t know how to run the profile Android Emulator.” and fails.

    in WinUI 3 I the the following error:
    “System.Reflection.TargetInvocationException: ‘Exception has been thrown by the target of an invocation.'”
    Inner Exception: “COMException: Class not registered (0x80040154 (REGDB_E_CLASSNOTREG))”

    I couldn’t find anything on those. Anyone else got it running or the same problem?

    • Ivan E. Ordoñez O. 0

      facing same problem with Android Emulator here, but WinUI runs with no issues, maui-check indicates that all is ok

    • Warappa None 0

      Same COMException trying to run ProjectName.WinUI3.
      Already used the nuget.config from https://gist.github.com/LanceMcCarthy/62d3457fb93252ac1e3968fced457cec to resolve Microsoft.Maui and Microsoft.AspNetCore.Components.WebView.Maui, which are otherwise not found.
      And yes, I ran maui-check and dotnet new –update-check.

      • Dave Childs 0

        You have to debug vs. the Deployment project not the actual WinUI3 project.

        • Ranvir Singh 0

          Does this work?
          I am still getting “The project doesn’t know how to run the profile Android Emulator.”

          It certainly deploys the app to the emulator but does not attach/debug!
          MauiApp3.WinUI3 (Package) works for WinUI though.

    • Liam Morrow 0

      So I was able to fix this. I was initially trying to run the ProjectName.WinUi3 run configuration. This was giving me the same issue you present. I was able to run it successfully by right clicking the project that is ProjectName.WinUi3 (Package)and clicking debug. This got it over the line for me, however I was always able to debug android apps.

      • Matthias Lange 0

        Thanks this actually worked 🙂

        Also I noticed that the Android Apps got Deployed to the Emulator and my physical device but disconnected afterwards so the app didn’t start automatically and there was no hot reload. Makes it kinda hard to modify now that the XAML previewer is gone :/

        • Liam Morrow 0

          Yeah I was a bit sad to see the xaml previewer is no longer there, and hot reload does not work (couldn’t get it working for the winui project either). But it is still impressive everything runs, and am looking forward to testing future previews

      • Mike Yeager 0

        I had the same problem. Setting the (Package) project as the start-up project instead of the regular .WinUI3 project works.

    • David OrtinauMicrosoft employee 0

      Yes, we are seeing that occasionally. Have you tried from the command line? Run this from within the multi-targeted project folder.

      dotnet build -t:Run -f net6.0-android

      In future releases we expect to collapse the WinUI projects down into the single project and avoid the issues around that. There’s more project/build work to complete first.

      • Matthias Lange 0
        dotnet build -t:Run -f net6.0-android

        Does build the project and deploy it to my device but doesn’t start the debug. Thanks for the reply and still happy about the demo. Can’t wait for the official release of MAUI 🙂

        • Mike Yeager 0

          Same here. Only the (Package) project starts from within VS. The multi-target project deploys to the Android emulator, but has to be run manually from the emulator.

  • Alex Shirshov 0

    Great stuff. Vs for Mac does not support MAUI projects yet, correct? (I’m using 8.10 Preview 8.10 build 1759)

    • David OrtinauMicrosoft employee 0

      Correct, VS Mac is working on .NET 6 support and we are adding our multi-targeting single project experiences now. Look for a preview mid-year.

      Until then, your best experience on Mac is going to be running from the terminal and/or using the Comet VS Code extension.

      • Jonathan Matthew Beck 0

        I am more interested in if the App Store will allow for Apps written in MAUI to be a part of their ecosystem?

  • Dave Natalie 0

    I can’t get the template to run. I ran the maui-check tool, and after applying some fixes, everything “looked great”.

    When I try to run my app out of the box, I get a bunch of these errors.

    Error NU1101 Unable to find package Microsoft.Maui. No packages exist with this id in source(s): Microsoft Visual Studio Offline Packages, nuget.org

    Is there another source that I need to add in order to use the preview?

    • Antonio Pelleriti 0

      this worked for me!

      https://github.com/dotnet/maui/wiki/Getting-Started

      1. Restore the NuGets
        Create a nuget.config file to the root of your project and add the following feed(s) with these commands:
      dotnet new nugetconfig
      dotnet nuget add source -n maui-preview https://aka.ms/maui-preview/index.json
      • David OrtinauMicrosoft employee 0

        I’ve added these instructions to the blog as well. This step will NOT be necessary for much longer. 🙂

  • Michal Dobrodenka 0

    Is macOS supported as a MAUI platform natively or via catalyst? thx

    • David OrtinauMicrosoft employee 0

      Hi Michael, it is native with Mac Catalyst. .NET 6 also supports AppKit with the Cocoa SDK. Are there features or controls in Mac Catalyst you are missing?

      • Michal Dobrodenka 0

        Thanks, not really missing controls, but as I understand it, catalyst app must have catalyst build libraries – so every native library must be compiled for catalyst. So maybe missing libraries. LibVLC, SkiaSharp, HarfBuz, AppCenter, Sqlite, …

        • redthMicrosoft employee 0

          Yes, native libraries generally should be rebuilt to target MacCatalyst, according to Apple. We plan on supporting native libraries such as SkiaSharp and working with authors of plugins to help them make the changes required as well. It’s usually a very simple change to a native project to build for MacCatalyst, and many projects already do this. It’s worth mentioning that macOS (AppKit) would also require native libraries built specifically for the platform too.

          • Michal Dobrodenka 0

            BTW Catalyst net6 support is great news deserving blog post. As soon as it is ready with basic libraries I’m going to precompile my xamarin ios native app for mac.

  • Suthahar Jegatheesan 0

    Thanks, @David for sharing, Great work.

    • anonymous 0

      this comment has been deleted.

  • Charles Roddie 0

    Now that apps like the sample in this blog post are getting ported to MAUI, is it possible to check whether the startup time & overall performance goals of MAUI are being met?

    • David OrtinauMicrosoft employee 0

      Nearly! We need to get Android AOT in to see where we stand. We also have a fair amount of work to do yet on layouts. I’m hopeful we can have a performance check-in blog for Preview 5.

Feedback usabilla icon