Announcing Experimental Mobile Blazor Bindings
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:
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:
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:
- GitHub repo: https://github.com/xamarin/MobileBlazorBindings
- Sample apps: https://github.com/xamarin/MobileBlazorBindings/tree/master/samples
- Docs: https://docs.microsoft.com/mobile-blazor-bindings/
- Feedback survey: https://www.surveymonkey.com/r/X82XVTZ
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!
Light
Dark
63 comments
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
Hi Valon, if you run into any issues please let us know by filing a bug at https://github.com/xamarin/MobileBlazorBindings/issues. Thanks!
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
Looks great. Is there any way to do the unit test about the UI logics?
Hi Kevin, some folks started a discussion on the GitHub repo on this topic: https://github.com/xamarin/MobileBlazorBindings/issues/42
Come check it out and share any thoughts you have on this.
Thanks,
Eilon
Thanks. That is a great discussion. But from my personal understanding, it doesn’t bring too many benefits. I prefer the XAML + Xamarin.Forms (plus ViewModels) way with the separation of UI declarations and UI logic. One benefit I can think for Blazor is it will combine some UI logics which normally sits in Behaviours, Converters, into the @code.
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 byMicrosoft.Extensions.Logging.EventLog. Please add a NuGet package or assembly reference forSystem.Diagnostics.EventLog, or remove the reference toMicrosoft.Extensions.Logging.EventLog.error XA2002: Can not resolve reference:
Microsoft.Bcl.AsyncInterfaces, referenced bySystem.Text.Json. Please add a NuGet package or assembly reference forMicrosoft.Bcl.AsyncInterfaces, or remove the reference toSystem.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!
Hi Jose, sorry you ran into this issue. Could you please file a bug on https://github.com/xamarin/MobileBlazorBindings/issues so that we can investigate? Or is it the same as https://github.com/xamarin/MobileBlazorBindings/issues/70 ? Any additional information you have could be helpful. Thank you!
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.
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 . .
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.
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).
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?
The goal is to share your bussines models and view models. But I still think, that we still need cross platform UI platform.
Same here, I love possibilities given by Blazor (I have two prod apps powered by Blazor), but not a mixup with Xamarin wich is almost dead as you said 👌
Microsoft is using Electron for most of its new desktop apps (Skype, Teams) and it’s terrible for users. If you care about your users, don’t copy them!
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?
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.