Announcing .NET MAUI Preview 14

David O

Preview 14 of .NET Multi-platform App UI (MAUI) is now available in Visual Studio 2022 17.2 Preview 2. This release includes a hefty volume of issue resolutions and completed features, and one new feature that will be a welcome addition for desktop developers: the MenuBar. While desktop app navigation and menus are often designed into the content window of many modern applications (think Teams left sidebar or Maps top tabs), there’s still a strong need for a traditional menu that resides at the top of the app window on Windows, and in the title bar on macOS.

Image menubar png

Menus may be expressed in XAML or in C# for any ContentPage currently hosted in Shell or a NavigationPage. Begin by adding a MenuBarItem to the page’s MenuBarItems collection, and add MenuFlyoutItem for direct children, or MenuFlyoutSubItem for containers of other MenuFlyoutItem.

<ContentPage.MenuBarItems>
    <MenuBarItem Text="File">
        <MenuFlyoutItem Text="Quit" Command="{Binding QuitCommand}"/>
    </MenuBarItem>
    <MenuBarItem Text="Locations">
        <MenuFlyoutSubItem Text="Change Location">
            <MenuFlyoutItem Text="Boston, MA"/>
            <MenuFlyoutItem Text="Redmond, WA"/>
            <MenuFlyoutItem Text="St. Louis, MO"/>
        </MenuFlyoutSubItem>
        <MenuFlyoutItem Text="Add a Location" Command="{Binding AddLocationCommand}"/>
    </MenuBarItem>
    <MenuBarItem Text="View">
        <MenuFlyoutItem Text="Refresh" Command="{Binding RefreshCommand}"/>
        <MenuFlyoutItem Text="Toggle Light/Dark Mode" Command="{Binding ToggleModeCommand}"/>
    </MenuBarItem>
</ContentPage.MenuBarItems>

