Unified Blazor UI in the Mobile Blazor Bindings Preview 5

Eilon Lipton

I’m excited to announce that today we are releasing the Mobile Blazor Bindings Preview 5 update that adds support for sharing UI between web apps and mobile/desktop apps. You can now use a Razor Class Library (RCL) to build your UI and app logic once and use it in a Blazor Web app and in a Mobile Blazor Bindings app. This release also includes many other improvements, such as support for Shell with Blazor @page routing, SkiaSharp for rich graphics, gesture recognizers, and a whole lot more!

You can build one UI using Blazor Web and host it in a Blazor Server or Blazor Web Assembly app and also in a Mobile Blazor Bindings hybrid app to target Android, iOS, macOS, and Windows:

Image cat tracker options

These are the major new features in the 0.5 Preview 5 release:

  • Build your UI in a Razor Class Library (RCL) and share the same UI between web app and native app, including static assets such as CSS and images (community contribution from Jan-Willem Spuij)
  • Support for Shell with Routing, including the Razor @page directive (community contribution from Lachlan Gordon
  • Support for SkiaSharp graphics (community contribution from Lachlan Gordon
  • Gesture recognizers (tap, swipe, etc.)
  • Dual-screen device support
  • Added FontImageSource, DatePicker, TimePicker
  • Simplified Grid layout syntax
  • Update to Xamarin.Forms 4.8
  • Nightly package feed
  • OSS docs on GitHub
  • And several bug fixes and other small improvements
  • The full list of closed issues is here: https://github.com/xamarin/MobileBlazorBindings/milestone/5?closed=1

Get started

To get started building a Blazor Hybrid app with Experimental Mobile Blazor Bindings preview 5, install the .NET Core 3.1 SDK, have Visual Studio with the Mobile development with .NET (Xamarin.Forms) and ASP.NET and web development workloads installed, and then run the following command:

dotnet new -i Microsoft.MobileBlazorBindings.Templates::0.5.50-preview

And then create your first project by running this command:

dotnet new blazorhybrid -o MyHybridApp

Note: For additional information on required software, please check the Getting Started article.

Now open it in Visual Studio and run it on Android, iOS, Windows, or macOS. That’s it! You can find additional docs and tutorials on https://docs.microsoft.com/mobile-blazor-bindings/. We have a new tutorial for building a Razor Class Library and including it in a Blazor Server app as well as targeting Android, iOS, macOS, and Windows platforms.

Upgrade an existing project

To update an existing Mobile Blazor Bindings project please refer to the Migrate Mobile Blazor Bindings From Preview 4 to Preview 5 topic for full details.

Razor Class Library support

Razor Class Libraries are a feature of Razor that enable you to package part of your application’s UI and logic into a reusable library. This library can then be reused in multiple web applications. Now in Mobile Blazor Bindings you can use the same library in a Blazor Hybrid application as part of a mobile or desktop app. The web content is hosted in a Web View, just like any hybrid app content, and it can interact with any native parts of the application, and the reverse is true as well. Previous versions included limited support for RCLs, and this version adds improved support for them, particularly support for serving static assets such as CSS and images, as well as support for JSInterop for interop between JavaScript and .NET code.

Shell navigation

To build a great native experience for your app you can use the Shell control that comes from Xamarin.Forms. Starting with Preview 5 you can author native Blazor pages with the @page "/search/{query}" syntax and integrate them with the Shell’s navigation (such as the Back button) and navigate to them using the new NavigationManager.NavigateToAsync($"/search/{query}") API. Pages can use the navigation manager by injecting it from the DI container as in @inject ShellNavigationManager NavigationManager.

SkiaSharp graphics

SkiaSharp is a popular cross-platform graphics library based on Google’s Skia graphics library. In Preview 5 you can directly use SkiaSharp’s Canvas APIs to render rich high-performance graphics directly in your Mobile Blazor Bindings app.

Here’s what a simple canvas might look like:

<ContentView>
    <StackLayout Padding="20">
        <SKCanvasView OnPaintSurface="PaintSurface"/>
    </StackLayout>
</ContentView>

@code
{
    void PaintSurface(SKPaintSurfaceEventArgs e)
    {
        var canvas = e.Surface.Canvas;
        canvas.Clear(SKColors.Green);
        var paint = new SKPaint { Color = SKColors.SkyBlue, };
        canvas.DrawLine(0, 0, 200, 200, paint);
    }
}

And here’s what a more complex canvas might render as:

SkiaSharp rendering a graph in Mobile Blazor Bindings on iOS

More information

Thank you to contributors

This release had several major contributions from community contributors:

  • Jan-Willem Spuij added support for Razor Class Libraries with static assets. He stayed up late (his time) on calls with me several times and I appreciate his hard work!
  • Lachlan Gordon added support for Shell navigation and SkiaSharp. His patience in playing time-zone ping-pong (Australia vs. USA) is most appreciated and resulted in high quality contributions!

Thanks you to Jan-Willem, Lachlan, and everyone else who contributed to this release!

What’s next? Let us know what you want!

This project relies on your feedback to help shape the future of Blazor for native and hybrid scenarios. Please share your thoughts on this blog post or at the GitHub repo so we can keep the discussion going.

24 comments

Discussion is closed. Login to edit/delete existing comments.

  • Mike-E 0

    Whoa! Looks like we’re getting closer to allowing Blazor-based applications being hosted in a native application store?

    https://github.com/dotnet/aspnetcore/issues/11082

    Also, it would be super valuable to have a simple HelloWorld posted somewhere on GitHub that shows off the generated results, for those of us too lazy to go diving in and installing stuff and/or having to mess with system/IDE configuration. Thank you for any consideration!

  • Nemo 0

    Hi Eilon, what is the end goal of Blazor mobile bindings? I thought the intent was to enable automatic translation of web UI to a native Android/iOS UI and get native performance. But your article seems to suggest that the UI is still web, just hosted inside a web view control. So not clear how/where this is going to help. Can you elaborate a bit on this? Thanks.

    • Cong Zhang 0

      I have the same question!!! And asp.net team is fighting with maui team?

      • Eilon LiptonMicrosoft employee 0

        This is all part of the One .NET story and all the teams are working together or else Mobile Blazor Bindings couldn’t happen. Mobile Blazor Bindings takes the great work of Blazor from the ASP.NET team and adapts it to work on the Xamarin platform, which is where .NET MAUI is being built. One .NET.

    • Cong Zhang 0

      Xamarin is always work in progress, and web will have a bright future.

    • Eric Hamrick 0

      I thought the intent was to enable automatic translation of web UI to a native Android/iOS UI and get native performance.

      Is there something(like documentation) somewhere that gave you that impression? If there were a direct translation of html to native platform controls it actually wouldn’t be a hybrid and it would be a misnomer to call it so. The documentation at the following link seems to make it clear that the hybrid part is the mixing of html controls via embedded web browser with the native controls surrounding the embedded browser.

      https://docs.microsoft.com/en-us/mobile-blazor-bindings/

    • David Taylor 0

      Srihari , nobody has really answered you yet. Blazor Mobile Bindings does not “translate” HTML to native controls. What it does is let you directly target the native controls (via Xamarin Forms under the covers and ultimately, I assume, via MAUI in .NET 6).

      Blazor Mobile Bindings also now lets you use HTML (normal HTML based Blazor components), thus the word “Hybrid”. Some people will chose to use mainly native controls in their apps; some will use mainly HTML in their apps; and others will use some hybrid mix – whatever makes sense for their app.

      What is incredibly cool: Both “native control” regions of the app and “html” regions of the app can be bound to the same C# (.NET) objects. That is why people are excited because it really does let you write a hybrid app in an very natural way.

      • Eilon LiptonMicrosoft employee 0

        @David – this is exactly spot on, I don’t think I could have said it better!

        @Srihari – Please see David’s response above, it is perfectly accurate!

  • David Taylor 0

    Keep up the great work Eilon!

    • Eilon LiptonMicrosoft employee 0

      Thank you, I will do my best!

  • Cong Zhang 0

    Hi Eilon,

    Any plan to release an offical UI component library? this maybe more important to developer, and it will block the adopation of the cool blazor stuff if lack a modern UI component library.

    Tks,
    Cong

    • Eilon LiptonMicrosoft employee 0

      Hi Cong, can you give me an example of white type of component(s) you are looking for?

      My idea for Mobile Blazor Bindings is that you don’t necessarily need a whole new component library. Instead, there would be wrappers for existing Xamarin.Forms components so you could use them in Mobile Blazor Bindings, such as the one-off wrapper I wrote for the cool PancakeView control here: https://github.com/xamarin/MobileBlazorBindings/tree/master/samples/MobileBlazorBindingsWeather/Microsoft.MobileBlazorBindings.PancakeView . And in hybrid apps you should be able to use just about any Blazor Web component as-is because it’s hosting Blazor Web in the app (but there’s no web server, so if a component requires that, it would need some adaptation).

      • anonymous 0

        this comment has been deleted.

  • Carlos León 0

    I little bit late but I want to thanks you, the team and contriburtors for the work. I’m very exited with this technology because we are working in various Blazor projects in production and some of them are pefect to migrating to a mobile app.

    On the other hand I really think the problem I found to adopt this technology is hot reload. I think today it becomes mandatory for any web or mobile framework. Is there any plan to support this feature? or perhaps it’s already there and I didn’t know it.

  • Hitesh Davey 0

    Web & Mobile app development is becoming complex day by day. Too many configuration jargons to concentrate on. Why is it not possible to simplify app design by providing WYSWYG Winforms like drag and drop designer and hide all the nitty-gritty behind the scene and let the developer concentrate on solution?

  • rajesh kumar 0

    Hi Eilon
    Can we Consume Asp.net Core WebAPI in Mobile Blazor binding project ?

      • rajesh kumar 0

        Thank you Eilon. Mobile Blazor binding Hybrid App is game changing

  • Renan Jeffereis 0

    Eilon, this is Renan Jeffereis. After installing Preview 5 and trying a Build for Android for the Hybrid project, here is the error I get:

    Severity Code Description Project File Line Suppression State
    Error The $(TargetFrameworkVersion) for MyHybridApp.Android (v9.0) is less than the minimum required $(TargetFrameworkVersion) for Xamarin.Forms (10.0). You need to increase the $(TargetFrameworkVersion) for MyHybridApp.Android. MyHybridApp.Android

    Any idea what I can do? THanks!

  • David Cuccia 0

    This is very cool. For the Windows app template, I was able to run on .Net 5.0 with the following steps:

    • change the SDK from “Microsoft.NET.Sdk-WindowsDesktop” to “Microsoft.NET.Sdk”
    • change “netcoreapp3.1” to “net5.0-windows”
    • re-run Nuget package restore (not sure if necessary)
    • rebuild

    Are there any major downsides to developing on .Net 5 vs .Net Core 3.1, while we all patiently await “One .Net”?

  • rajesh kumar 0

    Hi Eilon
    Apk size is around 70 to 80 MB by default if we make apk of hello world page.which is quite big than other technologies apk.
    Is there any plan to reduce size of apk?

Feedback usabilla icon