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!

Eilon Lipton
Eilon Lipton

Follow Eilon   

43 comments

  • Guillermo Perez
    Guillermo Perez

    I would like to see more books on how to use Blazor instead of creating new projects that we can barely use what we already have… For example at this point I’m waiting until May for a book that will explain how to use Blazor

  • Avatar
    Juho Hanhimäki

    I feel advancing PWAs should be the main focus. I don’t want to spend time developing native mobile app UI in addition to the web app UI which will already scale to mobile devices. For sure there are more challenges in this area than Blazor team alone can solve, but I hope Microsoft will embrace PWA and really work to push the whole industry towards it.

    Regardless I guess these bindings can be helpful for those who want to focus resources on building a native mobile app.

    • Avatar
      David Ortinau

      Good feedback Juho, thanks.

      Even more than embracing PWA I think it’s important, and hopefully encouraging, to know that we first and foremost embrace supporting customer needs over and above a specific approach to technology. In that way I believe we will absolutely push the whole industry forward!

  • Avatar
    FillTable Admin

    First time trying this on iOS, got exception:

    System.PlatformNotSupportedException: ‘Loading…’

    on

    var host = Host.CreateDefaultBuilder()
                    .ConfigureServices((hostContext, services) =>
                    {
                        // Register app-specific services
                        //services.AddSingleton<AppState>();
                    })
                    .Build();
  • Avatar
    Paulo Pinto

    Guys please focus on Blazor for WebAssembly scenarios, that is all.

    Give us a solid story on WPF, UWP and Xamarin alongside native .NET cross platform instead of chasing rabbits!

    I see too much Silverlight and XNA bad memories in this UI craziness where the community is just being ignored.

    And no we don’t want any kind Electron support.

        • Avatar
          Erik Král

          The most important thing why flutter is so popular is because it’s custom UI renderer is much better than native Android UI and is fast, consistent and stable across multiple platform. I agree with Mike-EEE that we need a fast, consistent and stable cross-platform UI framework. I teach Xamarin at University courses and unfortunately, students mostly hate it because of instability and inconsistencies across mobile devices and emulators. It is not Xamarin´s fault, it is caused by Android and iOS native platforms. So even Google superseded Android native UI with Flutter and it instantly becomes a huge success. I think that the Blazor programming model with custom cross-platform UI renderer will be perfect.

    • Avatar
      Nicholas Petersen

      Give us a solid story on WPF, UWP and Xamarin alongside native .NET cross platform instead of chasing rabbits!

      Yes! Please, we need a native .NET cross plat UI framework! UWP everywhere? WPF? A child of the two? I don’t know. I will say though, that I love that Xamarin.Forms allows css styling of the native app, but otherwise, please, not too web-specific, we likes native.

      As for what’s above, I’m not entirely sure what I’m seeing. I love that this supports a native UI layer (Xam.Forms), but then it only supports mobile platforms? Bottom line: PLEASE, we need a powerful (fully capable desktop) native xplat desktop UI platform! And a million upvotes to “And NO we don’t want any kind Electron support.” Indeed!

      Unlike other comments here, I am totally fine and think the above Mobile Blazor Bindings (rather: Xamarin.Forms blazor app?) could be awesome, but NOT if it means our beloved MS devs make a terrible decision to not be putting the bulk of their beautiful golden eggs into a fully native xplat desktop UI platform! That should be mission critical #1 objective, now that we’re moving into .NET 5! Pleeeeaase! But if you can do that, then the above would still be very cool in my opinion.

      Thanks guys for all you do!

  • Avatar
    Duncan Jack

    Wow. Been using Blazor for about 6 months, just started using Xamarin.Forms over Christmas. Thought ‘Wouldn’t it be great if …” and now you’ve gone and done it!

    Well done and thank you. And good job on the resources too.

  • Gísli Sigurðsson
    Gísli Sigurðsson

    Great article, I have been really excited since I saw this announced a few months ago, have already set this up and started tinkering. Created a fart counting app because my coworker is always annoyed that I am so flatulent and now he can keep count 😀

    I saw both in the demo I watched yesterday and when I was tinkering with it that there are a lot of errors while building that you said that we can just ignore, so for the time being I just added these lines to the _import.razor for every blazor component that was throwing an error:

    @using Button = Microsoft.MobileBlazorBindings.Elements.Button

    I know it is a hacky solution and incredibly temporary, but at least you can see your errors now and not these false positives until this is fixed properly.

    The Blazor future is bright 🙂

      • Gísli Sigurðsson
        Gísli Sigurðsson

        That is the plan, it is not a very nice solution (therefore it is called hacky) but at least it makes the errors go away temporarily.

        I have total faith that you will fix this in the near future, I am really looking forward to tinkering with this while this evolves into something awesome 🙂

        Again, great work! Been a big fan of Blazor since I started messing around with it in preview 1 and I am trying to convince my company to start using it for our products in the near future when Blazor Webassembly will be out.

  • kerschl.alexander@kermi.de
    kerschl.alexander@kermi.de

    Please focus on WebAssembly and Xamarin Forms first
    There is a lot to do here instead of wasting resources. Nobody needs another web based app toolkit.
    Better think about a native cross platform gui…

  • Avatar
    sparkie

    This seems targeted at web centric developers who prefer C# to JS and are prepared to lean Xamarin Form’s UI model. I suspect that’s a small group.

    If you are in that group why not just use Xamarin Forms (mark-up centered) or Comet (modern code focused)? If you want your Blazor web app to run on a phone turn it into a PWA.

    Also what’s version 3 of this mark-up going to look like? Another variant of XAML?

  • Avatar
    Francesco Cristallo

    Amazing, I just started learning Xamarin but thought I would love for Blazor to be an APP framework too, and voilà! Thank you team, keep up the great work! Blazor is a superpower for C# and .Net developers

  • 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?

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

  • Avatar
    Enrique Ledesma

    Hi,
    When I run this app I get the error: the ADB binary found…is obsolete and has seriususperformance problem with the Android Emulator.
    Then the android emulator run but not this app inside.
    What is the problem?.

  • Avatar
    James Hancock

    This is a great start but what I’d really love to see, and would really democratize .NET, is an approach where HTML + CSS can be used everywhere. Where the HTML and CSS that you’re used to, would render with SKIA on the devices natively with input controls embedded similar to how Flutter works.

    The key is HTML+CSS. Because if you can let people use Blazor Razor Syntax for mobile apps, you win because they can use what they’re comfortable with which would be a huge win. And by using SKIA, the apps can look as beautiful as web without the enormous lift that typically is with Xamarin Forms or even Swift/Kotlin.

    HTML+CSS running native cross platform in Blazor is the key to Microsoft getting back UI developer mind share. Add in hosted Macs with remote simulators and automated build and deploy to stores for free so that devs on Windows never need to own a Mac, and you’d have a mass conversion pretty quickly.

Leave a comment