On Tuesday, the ever-impressive Blazor team announced a new experimental project: Mobile Bindings that allow developers to write Blazor-style syntax that produces Xamarin.Forms UI controls instead of HTML elements, therefore producing native iOS and Android applications.  

When we at the Uno Platform noticed that they were using Xamarin.Forms, we immediately saw a fun means to validate and stress-test our Xamarin.Forms renderers for WebAssembly, in order to bring Blazor Native to WebAssembly. Also, a few of you asked about it on Twitter, so we gave it a shot.  

Introducing the Blazor-Xamarin.Forms-UWP-Uno-WebAssembly uber-stack! In less than 24hrs we were able to port the ToDo App to WebAssembly: 

1. Blazor to Xamarin.Forms 

This is the part that the Blazor team announced on Tuesday. Essentially taking a UI defined in Razor syntax (a mix of markup and C# code), processing it, and converting it into a tree of Xamarin.Forms controls. 

2. Xamarin.Forms to UWP 

Although the Blazor team’s announcement highlighted the ability to produce mobile apps for iOS and Android, Xamarin.Forms also supports Windows as a compilation target, using the UWP framework. The Blazor X.Forms Bindings work perfectly well with UWP. 

In this step, Xamarin.Forms converts its visual tree to a tree of UWP view elements. 

3. UWP (or WinUI) to Uno Platform 

Here’s where Uno comes in. The Uno Platform allows you to build apps for iOS, Android, and the web using C# and XAML. It’s 100% compatible with UWP/WinUI. Uno’s Xamarin.Forms renderers for WebAssembly allows Xamarin.Forms apps to run in the browser, without any changes. 

4. Uno to WebAssembly 

In the last step, Uno takes the visual tree and produces native HTML, running natively in the browser using Mono’s runtime for WebAssembly.  

See it in action 

To test whether this would work, we used the TodoApp sample released along with the Blazor Mobile Bindings announcement. Check out the fully-functioning web version here. All the code we used is up on GitHub – download it and run it in Visual Studio at your leisure! 

Our version is using the exact same Razor components as the original sample, and as you can see it looks very like the Android/iOS version published on ASP.NET Blogs for mobile blazor bindings. There you have it side by side – Blazor mobile bindings running in browser with help from Uno and WebAssembly

Public service announcement 

Let’s make one thing clear. We’re not advising you to run out and use this in production – after all if you like Blazor syntax and you’re targeting the web, the original Blazor has you covered.  

Our motivation was to put our Xamarin.Forms renderer for WebAssembly work to the test, and as far as we are concerned, Uno passed it with flying colors. It just works. We were able to stack all this technology, and reuse the code from the showcased ToDo app in less than a few hours after Mobile Blazor Bindings were announced at the ‘.NET Conf – Focus on Blazor’ virtual conference. We believe this showcases Uno’s versatility and extensibility too.  

In Closing  

We’re serious about this part: if you’re already a Xamarin.Forms developer, and running your existing app on the web without having to rewrite the UI is something that interests you, go ahead and try out Uno’s Xamarin.Forms renderers for WebAssembly – adding WebAssembly support to an existing project is as easy as ‘dotnet new wasmxfhead’. Or if you’d like to ask any questions and chat about this tech mash-up – contact us.