Hybrid Blazor apps in the Mobile Blazor Bindings July update

Eilon Lipton

I’m excited to announce we are releasing the Mobile Blazor Bindings July update! This release adds support for building Hybrid Blazor apps, which contain both native and web UI.

Hybrid apps are a composition of native and web UI in a single app. With Mobile Blazor Bindings this means you can write the native UI of your app using Blazor, and also create web UI in your app using Blazor. A major advantage of hybrid apps is that the HTML part of the app can reuse content, layout, and styles that are used in a regular web app, while enabling rich native UI to be composed alongside it. You can reuse code, designs, and knowledge, while still taking full advantage of each platform’s unique features. This feature supports Android, iOS, Windows (WPF), and macOS. And it’s all Blazor, C#, .NET, and Visual Studio. Woohoo!

You can mix and match native and web UI in whatever structure makes sense for your app. Here’s a simple example:

Blazor Hybrid app in iOS Simulator

These are the major new features in the 0.4 Preview 4 release:

  • New Hybrid Apps feature enables mixing Blazor native UI components with Blazor web UI components in the same page. This one is HUGE!
  • Hybrid Apps are hosted in a new BlazorWebView component that uses a browser component to contain the web part of the app. No remote or local web server; all your code runs in the app’s process.
  • New blazorhybrid project template that supports Android, iOS, Windows (WPF), and macOS for creating hybrid apps
  • Updated dependencies: Xamarin.Forms 4.7, Xamarin.Essentials 1.5, and other libraries.
  • .NET Core 3.1 SDK is required to use the new preview

How does it work?

In hybrid apps all the code (both for the native UI parts and the web UI parts) runs as .NET code on the device. There is no local or remote web server and no WebAssembly (WASM). The .NET code for the entire app runs in a single process. The native UI components run as the device’s standard UI components (button, label, etc.) and the web UI components are hosted in a browser view (such as WebKit, Chromium, and Edge WebView2). The components can share state using standard .NET patterns, such as event handlers, dependency injection, or anything else you are already using in your apps today.

Get started

To get started building a Blazor Hybrid app with Experimental Mobile Blazor Bindings preview 4, install the .NET Core 3.1 SDK and then run the following command:

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

And then create your first project by running this command:

dotnet new blazorhybrid -o MyHybridApp

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/.

Blazor Hybrid code sample

Here’s the code for an app similar to what was seen at the top of this post. It has native UI and web UI sharing the same app state, running together in the same app process (no web server or HTTP). The native UI uses the new <BlazorWebView> component to specify which web component to load and where to locate static web assets. Blazor does all the work.

This is the main native UI page /Main.razor:

@inject CounterState CounterState

<ContentView>
    <StackLayout>

        <StackLayout Margin="new Thickness(20)">
            <Label Text="@($"You pressed {CounterState.CurrentCount} times")" FontSize="30" />
            <Button Text="Increment from native" OnClick="@CounterState.IncrementCount" Padding="10" />
        </StackLayout>

        <BlazorWebView ContentRoot="WebUI/wwwroot" VerticalOptions="LayoutOptions.FillAndExpand">
            <FirstBlazorHybridApp.WebUI.App />
        </BlazorWebView>

    </StackLayout>
</ContentView>

@code {
    // initialization code
}

And this is the embedded HTML UI page /WebUI/App.razor:

@inject CounterState CounterState

<div style="text-align: center; background-color: lightblue;">
    <div>
        <span style="font-size: 30px; font-weight: bold;">
            You pressed @CounterState.CurrentCount times
        </span>
    </div>
    <div>
        <button style="margin: 20px;" @onclick="ClickMe">Increment from HTML</button>
    </div>
</div>

@code
{
    private void ClickMe()
    {
        CounterState.IncrementCount();
    }

    // initialization code
}

Upgrade an existing project

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

More information

Check out last month’s ASP.NET Community Standup where I talked a bit about these new features and did a demo of Blazor hybrid apps (starts at 30:35):

For more information please check out:

Thank you to contributors

This release had several major contributions from Jan-Willem Spuij. Jan-Willem had already built his own BlazorWebView component and kindly helped us get this functionality into the Mobile Blazor Bindings project with many great improvements. Thank you Jan-Willem!

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.

