Blazor and Native Mobile Apps

experimental mobile Blazor bindings

On .NET Conf 2020, Microsoft announced an experimental project called Mobile Blazor Bindings that lets developers create native mobile apps with Blazor and Xamarin.

What is MobileBlazorBinding, and what it isn’t?

Blazor is a framework for building interactive client-side web UI with .NET and, Xamarin is an app platform for building Android and iOS apps with .NET and C#.

You might think, with Razor, HTML and, C# you will be able to build native mobile applications, but the truth is: no you can’t.

Mobile Blazor bindings are another way to create Xamarin Forms UI with Razor instead of XAML syntax. They created this experimental project for developers with web-development background, and people who are not familiar with XAML.

Does this mean you can have shared-UI with Blazor and Xamarin? No!

When you are creating an application with BlazorMobileBindings you are actually using native UI components in your UI that are not HTML!

Here is a simple example of Blazor Mobile Bindings:

And this example is for Blazor Web Assembly:

If you just compare these two source codes, they are somehow identical. The only difference is one is using HTML and the other is using Xamarin UI components.

How to use device sensors in MobileBlazorBindings?

Speaking of sensors, developers might say using sensors are different in different platforms. For e.g., the way you access accelerometer or geolocation in Android is totally different in iOS.

Xamarin is a mature platform that offers lots of libraries and tools to build real native cross-platform applications. One of these libraries is called Xamarin.Essentials. It provides developers with cross-platform APIs for their mobile applications. You can work with the accelerometer, battery status, etc with the API that is independent of the platform(Android, iOS, Windows).

Xamarin.Essentials can be installed via NuGet. It’s easy to use it in your mobile apps, just as simple as following:

Project structure

When you create a new MobileBlazorBindings project, the solution structure is like below:

Most of the time you don’t need to go and change anything in Android or iOS; these are native parts of your possible application. The whole magic happens in the shared-UI Blazor-typed project.

It’s the same Blazor project you already know; the only difference is Xamarin Forms. Inside the csproj file, it has included Xamarin.Forms and Microsoft.MobileBlazorBindings packages.

Part of the project csproj file

Components

At the moment, these built-in components are available with MobileBlazorBindings:

Page components: ContentPage, MasterDetailPage, Page, TabbedPage, TemplatedPage

Layout components: ContentView, Frame, Grid, ScrollView, StackLayout,

View components: Button, ActivityIndicator, Image, Entry, Label, Stepper, Switch

Specialized components: Application, BaseMenuItem, FormattedString, GestureElement, MenuItem, Shell (including ShellContent, ShellGroupItem, ShellItem, FlyoutItem, TabBar, ShellSection, Tab), Span

There will be more components, here is a chart of controls:

In addition to components, you can create your own views and components like what you did in Blazor:

This is a razor file called Battery.razor:

You can easily, use the component in your view like this:

<ContentPage>
    <StackLayout Margin="new Thickness(20)">
        <Battery />
    </StackLayout>
</ContentPage>

Dependency Injection

Blazor is part of ASP.Net Core, and it provides a built-in dependency injection. Just like any other ASP.Net Core project, you can define your services in the ConfigureServices method. This method is located in App.cs file.

public App()
{
 var host = Host.CreateDefaultBuilder()
  .ConfigureServices((hostContext, services) =>
  {
   // Register app-specific services
   //services.AddSingleton<AppState>();
  })
  .Build();
host.AddComponent<HelloWorld>(parent: this);
}

Debugging

You can run your app inside an Android device/emulator or iOS simulator and debug it inside Visual Studio or Visual Studio for Mac.

Running and Debugging in action

Architecture

Mobile Blazor Bindings Library Architecture by Eilon Lipton

MobileBlazorBindings it’s just a binding between Xamarin.Forms API and Blazor. You create your shared UI in Blazor with Xamarin Forms components, and the result is a cross-platform native application.

Conclusion

Microsoft Mobile Blazor Bindings has just announced, and it’s still an experimental project. It’s not clear if it will be officially supported and released, but it has great potential to create UI mobile applications with Blazor and Xamarin Forms in just minutes. I could create and run some projects easily in just 2 minutes (without any experience with Xamarin Forms)!

The bottom line is that features like hot reloading, more native components, WinUI, UWP, Inline-text are not supported at the moment. However, people at Microsoft (and maybe community) are working to deliver these features soon.

Prerequisites, Docs, Links, etc

You can access guides and documents on docs.microsoft.com. If you would love to contribute to the project (such as bug reporting, ideas, code contribution, etc.) check the repo project on Xamarin Github.

To be able to start hacking with Mobile Blazor Bindings you require the following software:

1. .NET Core 3.0 or 3.1 SDK
2. Visual Studio or Visual Studio for Mac, with the following workloads installed:

• Mobile development with .NET (Xamarin.Forms)
• ASP.NET and web development