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:
- Border
- Button
- BusyIndicator
- CheckBox
- Expander
- ListView
- SideDrawer
Getting Started with Telerik Mobile Blazor Bindings for Xamarin
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.
First, visit the Get Started article in the Microsoft documentation. For a faster quick-start, visit Walkthrough: Build your First App.
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:
@using Microsoft.MobileBlazorBindings
@using Microsoft.MobileBlazorBindings.Elements
@using Xamarin.Essentials
@using Xamarin.Forms
@using Telerik.XamarinForms.Blazor.Primitives
@using Telerik.XamarinForms.Blazor.Input
@using Telerik.XamarinForms.Blazor.Common
@using Telerik.XamarinForms.Blazor.DataControls
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.
Demo Structure
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:
<ContentView>
<Grid Padding="new Thickness(0,40,0,0)">
<Layout>
<RowDefinition GridUnitType="GridUnitType.Auto" />
<RowDefinition GridUnitType="GridUnitType.Star" />
</Layout>
<Contents>
<GridCell>
<StackLayout Orientation="StackOrientation.Horizontal"
Spacing="10">
<RadButton BorderWidth="0"
CornerRadius="0"
HeightRequest="50"
WidthRequest="50"
BorderColor="Color.Transparent"
BackgroundImage="@(new FileImageSource { File="HamburgerMenu.png" })"
OnClick="@ChangeDrawerState" />
<RadBorder BorderColor="@Color.LightSkyBlue"
Padding="new Thickness(2)"
BorderThickness="new Thickness(0,0,0,2)">
<Label Text="Telerik UI for Xamarin Mobile Blazor Bindings!"
HorizontalTextAlignment="TextAlignment.Center"
VerticalTextAlignment="TextAlignment.Center"
FontAttributes="FontAttributes.Bold"
FontSize="15"/>
</RadBorder>
</StackLayout>
</GridCell>
<GridCell Row="1">
<RadSideDrawer DrawerLength="200"
IsOpen="@IsDrawerOpen">
<MainContent>
<Telerik.XamarinForms.Blazor.Primitives.SideDrawer.MainContent>
<Grid Padding="5">
<Layout>
<RowDefinition GridUnitType="GridUnitType.Auto" />
<RowDefinition GridUnitType="GridUnitType.Star" />
</Layout>
<Contents>
<GridCell>
<RadExpander>
<ExpanderHeader>
<Telerik.XamarinForms.Blazor.Primitives.Expander.ExpanderHeader.ExpanderHeader IndicatorColor="@Color.LightSkyBlue">
<StackLayout>
<Label Text="Expander control"
HeightRequest="40"
FontSize="15"
TextColor="@Color.Black"
VerticalTextAlignment="TextAlignment.Center" />
</StackLayout>
</Telerik.XamarinForms.Blazor.Primitives.Expander.ExpanderHeader.ExpanderHeader>
</ExpanderHeader>
<ExpanderContent>
<Telerik.XamarinForms.Blazor.Primitives.Expander.ExpanderContent>
<StackLayout Margin="new Thickness(10, 20, 10, 20)">
<StackLayout Orientation="StackOrientation.Horizontal"
Spacing="10">
<RadCheckBox UncheckedColor="@Color.LightSkyBlue"
CheckedColor="@Color.LightSkyBlue"
CheckedSymbolColor="@Color.Black"/>
<Label Text="Mobile Blazor Bindings"
FontSize="15"
VerticalTextAlignment="TextAlignment.Center"
HorizontalTextAlignment="TextAlignment.Center"
TextColor="@Color.Black"/>
</StackLayout>
<StackLayout Orientation="StackOrientation.Horizontal"
Spacing="10">
<RadCheckBox UncheckedColor="@Color.LightSkyBlue"
CheckedColor="@Color.LightSkyBlue"
CheckedSymbolColor="@Color.Black"/>
<Label Text="Telerik UI for Xamarin"
TextColor="@Color.Black"
FontSize="15"
VerticalTextAlignment="TextAlignment.Center"
HorizontalTextAlignment="TextAlignment.Center"/>
</StackLayout>
</StackLayout>
</Telerik.XamarinForms.Blazor.Primitives.Expander.ExpanderContent>
</ExpanderContent>
</RadExpander>
</GridCell>
<GridCell Row="1">
<Grid>
<Layout>
<RowDefinition GridUnitType="GridUnitType.Auto" />
<RowDefinition GridUnitType="GridUnitType.Star" />
</Layout>
<Contents>
<GridCell>
<RadButton Text="Show/Hide Busy Indicator"
OnClick="@ChangeBusyState"
TextColor="@Color.Black"
BackgroundColor="@Color.LightSkyBlue"/>
</GridCell>
<GridCell Row="1">
<RadBusyIndicator AnimationContentHeightRequest="100"
AnimationContentWidthRequest="100"
AnimationContentColor="@Color.LightSkyBlue"
AnimationType="Telerik.XamarinForms.Primitives.AnimationType.Animation4"
IsBusy="@IsBusy" />
</GridCell>
</Contents>
</Grid>
</GridCell>
</Contents>
</Grid>
</Telerik.XamarinForms.Blazor.Primitives.SideDrawer.MainContent>
</MainContent>
<DrawerContent>
<Telerik.XamarinForms.Blazor.Primitives.SideDrawer.DrawerContent>
<Grid>
<Layout>
<RowDefinition GridUnitType="GridUnitType.Auto" />
<RowDefinition GridUnitType="GridUnitType.Star" />
</Layout>
<Contents>
<GridCell>
<Label Text="ListView control"
HorizontalTextAlignment="TextAlignment.Center"
VerticalTextAlignment="TextAlignment.Center"
FontAttributes="FontAttributes.Bold"
FontSize="15"/>
</GridCell>
<GridCell Row="1">
<RadListView ItemsSource="@Source">
<ItemStyle>
<Telerik.XamarinForms.Blazor.DataControls.ListView.ListViewItemStyle TextCellTextColor="@Color.Black"/>
</ItemStyle>
<SelectedItemStyle>
<Telerik.XamarinForms.Blazor.DataControls.ListView.ListViewItemStyle TextCellTextColor="Color.Black"
BackgroundColor="@Color.LightSkyBlue"/>
</SelectedItemStyle>
</RadListView>
</GridCell>
</Contents>
</Grid>
</Telerik.XamarinForms.Blazor.Primitives.SideDrawer.DrawerContent>
</DrawerContent>
</RadSideDrawer>
</GridCell>
</Contents>
</Grid>
</ContentView>
@code {
protected override void OnInitialized()
{
base.OnInitialized();
this.IsDrawerOpen = false;
this.IsBusy = false;
this.Source = new List<string>()
{
"Tokyo",
"London",
"Madrid",
"Paris",
"Mexico",
"New York",
"Sidney"
};
}
public bool IsDrawerOpen { get; set; }
public bool IsBusy { get; set; }
public List<string> Source { get; set; }
public void ChangeDrawerState()
{
this.IsDrawerOpen = !this.IsDrawerOpen;
}
public void ChangeBusyState()
{
this.IsBusy = !this.IsBusy;
}
}
Then use the SideDrawerComponent as MainPage for the application by modifying the App.cs:
public App()
{
var host = MobileBlazorBindingsHost.CreateDefaultBuilder()
.ConfigureServices((hostContext, services) =>
{
// Register app-specific services
//services.AddSingleton<AppState>();
})
.Build();
MainPage = new ContentPage();
host.AddComponent<SideDrawerComponent>(parent: MainPage);
}
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 !
Tell Us What You Think
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 !