30 comments

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

  • q@neroq.fi 0

    The support of Blazor Web UI Components is awesome and more future oriented than XAML (my opinion), but great work! Remember that the SPEED IS THE KEY -> the application should start as fast as notepad in the windows 😉

    • Eilon LiptonMicrosoft employee 0

      Thank you for the feedback. We agree that speed is super important, especially startup time!

  • AlseinX 0

    So, why is it only linux that is excluded?

    • Eilon LiptonMicrosoft employee 0

      Hi, Mobile Blazor Bindings is based on Xamarin.Forms (and in the future, .NET MAUI). So the supported platforms depend on what Xamarin.Forms (and .NET MAUI) support. I believe there is currently some community-driven support for Linux apps. If you have that set up, then it could most likely be made to work with Hybrid Blazor apps as well. If that’s something you’re interested in pursuing, I’d be more than happy to help.

  • Carlos Sergio Carvalho 0

    that’s impressive , good job

  • James Hancock 0

    So, how would the blazor web ui get access to custom device code? Ie. let’s say I want to interact with screen capture natively instead of through javascript. Or video playback for DRM or nfc, or bluetooth. How would I call the native code in Xamarin?

    • Eilon LiptonMicrosoft employee 0

      Hi James, look like you asked on GitHub as well. I’ll copy my answer from https://github.com/xamarin/MobileBlazorBindings/issues/154#issuecomment-664488738 :

      YES! All the .NET code running in a Mobile Blazor Bindings app, including from the “web” part of a Hybrid Blazor app, can access all the exact same functions that any Xamarin.Forms app can access. As long as the functionality you want exists in Xamarin, you can call it exactly the same way in Mobile Blazor Bindings. (And even if it isn’t directly available, Xamarin has APIs to let you call it anyway into native iOS, Android, etc.).

  • SEZGIN OZTEMIR 0

    I’m waiting impatiently,This is fantastic thank u

  • Renan Jeffereis 0

    Eilon, in the latest pre-release of MBB (July update) I still don’t see support for RowDefinitions, or ColumnDefinitions in a Grid. Is that something that that is still to come with a future pre-release? Thank you.

  • Renan Jeffereis 0

    Eilon, what is the way to Navigate between razor pages in MBB? Can I inject navigationmanager? or do I have to use xamarin navigation which is very cumbersome. Do you have an example on how to navigate from one razor page to another? Thanks.

    • Eilon LiptonMicrosoft employee 0

      Hi Renan, thanks to a community contribution we now have some support for Shell-based navigation in Mobile Blazor Bindings in the upcoming Preview 5 release. Check out this issue for some more info: https://github.com/xamarin/MobileBlazorBindings/issues/86. And check out the sample app here: https://github.com/xamarin/MobileBlazorBindings/tree/master/samples/MobileBlazorBindingsXaminals/MobileBlazorBindingsXaminals . These are still early days, and there are many ways to do navigation, but it’s the first big step towards having this in Mobile Blazor Bindings. If you have any thoughts or questions about this, please let us know by filing an issue at https://github.com/xamarin/MobileBlazorBindings/issues. Thank you!

      • Renan Jeffereis 0

        The Shell Navigation looks great! Exactly what I was hoping for. Now here’s the problem: I am new to GitHub, so I downloaded the Master Tree for MBB via zip file. Then extracted and opened the Solution in VStudio 2019. I tried to build the entire solution and got more than 80 build errors. I tried fiddling with this and seeing if I could get past the errors etc but still too much to handle. Am I missing something? I would love to run the Xaminals example with Shell Navigation but I can’t seem to get very far. Perhaps I should wait for the next Pre-release, but I would like to participate if I could. Sorry to be a bit naive about this. I think this is a fantastic product.

  • Emmanuel Adebiyi 0

    This is so promising. Can’t wait to dive in. Great job guys

  • Daniel Schlieckmann | tredition 0

    Will it be possible to use Visual Studio Code in the future?

    • Eilon LiptonMicrosoft employee 0

      I think so, yes! I think it’s a goal for .NET MAUI to work well in VS Code, and ultimately the plan is for Mobile Blazor Bindings to be based on .NET MAUI.

  • Mark Radcliffe 0

    Have you thought about making the hybrid mode a possibility for non blazor based xamarin forms? I.e. have some blazor web view bits in an app and some Xaml bits?

      • Mark Radcliffe 0

        Great, thanks Eilon!

Feedback usabilla icon