Cross-platform UIs ‘go live’ with .NET MAUI

.NET’s Multiplatform App UI is almost here. What do you need to know to start building cross-platform apps for mobile and desktop?

Cross-platform UIs ‘go live’ with .NET MAUI

Much of the current .NET vision builds on the work of the Mono and Xamarin teams, delivering a cross-platform version of the .NET runtime. Updating the core of .NET was the first part of the project: devising a way for your code to run on Windows, macOS, Linux, Android, iOS, and more. Now it’s time for the user experience side to get a similar update. Win UI 3 and the Windows App SDK provide UI tools for Windows apps, and MAUI, the Multiplatform App UI, gives you the tools to build cross-platform apps for desktop and mobile.

Originally intended to ship as part of the .NET 6 wave of releases, MAUI has proved to be a more complex project than originally scoped. However, it’s close to ready, with a release candidate now available, and general availability expected around the time of Build 2022. The arrival of a release candidate is an important milestone, as this is the point in its software development life cycle that Microsoft offers what it calls a “go live license.”

‘Go live’ time for MAUI

Up to this point, preview releases are intended for personal use to learn the new tools and techniques. You can start porting code to new frameworks as soon as previews arrive, but they won’t be complete and will change from release to release. That ends with release candidates; the code is frozen, and any further changes will be bug fixes. The “go live” feature helps here too, as it includes support. Microsoft can see interactions between its code and yours, helping produce fixes that are tested against real-world scenarios.

If you’ve used Xamarin Forms, MAUI will be very familiar. It’s a way of hosting OS-specific controls and UI elements in a single codebase. Instead of different projects and solutions for desktop, mobile, and each OS, all your code is in a single project, ensuring that there’s no difference between the app running on each target—apart from ensuring that each build has a native look and feel with native controls. Where Xamarin Forms was mobile only, MAUI adds support for desktop environments. There’s even the option of hosting Blazor Razor code in MAUI, with embedded web view controls to run Razor components natively on your target device.

Bringing the platforms together

You can best think of MAUI as a way to unify the various platform-specific .NET APIs so that C# and XAML code can be written once and run everywhere, with the option of providing platform-specific code to avoid a lowest common denominator approach. MAUI sits above both native code and the common base-class libraries. Your code calls MAUI APIs, which then call the requisite platform APIs. If you prefer to have native-specific features, you can call platform APIs directly if they don’t have MAUI coverage.

This approach gives you a base set of common controls, much like those used by Xamarin Forms, with a layout engine that allows UI code to scale between different device form factors and screen sizes. It’s important to be aware of the capabilities of your target devices and, at the same time, come up with UI designs that can support the shift between landscape PC and Mac experiences and portrait mobile screens.

Much of MAUI is the familiar XAML design experience, with a page description and code-behind to manage interactions with the rest of your application, as well as a canvas for displaying and interacting with custom graphic elements. It also includes a set of APIs that provide access to device features. These give you a common way to work with GPS and other sensors, as well as device battery and network states.

Building MAUI projects

MAUI projects are organized in a similar manner to the approach that Xamarin Forms introduced. A single project holds all your code, with any platform-specific code organized by targets. You work on common code in the main body of your project, dropping into specialized code where needed. For example, you could have a set of platform code for GPS support, with separate versions of code for Windows and Android that are used at build time, compiled based on platform targets. Your Windows app would use the Windows GPS APIs, and the Android version would call the Android versions. Both platform versions would be the same method, wrapping APIs with a common call and return structure.

MAUI has direct support from Microsoft for Android 5.0 and higher, iOS 10 and higher, Windows 10 1809 and higher, and macOS 10.13. MacOS code will be much the same as iOS (and iPadOS) as it uses the recently released macOS Catalyst tools that let you bring iPad apps to the desktop, adding desktop features automatically and adding support for many of Apple’s core APIs and services. Additional support from Samsung allows MAUI to run on Tizen, and the .NET community is developing Linux support.

It’s worth using MAUI with the latest Visual Studio preview release that adds support for both .NET and XAML hot reload. This is an important debugging and development tool so you can make changes to both UI and application code while an application is running in a test environment and reload the changes without having to rebuild and restart. This technique can save a lot of time, and it’s good to see it made it into .NET 6 at the last minute (after a lot of developer complaints about it being pulled from previews late in the development cycle).

Start coding with MAUI now

Building your first app is easy enough. Start by configuring Visual Studio to support mobile development with .NET. This adds support for both Xamarin and MAUI, so you can bring existing Xamarin apps to MAUI or continue to support older versions. Visual Studio now offers the option to create .NET MAUI apps using standard .NET techniques or the Blazor framework.

Once you’ve created a project, MAUI will automatically set up dependencies for target OSes, installing and configuring the Android emulator and SDK. Apple licensing means you’ll still need a Mac running on the same network as your development PC to build iOS and macOS applications, with the appropriate .NET SDKs installed along with an up-to-date version of Xcode.

Microsoft’s move to a common cross-platform .NET has made it a lot easier to deliver tools such as MAUI. Although it pays to have worked with Xamarin in the past, if you’re building mobile apps, the learning curve remains small, especially if you use it as the framework for building Windows apps with WinUI.

It makes sense to start thinking of MAUI as the foundation for all your future .NET GUI development, no matter what you’re targeting. Yes, you may only be building an Android .NET app today, but MAUI makes it simple to take that code and use it on all other supported platforms with very little change. That’s a big win for very little work.

Copyright © 2022 IDG Communications, Inc.