Build desktop and mobile UIs with Blazor Hybrid apps

Microsoft’s commitment to a cross-platform world is perhaps one of the biggest changes to its development platform during the past few years. Its purchase of Xamarin kickstarted a sea change that’s brought us to today’s Visual Studio–powered development environment that brings in GitHub at one end and the cross-platform .NET 6 at the other, with applications that run at scale in cloud Kubernetes systems and on mobile devices.

Recently I looked at the development of the successor to Xamarin’s cross-platform Forms UI tools: .NET’s Multiplatform App UI or MAUI. Related to that is another new Microsoft UI technology designed to bring those at-scale web applications into your devices and onto your desktop. Building on top of the flexible Blazor web UI framework, Blazor Hybrid mixes the two technologies to give you a way of building UIs that spans more than desktop and mobile, adding support for the web with natively rendered controls on all platforms.

Modern web and modern development go hand in hand

There’s a lot to like about this approach to UIs. For one, it builds on what I consider to be the key lesson of the last decade on the web: We need to design our APIs first. That makes UI just another API client, using REST and JSON to communicate with microservices. We can then have many different UIs working against the same back end, all using the same calls and having the same impact on our service. It simplifies design and allows us to predictably scale application architectures. At the same time, a fixed set of APIs means that service owners can update and upgrade their code without affecting clients.

That approach led to the development of concepts like the Jamstack, using JavaScript, APIs, and Markup to deliver dynamic static websites, simplifying web application design and publishing. Blazor Hybrid takes those concepts and brings them to your code while skipping the browser and embedding a rendering surface alongside the rest of your application. You can work offline where necessary, a model that becomes even more interesting when working with locked-down environments such as the Windows 11 SE educational platform.

Blazor Hybrid in MAUI

MAUI support for Blazor Hybrid is an interesting feature of the new platform; it extends it beyond the traditional desktop and mobile clients so you can share user experience elements with web applications. From the web side of things, there’s the option for ASP.NET Core applications to share code with other projects, reducing developer workload and allowing you to develop once and then deliver across all your target environments. Although ASP.NET Core projects are unlikely to be part of the same project as MAUI code, they still can be part of the same solution, and code can be copied between projects as necessary.

Blazor Hybrid is in preview currently, but it’s worth exploring if you want to extend the reach of existing ASP.NET Core web applications. The obvious first step is to build a MAUI app to host your code, though you’re not limited to one .NET UI approach, especially if you’re focused on delivering desktop versions of existing enterprise web applications to Windows clients.

Building a Blazor Hybrid MAUI application is like building any other MAUI application. The Chromium-based WebView2 control hosts your code on Windows. Non-Windows platforms use their own web application hosts for Blazor content. In practice, this shouldn’t have any issues, as Android uses a Chromium browser, and although iOS’s hosted Safari may not have all the features of Chrome, it should support Blazor components.

If you’ve set up MAUI correctly in Visual Studio 2022 Preview, you should find the option to create a .NET MAUI Blazor App. Creating this solution sets up a new C# project with the required platform dependencies for all its target environments. The project sets up a basic Blazor UI that’s ready to run and, of course, ready to change.

Having prebuilt scaffolding helps a lot, as it shows how to host a BlazorWebView in your application’s XAML and how to use Razor content in hosted HTML. As most of your application UI logic will be in the ASP.NET Core Razor code hosted in the WebView along with any Blazor components, there’s not much more to do before you start writing your web UI.

The value here is not so much in MAUI as it is in running Blazor code client-side. MAUI provides a convenient cross-platform host for your Razor code, and while your C# skills will work well on both sides of the WebView divide, what’s most important is building a responsive Blazor page that can scale across phones and PCs.

Blazor Hybrid across Windows .NET

You’re not limited to MAUI for Blazor Hybrid. It’s also intended to be a supported workload for standard Windows .NET UI tools so you can use it inside familiar frameworks such as Windows Presentation Foundation or Windows Forms. As it’s in preview, you’ll need to run a Visual Studio 2022 preview release with the .NET desktop development tools installed.

Once you have your tools set up, create a standard WPF application using .NET 6 or later. (You can use the current preview release of .NET 7 if you feel like being on the cutting edge of .NET development.) Next, install the WebView WPF NuGet package manager to host your Blazor code. Once this is installed, you can start coding, using the Razor SDK to build the Blazor elements of your app UI.

This now lets you use Blazor components in your application, using the same techniques we use to add HTML and JavaScript to WebView UIs. Once you’ve got the framework of a web application in place, you can start using Blazor’s Razor syntax to add components and code inline in your HTML. If you’re familiar with the old pre-.NET ASP syntax, then Razor will be very familiar, using inline C# in your HTML along with Razor directives to add functionality to buttons and load display components that are controlled from your C# code.

Don’t forget to edit your view’s XAML to configure a BlazorWebView that uses your content’s local URL as a start page. You should then be ready to compile and run any Blazor code, using it to connect to back-end services or work with local content, embedding web apps in your .NET code.

It’s interesting to see Microsoft experimenting with its UI platforms this way. Having finally delivered a single cross-platform .NET, this approach—bringing together MAUI with ASP.NET Core—is now a lot easier to deliver. While it’s still early days, there’s definitely promise here and a model that could extend UIs even further than the four most popular desktop and mobile operating systems.