Additional Preview 14 highlights include:

  • Device and Essentials reconciliation, plus interfaces for Essentials APIs
  • Shell WinUI (#4501)
  • Image caching (#4515)
  • Native -> Platform renaming (#4599)
  • Shapes (#4472)
  • Use string for StrokeShape (#3256)
  • WebView cookies (#4419)
  • MenuBar (#4839)
  • RTL Windows (#4936)

Find more details in our release notes.

While combing through your feedback in previous .NET MAUI releases we have noticed a theme of questions such as “how do I add a FilePicker”, “how do I get check the connectivity of my app”, and other such “essential” application tasks that aren’t specifically UI.

Beyond UI: Accessing Platform APIs

Within .NET MAUI is a set of APIs located in the Microsoft.Maui.Essentials namespace that unlock common features to bring that same efficiency to non-UI demands as to creating beautiful UI quickly. Originally a library in the Xamarin ecosystem, Essentials is now baked into .NET MAUI and is hosted in the very same dotnet/maui repository (in case you’re wondering where to log your valuable feedback). With it you can access such features as:

Accelerometer App Actions App Information
App Theme Barometer Battery
Clipboard Color Converters Compass
Connectivity Contacts Detect Shake
Display Info Device Info Email
File Picker File System Helpers Flashlight
Geocoding Geolocation Gyroscope
Haptic Feedback Launcher Magnetometer
MainThread Maps Media Picker
Open Browser Orientation Sensor Permissions
Phone Dialer Platform Extensions Preferences
Screenshot Secure Storage Share
SMS Text-to-Speech Unit Converters
Version Tracking Vibrate Web Authenticator

That’s a lot! Each API uses common pattern, so let’s focus on a few by way of introduction.

File Picker

Desktop platforms may often have a UI control named FilePicker or similar, but not all platforms do. Mobile platforms do not, but it’s still possible to perform the action from any UI element that takes an action such as a simple Button.

<Button Text="Select a File" Clicked="OnClicked" />

Now we can use the Maui.Essentials API to start the file picking process and handle the callback.

async void OnClicked(object sender, EventArgs args)
{
    var result = await PickAndShow(PickOptions.Default);
}

async Task<FileResult> PickAndShow(PickOptions options)
{
    try
    {
        var result = await FilePicker.PickAsync(options);
        if (result != null)
        {
            Text = $"File Name: {result.FileName}";
            if (result.FileName.EndsWith("jpg", StringComparison.OrdinalIgnoreCase) ||
                result.FileName.EndsWith("png", StringComparison.OrdinalIgnoreCase))
            {
                var stream = await result.OpenReadAsync();
                Image = ImageSource.FromStream(() => stream);
            }
        }

        return result;
    }
    catch (Exception ex)
    {
        // The user canceled or something went wrong
    }

    return null;
}

The PickOptions conveniently provides options for configuring your file selection criteria such as file types with FilePickerFileType:

  • FilePickerFileType.Images
  • FilePickerFileType.Jpeg
  • FilePickerFileType.Pdf
  • FilePickerFileType.Png
  • FilePickerFileType.Videos

Connectivity

This is an important feature for mobile, but equally useful for desktop in order to handle both offline and online scenarios. In fact, if you have ever attempted to publish an app to the Apple App Store, you may have encountered this common rejection for not detection connectivity status prior to attempting a network call.

var current = Connectivity.NetworkAccess;

if (current == NetworkAccess.Internet)
{
    // able to connect, do API call
}else{
    // unable to connect, alert user
}

Some services require a bit of configuration per platform. In this case iOS, macOS, and Windows don’t require anything, but Android needs a simple permission added to the “AndroidManifest.xml” which you can find in the Platforms/Android path of your .NET MAUI solution.

<uses-permission android:name="android.permission.ACCESS_NETWORK_STATE" />

Read the docs for additional information.

Get Started Today

.NET MAUI Preview 14 is bundled with Visual Studio 17.2 Preview 2 which is also available today with the latest productivity improvements for .NET MAUI development. If you are using Visual Studio 2022 17.1 Preview 2 or newer, you can upgrade to 17.2 Preview 2.

If you are upgrading from .NET MAUI preview 10 or earlier, or have been using maui-check we recommend starting from a clean slate by uninstalling all .NET 6 previews and Visual Studio 2022 previews.

Starting from scratch? Install this Visual Studio 2022 Preview (17.2 Preview 2) 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 14 release notes are on GitHub. For additional information about getting started with .NET MAUI, refer to our documentation, and the migration tip sheet for a list of changes to adopt when upgrading projects.

For a look at what is coming in future .NET 6 releases, visit our product roadmap, and for a status of feature completeness visit our status wiki.

Feedback Welcome

We’d love to hear from you! Please let us know about your experiences using .NET MAUI by completing a short survey.

45 comments

Leave a comment

  • Ed Schaefer

    With this being another preview release, and it currently being the end of Q1 2022, does this mean we can expect a delay to the MAUI roadmap? Or is this preview release just gonna be rolled up as RC1 in a week?

  • Michael Bond

    Looks like there might be a bug with iOS Hot Reload with this release? Getting the error “This request is forbidden for security reasons: Authentication Error. Xcode 7.3 or later is required to continue developing with your Apple ID.”. My Apple Developer account is active until early June, and I only started seeing this with Preview 14. Any ideas? (There is already an open issue with this info: MAUI Blazor hybrid apps crashing on iOS / iPadOS / macOS #3980)

  • Manuele Lucchi

    Two questions: Is there a page in the docs where we can track the differences in capabilities between maui and xamarin for a future migration? I would like to know if current maui/GA maui will be able to satisfy my current apps requirements.
    Also, will the RC be usable for non-preview visual studio? Having to install visual studio preview while maui doesn’t currently use anything that is not in the current version (afaik) is a bit annoying, more considering the maui GA is near

      • Andrew Beeman

        I think they’re holding off on MBB and pushing Blazor Webview for now. I agree though, there’s a few components that would be a lot easier to implement using HTML vs XAML.

          • Andrew Beeman

            Well, they implemented Z-Index for XAML in one of the other MAUI previews so that list of components got cut pretty heavily. The only things remaining that I feel are easier in HTML would mostly be related to responsive design. CSS has “calc” functionality. You can also set sizes based on the user’s chosen font size or percentage of screen width with little difficulty.

          • Eder Cardoso

            Before thinking about Blazor or whatever PLEASE, make sure that EVERYTHING works perfectly fine in XAML.
            It will be a disaster if .NET MAUI will end up in a UI framework that will try to support various coding styles but at the same time full of bugs like Xamarin.Forms currently is. Please make sure you guys do not get distracted.
            FIXING BUGS as QUICK as possible it’s way more IMPORTANT than getting distracted with other things like Blasor, comet or whatever.

      • Daniel RothMicrosoft employee

        Hi Manuele. Mobile Blazor Bindings (MBB) is an experimental project for trying out various ideas for building native client apps with Blazor and .NET. MBB has support for building both native UI and hybrid UI using Blazor. We are releasing with .NET MAUI support for the hybrid pattern, where you use Blazor components to render HTML & CSS to an embedded web view control. The only planned way to build native UI with .NET MAUI is using XAML. We’re still evaluating what role Blazor might play in building native UI, and there are other alternative experiments as well, like Comet.

    • David OrtinauMicrosoft employee

      Manuele, some comparison points are covered here https://github.com/dotnet/maui/wiki/Xamarin.Forms-vs-.NET-MAUI.

      All UI controls in Xamarin.Forms 5 are in .NET MAUI. A few additions are in .NET MAUI including Border, Shadow, VerticalStackLayout, HorizontalStackLayout, MenuBar, Windows, and perhaps a few more I’m missing off the top of my head. The Xamarin Maps library hasn’t been updated for .NET 6 at this time, so it’ll come after GA unless someone is able to free up or a contributor steps in.

      Layout and measuring is updated in .NET MAUI, so for migrations this may will require attention.

      RC will continue in the VS preview channel, yes. This allows our tooling team more time in the release schedule to complete feature work and polish the experience.

  • David Dancy

    One of the most powerful features of Xamarin.Forms is its ability to be embedded in a “native” app. I’ve used it in the past to add Forms pages to a native app on a per-platform basis.

    Does MAUI also support being used in this way?

    • David OrtinauMicrosoft employee

      Yes it does! The implemented is a little different because of the new way we setup the app context and manage that with multi-window. I need to validate this myself, but I believe you can now embed component views in addition to full pages which I think is gonna be very useful.

      You can use it in the current preview, however the next release gets some helper extensions. Check it out! https://github.com/dotnet/maui/pull/5218

    • Bikash Ghosh

      I tried to use the same in one of the app and it worked fine on iOS but had difficulties in Android when we have multiple Activity as Xamarin.Forms works based on Fragments and single Activity.

  • Ziaul Hasan Hamim

    The desktop MenuBar is awesome. But is there a way in Maui to create right-click context menu on desktop? I’m just getting started with Maui

    • David OrtinauMicrosoft employee

      Soon! We prioritized enabling Xamarin support first since those are needed for existing production apps, and that delayed the preview work for .NET MAUI. I know it’s been a long wait, and I feel your pain. I don’t have more info than that to share.

      • Andres G. Aragoneses

        I don’t understand, why does it feel that the new versions are going backwards with regards to macOS support? There was a previous preview that I could use in VS4Mac, compiling and running worked (even with just one or two bugs here and there). Now the VSMac preview doesn’t even let me compile 🙁

        • Richard Morris

          Oh really? Damn! I just bought a Mac Mini (arrived today after having to wait several weeks for it to be delivered) and was hoping to get started with .Net MAUI on a Mac project. Haven’t used MAUI before (but have had a brief look at Xamarin every now and then over the past however many years – usually spaced apart sufficiently for nothing to work anymore).

          Can we at least compile through Windows or (somehow) remotely from Windows to Mac? Wondering now whether I should develop in React Native for macOS instead (although would prefer C#)

          • Kristo Kiis

            If really needed one can install .net maui command line tools and create/build/run project from command line and set up Visual Studio Code to bind those commands and write code there. There are couple of articles “.net maui run mac” in google that explain this way more deeper.

  • John

    You are probably already aware, but hot code reload is still broken in preview 14 (vs2022 17.2 preview 2). The last version that worked was preview 12.
    I see reported bugs being verified against vs2022 17.2 preview 3 (which won’t be available to the public for a month), can you check if hot code reload is working in that version? If not can you escalate?

    • Семён Николаев

      Hi, folks. Thank you for amazing work!
      I confirm that iOS HotRestart has broken once I updated from preview 13 to preview 14. It’s MSB4018 – “HotRestart.Tasks.DetectSigningIdentity” error. Cannot load Xamarin.iOS.Windows.Client or it’s dependencies when deploying to local iOS device. Deploying to iOS simulator works with no issues.

  • ahmed fawzy234

    Quick question, I am very annoyed by this thick grey title bar at the top of the window, any idea how can I make it smaller and make it white?