Mobile Blazor Bindings: Develop in Xamarin using Blazor

Also available in portuguese

Imagine joining technologies like Xamarin, Blazor, and .NET Core to develop mobile applications using Razor Views instead of XAML.

Mobile Blazor Bindings: Develop in Xamarin using Blazor

That scary face on the image above is not put there by chance.

Mobile Blazor Bindings is still an experimental project that was announced by Eilon Lipton, Software Engineer on Microsoft. The focus of that project is the possibility to create Xamarin mobile applications using Razor Views and the use of the bindings of Blazor.

When James Montemagno, Xamarin’s Guru, shared that news, it quickly spread on Twitter users.

The Blazor also started as an experimental project, and you can find other articles about it in this Blog.

#Mobile Blazor Bindings

With the name Mobile Blazor Bindings, the project can perform a way for developers to create mobile applications using web concepts.

That was a huge problem using Xamarin Forms when you were a web developer.

The complexity in Xamarin still is the XAML, a markup language much similar to XML, to create user interfaces. XAML is most used in WPF and the almost extinct Silverlight.

That was one of the reasons I had let Xamarin behind, but now I will try it again.

All the web concepts are present in other platforms like Ionic, React Native, and Flutter, so Microsoft could not leave behind.

Check the following code sample that Eilon published in his Blog:

<StackLayout>
    <Label FontSize="30"
           Text="@("You pressed " + count + " times")" />
    <Button Text="+1"
            OnClick="@HandleClick" />
</StackLayout>
 
@code {
    int count;
 
    void HandleClick()
    {
        count++;
    }
}

StackLayout is one of the tags of XAML, but here in Blazor is a component/view.

#Samples

That experimental project already has three code samples available in his Github, but I couldn’t compile them, possible problems in my Visual Studio.

But if you create a new project after had downloaded the VS project template, you good to go.

Hello World:

That sample is the famous counter button when clicked, counts +1 showing the result on a Label.

Mobile Blazor Bindings: Develop in Xamarin using Blazor 1

Todo Sample:

Adds items on a Todo List.

Mobile Blazor Bindings: Develop in Xamarin using Blazor 2

Weather:

That sample is more complicated than the previous ones. It uses a Grid component, CSS style, and Dependency Injection.

Mobile Blazor Bindings: Develop in Xamarin using Blazor 3

#Considerations

Like every experimental project, we need to see what happens next. We need to know more about performance, support of other components, and interoperability.

After everything I have seen, it seems they had created a component/view for each XAML tag, something similar that I had done in my previous article Blazor more than a Deluxe WebForms.

If you take a look at the Razor Views, I will see that they are still similar to XAML. In other words, the structure still the same as Xamarin Forms.

It could be interesting to change that structure or, even better, let us develop using HTML like other stacks.

I also want to say thanks to Lucas Juliano to share with me that subject and bringing Xamarin again to the table.

I have enjoyed it very much 🙂

Thanks for reading it.

About the Author:
He works as a solution architect and developer, has more than 18 years of experience in software development on several platforms and more than 16 years only for the insurance market.