Announcing Experimental Mobile Blazor Bindings

Eilon Lipton

Eilon

Today I’m excited to announce a new experimental project to enable native mobile app development with Blazor: Experimental Mobile Blazor Bindings. These bindings enable developers to build native mobile apps using C# and .NET for iOS and Android using familiar web programming patterns. This means you can use the Blazor programming model and Razor syntax to define UI components and behaviors of an application. The UI components that are included are based on Xamarin.Forms native UI controls, which results in beautiful native mobile apps.

Here is a sample Counter component, which may look familiar to Blazor developers, that increments a value on each button press:

<StackLayout>
    <Label FontSize="30"
           Text="@("You pressed " + count + " times")" />
    <Button Text="+1"
            OnClick="@HandleClick" />
</StackLayout>

@code {
    int count;

    void HandleClick()
    {
        count++;
    }
}

Notice that the Blazor model is present with code sitting side by side the user interface markup that leverages Razor syntax with mobile specific components. This will feel very natural for any web developer that has ever used Razor syntax in the past. Now with the Experimental Mobile Blazor Bindings you can leverage your existing web skills and knowledge to build native iOS and Android apps powered by .NET.

Here is the code above running in the Android Emulator:

Clicking increment button in Android emulator

Get started with Mobile Blazor Bindings

To get started, all you need is the .NET Core 3.0 or 3.1 SDK, Visual Studio or Visual Studio for Mac, and the ASP.NET and web development and Mobile development with .NET (Xamarin.Forms) workloads installed.

Install the templates by running this command from a command/shell window:

dotnet new -i Microsoft.MobileBlazorBindings.Templates::0.1.173-beta

And then create your first project by running this command:

dotnet new mobileblazorbindings -o MyApp

Open the solution (SLN file) in Visual Studio and mark either the Android or iOS project as the StartUp Project, which should look like this:

VS solution with shared UI, Android, and iOS projects

Now run your first Mobile Blazor Bindings app in a local emulator or on an attached mobile device! Don’t have one set up yet for development? No worries, the Xamarin documentation has all the details for you here:

For documentation and walkthroughs, check out the Mobile Blazor Bindings documentation.

Why Mobile Blazor Bindings now?

Many developers delight in using XAML and Xamarin.Forms to craft beautiful native mobile apps. We have heard from a set of developers that come from a web programming background that having web specific patterns to build mobile applications would be ideal for them. The goal of these bindings is to see if developers would like to have the option of writing markup and doing data binding for native mobile applications using the Blazor-style programming model with Razor syntax and features. Would you love to see this option in the box for future versions of Visual Studio?

Learn more

To learn more about Experimental Mobile Blazor Bindings, please check out these resources:

Give feedback

Please send us your feedback via issues in our GitHub repo and by completing a short survey about your experience and expectations.

We hope you try out this new framework and let us know your thoughts!

63 comments

Comments are closed.

  • Avatar
    Valon Hoti

    tried to test on real device (not emulator) it doesn’t work on
    – Samsung Galaxy A8 (Android 9) when i tried to pack it and deploy on phone

    in emulator with Android 9 it work well *but in real hardware how to pack it …..

    update : now packed with Ad-Hoc certificate and work

    update 2 :

    it work on Android 9 – Samsung Galaxy

    but when start app – remain blank / white until i click button back then app start work and working form HELLO WORLD appear

  • Avatar
    smart programmer

    We neeeeeeeeeeeeeeeeed this more than anyone thinks we do. this will make developing mobile apps way easier than it currently using XAML and MVVM. but i do believe that this post should be also posted on the xamarin blog because here you will mostly find web developers

  • Avatar
    José María Aguilar

    Hi! First, congrats for this awesome experimental project. It looks great and I think it could make easier for we web developers to join the native development world.

    Said that, I’m following the walkthrough to create an empty project, but I’m getting these warnings and errors while compiling the android project:

    warning XA0107: Ignoring as it is a Reference Assembly
    warning XA0107: Ignoring as it is a Reference Assembly
    warning XA0107: Ignoring as it is a Reference Assembly
    warning XA0107: Ignoring as it is a Reference Assembly
    error XA2002: Can not resolve reference: System.Diagnostics.EventLog, referenced by Microsoft.Extensions.Logging.EventLog. Please add a NuGet package or assembly reference for System.Diagnostics.EventLog, or remove the reference to Microsoft.Extensions.Logging.EventLog.
    error XA2002: Can not resolve reference: Microsoft.Bcl.AsyncInterfaces, referenced by System.Text.Json. Please add a NuGet package or assembly reference for Microsoft.Bcl.AsyncInterfaces, or remove the reference to System.Text.Json.

    I’ve tried to install the suggested packages but it doesn’t seem to fix anything.

    Is this a known issue? Any clues about what could be happening?

    Thanks and keep going on!

  • Avatar
    Indudhar Gowda

    Just Important Inputs to Microsoft.

    Blazor need something like INotification property changed and Dependency Property.
    Acquiring web assembly or building something similar to web assembly and keeping in Microsoft Control would be better.
    Because java-script people are spreading remorse on web assembly stating web assembly is used build malicious app.
    Build a new team or take Microsoft Blend Team to start supporting HTML and CSS in Blend.
    HTML and CSS should be done in GUI itself like Microsoft Blend in wpf.

    Last but not @ all the least – Blazor team should focus on reducing the size and speed. Only way to win the Market and to overcome JavaScript is Speed and Size.

  • Avatar
    Lee Smith

    Disagree with nearly all of the comments below.
    Blazor is a revolution, documentation is fine to work from. And would love to see this addition in production.
    Having a common language and UI framework to build, web, desktop or native applications is a great direction for the future IMO.
    So yes please . .

  • Avatar
    Johan Visser

    We need some UI Designer to make it actual useful. (With we, I mean ME at the moment)

    There are a lot of developers like me, that have only worked with WinForms and/or WPF.
    I think that Blazor is a really cool way to develop web applications while reusing your existing C# skills.

    I am struggling with creating any kind of user interface. (At least something that you call remotely useful)

    It could be in Visual Studio or Blend or something new.

    For now I have to put Blazor on hold.

  • Avatar
    Gauthier M.

    I don’t understand the goal of this… It doesn’t allow us to use our web app project on mobile…
    We still have to create one app project for web and one for mobile….
    It’s almost the same things as started a new Xamarin Form project….

    It’s totaly useless…
    Please work on something more useful like a true sharing code of blazor web/mobile/desktop or the portability of .Net Core WPF (Windows/Mac/Linux).

    • Avatar
      Carlos León

      I totally agree with you. I think the objetive should be one code base for all platforms like Flutter. I love Blazor and I think it has more sense to invest in PWA and hybrid stack like Ionic using capacitor or cordova.

      I think Xamarin.Forms is almost dead. Microsoft does not develop any of its apps with this technology. They are using React Native for lots of its apps. Why I must choose Xamarin if Microsoft don’t?

  • Avatar
    Michael Romyn

    YES, YES and YES. Please make it available for Web as well. This would be a more compatible and usable version of Silverlight.
    Which flavor of XAML will be used. Xamarin or WPF?

  • Jefferson S. Motta
    Jefferson S. Motta

    I’m a developer fullstack since VB6.0 with MS,
    Designing for Asp.Net WebForms with c# and WinForms and WPF already using Net Core 3.1,
    I experimenting Blazor to create PWA apps and I very comfortable with it, I hope that this new way to build be greate tool and Microsoft don’t abandon this technology as they usually does.