Blazor is the new hot technology on the .NET scene! Already experimenting with Blazor and interested in building mobile apps using the known Razor syntax alongside Xamarin? We have some very good news for you—our Mobile Blazor Bindings for Xamarin can make this much easier.
With the Telerik Mobile Blazor Bindings for Xamarin you can easily create native mobile apps for Android and iOS using C# and .NET. The UI components and behaviors, which are based on Xamarin.Forms, are defined using the Razor syntax. With Telerik Mobile Blazor Bindings you can take full advantage of the Telerik UI for Xamarin suite in a Mobile Blazor Bindings project.
The list below shows the currently available controls added to the Telerik Mobile Blazor Bindings for Xamarin suite:
In this blog post I will get you through the steps needed to create your first Mobile Blazor app and how to add and use the Telerik UI for Xamarin Mobile Blazor Bindings controls. Also we will create a sample demo using the controls listed above.
Once our project is set up, we can add the Telerik UI for Xamarin Blazor suite using the Telerik NuGet server or manually adding the needed assemblies
Make sure to add all required Telerik UI for Xamarin Mobile Blazor assemblies in the project’s _Imports.razor file.
For the Demo we will use the available Telerik UI for Xamarin Mobile Blazor controls. So the _Imports.razor file will have the following assemblies included:
For navigation we will use the SideDrawer control. The control is designed to enable users to visualize a hidden view in their applications. That view can host navigation UI, common settings or any other UI of your choice. It can be visualized using a flick gesture.
Add a new Razor component (lets call it SideDrawerComponent.razor) and create the control inside.The SideDrawer control has two main parts: MainContent and DrawerContent.
Inside the Main Content we will add Expander, Button, CheckBox and BusyIndicator controls. The ListView control will be placed inside the Drawer Content. Border will be used to underline the Title—Telerik UI for Xamarin Mobile Blazor Bindings!
Here is the code:
Then use the SideDrawerComponent as MainPage for the application by modifying the App.cs:
Here is the result:
We have more great news for you. We are working on expanding the list of the available controls, so more controls are coming 😉!
We would love to hear what you think about the Telerik UI for Xamarin Mobile Blazor Bindings. If the idea behind the experimental bindings grabs your interest, do not hesitate to share this information with us on our Telerik UI for Xamarin Feedback portal.
If you haven't yet tinkered with our UI suite, sign up for your Telerik UI for Xamarin free trial today.
Happy coding with Telerik UI for Xamarin Mobile Blazor Bindings 😉!
Dobrinka Yordanova is a Technical Support Engineer, part of the Progress Telerik UI for Xamarin & UWP team in Sofia, Bulgaria. She holds a master's degree in Computer Systems and Technologies. Her passion is traveling around the world and exploring multicultural environments. In her spare time she likes making sushi, playing console games and hanging out with friends.
Subscribe to be the first to get our expert-written articles and tutorials for developers!