TLDR: The Experimental Mobile Blazor Bindings can result in much less XAML and C#, 64% less in my experiment, but the tech isn’t quite ready for prime time.

Update – 2020-02-24

I migrated my sample to the Mobile Blazor Bindings February Preview 2 Update. It only took a few minutes and fixed the issues I had previously documented and reported!

What are Mobile Blazor Bindings?

First off, Blazor is a new technology within ASP.NET Core which allows rich web applications to be written with C# instead of javascript (for the mostpart). My intent here isn’t to explain Blazor, if you wish to learn more, check out the resources listed at the end of this article.

Blazor uses the ASP.NET Razor template engine to deliver html content to browser clients. Html is markup, Xaml is markup…why not use the Razor engine to build Xamarin?

That’s the question Eilon Lipton answered with Mobile Blazor Bindings. In essence, this approach uses Razor syntax with Xamarin Forms Xaml to create mobile apps.

You may find yourself wondering why you should care…as I did when this was announced. I’m not a massive fan of Razor pages and lately I’m finding myself frustrated with the huge amount of Xaml code required to do some relatively simple things in Xamarin Forms. The Mobile Blazor Bindings approach doesn’t really solve the Razor pages issue, but it certainly helps simplify Xaml and at the same time, it also helps simplify your C# by using a binding which doesn’t rely on INotifyPropertyChanged.

Getting Started with Mobile Blazor Bindings

1. Install Visual Studio 2019 or Visual Studio for Mac and install Xamarin
2. Download and install .NET Core 3.0 or 3.1 SDK
3. Install the Mobile Blazor Bindings project templates: dotnet new -i Microsoft.MobileBlazorBindings.Templates::0.1.173-beta
4. Create a new project: dotnet new mobileblazorbindings -o FirstMobileBlazorBindingsApp
5. This will create a FirstMobileBlazorBindingsApp folder containing a solution and 3 projects:
   1. FirstMobileBlazorBindingsApp – .NET Standard 2.0 library containing Razor templates and cross platform code
   2. FirstMobileBlazorBindingsApp.Android – Xamarin.Android head project.
   3. FirstMobileBlazorBindingsApp.iOS – Xamarin.iOS head project.
6. Open the solution in Visual Studio
7. Run the Android project

Note: I had no luck with iOS, I would stick to Android for now.

Check out the official documentation for Mobile Blazor Bindings and the Github repo for Mobile Blazor Bindings. Be sure to log issues with a sample solution if you run across bugs.

Porting a Xamarin Forms MVVM screen

Let’s look at an example. Since everyone’s likely here for Xamarin, we’ll start with an options selection screen I built using Xamarin Forms and MVVM.

Xamarin Forms MVVM (188 lines)

Blazor Mobile Bindings (68 lines)

120 fewer lines for the Blazor Mobile Bindings approach. Wow. I am sold.

Check out my two solutions on Github.

Conclusion

I was not excited about this approach until I actually saw the results. There is huge upside and promise, I’m looking forward to seeing where this goes. No having to worry about INotifyPropertyChanged, no commanding, far more flexibility in Xaml with the tried and true Razor engine.

On the other side, I ran into 3 relatively major issues.

1. OnClick methods would only fire once
2. An IsVisible flag set by a variable wasn’t working at all
3. iOS wouldn’t work (I didn’t look very close at this).

Note: these issues are all fixed in the Preview 2 update!

There is also no hot reload support at this point, which you miss very fast after getting used to it.

Great job by Eilon Lipton and everyone else from the Xamarin and Blazor teams who brought this experiment to life!