Small Bytes: .NET MAUI Desktop Apps (Premium)

.NET MAUI is the successor to Xamarin Forms and it obviously isn’t the first cross-platform framework to target both mobile and desktop. But it’s positioned similarly to competitors like Flutter or React Native. That is, no developer will ever use .NET MAUI to create a new app that only runs on Windows. Instead, MAUI is best used to tailor a new or existing mobile app so that it works better and feels more natural on Windows (and Mac).

This distinction is important: Microsoft hasn’t created a true desktop-class application framework since Windows Presentation Foundation (WPF), which arrived in late 2006 with Windows Vista. Instead, subsequent efforts like Metro, Universal Windows Platform (UWP), and the Windows App SDK (“Project Reunion”) are mobile app frameworks. (Yes, I know: Microsoft describes the latter as a desktop framework. That’s not accurate.) Anyone targeting the desktop today will do so via existing codebases or will create a new app using web or cross-platform frameworks of some kind.

Building even a relatively simple new productivity app, like a new version of my .NETpad app, with .NET MAUI is untenable, at least for now, because this framework doesn’t provide the rich controls needed for such apps. But from what I can tell, .NET MAUI is the simplest way to create a new app using WinUI 3, the modern Microsoft UI framework that’s based on the Fluent Design System. That alone makes it interesting: creating WinUI 3-based apps in the Windows App SDK, or adding WinUI 3 to existing codebases is, in my experience, quite difficult.

Like Xamarin Forms, .NET MAUI helps you target multiple platforms in the same project, but as a newer product, MAUI also streamlines that process somewhat while expanding the list of platforms to include, among other things, Windows and Mac (and Tizen). As such, it provides capabilities that only make sense on the desktop, like the ability to open multiple windows, access mouse pointer gestures, and display tooltips. And new controls, like Menu Bar and Context Menu.

As such, it’s not difficult to imagine taking an existing mobile app—perhaps one that runs on iPhone, iPad, and Android—and adapting it so that it feels more natural on the Windows (or Mac) desktop. Maybe your app will display a menu bar on Windows, for example, or use a floating window for its About box.

But we don’t have to just imagine this, we can do it: when you create a new .NET MAUI app in Visual Studio using the wizard, it creates a basic mobile app with the MAUI robot and a button that increments a count when clicked. And we can tailor that basic app with a few basic desktop controls and capabilities that only appear when the app is run on the desktop.

To do so, install Visual Studio 2022 Community with the .NET Multi-platform App UI development workload. Then, create a new project and select the .NET MAUI App project template. (You can find it most easily by using the filters at the top; for example, set the Project type to “MAUI”.) As you step through the wizard, choose “.NET 6.0 (Long-term support)” when prompted.

Unless you changed the configuration, this project will run on the local Windows PC by default. So click the “Start Debugging” button (which has a green arrow on it and reads “Windows Machine”). You will be prompted to enable Developer Mode in Windows if you haven’t already. Otherwise, the app will build and deploy to your PC, opening in a new app window.

OK, that’s not that exciting, but it gives us a mobile app on which to build.

First, a bit of housekeeping: as you can see, there’s a “Home” text display in the header of the sample app. This is actually the Content Page’s Title property, which is inherited from the parent Page’s Title property if you don’t specify otherwise. (That happens in AppShell.xaml if you want to take a look.) So the first step is to remove that text display. The simplest way is to set the Title property of the ContentPage to an empty string in MainPage.xaml:

Now, when you run the app, it appears without that header text.

OK, now we can add a menu. This will appear only when the app runs on Windows, the Mac, or an iPad with an attached keyboard. And all you need to do is create a <ContentPage.MenuBarItems> section inside of the ContentPage code in MainPage.xaml:

Now, when we run the app, a menu appears.

But when we run the app in Android, in this case using a Visual Studio Pixel 5 emulator, there’s no menu.

.NET MAUI also lets you create additional floating windows for an app on desktop platforms. To test this, I created a very simple (and non-styled) About box. Like the main app window, this is implemented as a ContentPage, but you can code it to appear in a window instead of taking over the display of the main app window.

To do so, I added a new item to the project, selected .NET MAUI > .NET MAUI ContentPage (XAML) as the type, and named it AboutPage.xaml.

Then, I made just a few small changes to the XAML file so that it sort of looks like a very basic About box.

Then, I needed to figure out a way to display the About box. I could have added it to the menu, but I just commented out the existing code in the Clicked() event handler for the “Click me” button and added the code necessary to display the About box as a window.

When I ran this on Windows, it worked as expected. (Assuming you didn’t have too many expectations about how it looks.)

And when I ran it in the Android emulator, it worked as expected too: the About box is now an About page that takes over the screen. And you can exit it by clicking the system “Back” button at the bottom.

This kind of thing, I think, is what .NET MAUI is all about: tailoring the mobile app you create with this system to the platform on which it runs. And I guess it’s successful as a first pass at making these apps seem a bit more natural on the desktop. I assume future versions of MAUI will extend that capability further.