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:
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
@pagedirective (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:
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.
Hi Eilon,
Thank Youfor this very interesting work. I have question. I develop blazor server app for my company. I'm using a few blazor component libraries. (MudBlazor, BlazorCharts.Js etc.). Now it is possible to host html content (razor components) on Adnroid or IOS using WebView component. Do You plan to open possibiity to use this frameworks in same way? They usually need to be configured with js scripts in _Hosts file. Or maybe...
Hi Eilon Lipton
Thank you very much for this wonderful creation . All in one solution for all platform. Our organization already started a project of Mobile blazor binding.
We are not able to find solution to Scan QR code with Mobile Blazor Binding in Android.
In coming days is there any plan that its support QR code scanning in Mobile Blazor Binding .
Right now there is a Blazor wasm /server solution available...
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?
This is very cool. For the Windows app template, I was able to run on .Net 5.0 with the following steps:
Are there any major downsides to developing on .Net 5 vs .Net Core 3.1, while we all patiently await "One .Net"?
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!
Hi Eilon
Can we Consume Asp.net Core WebAPI in Mobile Blazor binding project ?
Yes, you can run any code you want. Calling a Web API is the same as from any other Blazor or .NET app. You can learn more here: https://docs.microsoft.com/aspnet/core/blazor/call-web-api
Thank you Eilon. Mobile Blazor binding Hybrid App is game changing
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?
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...
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
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...
this comment has been deleted.
Keep up the great work Eilon!
Thank you, I will do my best!