Telerik Blogs | Mobile| .NET MAUI

Getting Started with the .NET MAUI Map Control

2026-10-13T16:07:29Z

See how the Telerik UI for .NET MAUI Map control lets you display maps, labels and regions to add things like world maps or seating charts to your apps.

In the world of web development, there are applications for displaying geographic information. Although there are ways to embed Google Maps or similar options, customizing them isn’t so easy when you need to highlight geographic areas or respond to user selection. Fortunately, the Progress Telerik UI library has a .NET MAUI Map control, which we will examine throughout this article. Let’s get started!

What Is the Telerik UI for .NET MAUI Map Control?

The Telerik .NET MAUI Map control is a powerful control for displaying maps in your .NET MAUI applications, with a lot of flexible styling options. It also supports multiple layers, pan and zoom, and many other features.

The control works with ESRI shapefiles, which are a standard vector format in geographic information systems or GIS. According to the MAUI Map documentation, these files consist of geometric objects such as lines, polylines and polygons. This makes it possible to display different types of objects like floor plans and seat distribution, up to parts of country maps, roads, rivers, etc.

It’s important to note that an ESRI shapefile is composed of two files:

A .shp file, which contains the polygons that draw something on the map, such as a country, a region or a custom shape
A .dbf file, which contains the attributes associated with each geometry, such as the country’s name or its population

The control uses SkiaSharp to render the shapefile geometries, allowing fast and consistent rendering across platforms.

Finally, you should know that the .NET MAUI Map control is based on the use of layers, where each layer represents a data source that overlays the map. Let’s see how to integrate this control into a .NET MAUI app.

Integrating the Telerik .NET MAUI Map Control into .NET MAUI Apps

To see the control’s features in action, we’ll create a new project selecting the .NET MAUI App template, making sure not to include the sample code. Once the project is created, you can follow the installation guide for Telerik controls in .NET MAUI projects, which will allow you to use Telerik controls in your project.

Next, we will install the following NuGet package in the project:

CommunityToolkit.Mvvm

This package will help reduce repetitive code in view models. With this, we are ready to integrate a map into our application.

Downloading the Map Data

As I mentioned earlier, the map control needs a shapefile to be able to draw the map. To simplify this guide, we will download the files world.shp and world.dbf that Progress Telerik has made available to us in the examples repository.

To be able to use the downloaded files, let’s create a new folder in Resources/Maps, where we will add the files .shp and .dbf. In addition, we must mark the files as embedded resources, which we will achieve by modifying your project file .csproj as follows:

<ItemGroup>
    <EmbeddedResource Include="Resources\Maps\*.shp" />
    <EmbeddedResource Include="Resources\Maps\*.dbf" />
ItemGroup>

With the above, we will be able to use future additional map files without configuring each file as embedded. Also, we mark them as EmbeddedResource so that they are packaged inside the app assembly, which will allow us to read them later.

Creating a Demo View Model

With the map files added, the next step will be to create a view model that allows storing information about a country selected by the user. For this, we will define a file MainViewModel.cs with the following code:

public partial class MainViewModel : ObservableObject
{
    [ObservableProperty]
    [NotifyPropertyChangedFor(nameof(HasNoSelection))]
    private bool hasSelection;

    [ObservableProperty]
    private string selectedCountry = string.Empty;

    [ObservableProperty]
    private string selectedPopulation = string.Empty;

    public bool HasNoSelection => !HasSelection;
}

The above code defines properties to determine if there is a selection, a selected country and a selected population. The property HasNoSelection will allow showing a message when no country has been selected yet.

Displaying the Map in a ContentPage

The time has come to display the map in the application. To do this, we will open the ContentPage file where we want to show the map, and replace its content with the following:

<ContentPage ...
    xmlns:telerik="http://schemas.telerik.com/2022/xaml/maui">

    <Grid RowDefinitions="*,Auto">
    
        <telerik:RadMap
            x:Name="map"
            Grid.Row="0"
            InteractionMode="PanAndZoom"
            MaxZoomLevel="15"
            MinZoomLevel="1">
            <telerik:RadMap.Layers>
                <telerik:MapShapefileLayer x:Name="shapeLayer">
                    <telerik:MapShapefileLayer.Reader>
                        <telerik:MapShapeReader x:Name="reader" />
                    telerik:MapShapefileLayer.Reader>
                telerik:MapShapefileLayer>
            telerik:RadMap.Layers>
        telerik:RadMap>

    Grid>
ContentPage>

In the above code, you can see that we use properties of the map control, such as MinZoomLevel and MaxZoomLevel to limit the zoom range, in addition to InteractionMode to enable panning and zoom with gestures.

Additionally, we use the RadMap.Layers tag to add a MapShapefileLayer type, which will read the shapefile. We also use a MapShapeReader type named reader, which will be responsible for loading the files .shp and .dbf.

Now, we must load the files from the code behind of the page where we defined the map, as follows:

public partial class MainPage : ContentPage
{
    private readonly MainViewModel viewModel;
    public MainPage(MainViewModel viewModel)
    {
        InitializeComponent();

        this.viewModel = viewModel;
        BindingContext = viewModel;

        var assembly = GetType().Assembly;

        reader.ReadCompleted += OnReadCompleted;
        reader.DataSource = MapSource.FromResource("TelerikMapDemo.Resources.Maps.world.dbf", assembly);
        reader.Source = MapSource.FromResource("TelerikMapDemo.Resources.Maps.world.shp", assembly);
    }
    private void OnReadCompleted(object? sender, EventArgs e)
    {
        reader.ReadCompleted -= OnReadCompleted;
        Dispatcher.Dispatch(() => map.SetView(shapeLayer.GetBestView()));
    }
}

In the above code, there are a few elements worth analyzing:

We access the map information through a special class called MapSource, with which we load the map resources. Make sure to modify the namespace according to your project’s name.
We subscribe to the ReadCompleted event before any map reading, so that the handler runs when the reading of the files finishes.
We use the properties DataSource and Source to load both the map and the geometries.
In the OnReadCompleted handler, we unsubscribe from the read event so that it only executes once, and also use the methods SetView and GetBestView to calculate the region with the best fit for all the geometries.

Before running the application, we must go back to the MauiProgram.cs file and add to the dependency container the references for the content page and its view model

public static class MauiProgram
{
    public static MauiApp CreateMauiApp()
    {
        var builder = MauiApp.CreateBuilder();
        ...
        builder.Services.AddSingleton<MainViewModel>();
        builder.Services.AddSingleton<MainPage>();
...
    }
}

Now, when running the application, we will be able to see the map control rendered correctly:

Adding Labels to the Map

We have successfully added the map to our app. However, it doesn’t display any information, which is not very useful.

The file .dbf contains information we can use to add additional data to the map, such as country names. To do this, we’ll use an attribute called CNTRY_NAME, modifying the layer MapShapefileLayer to include the layer LabelAttributeName:

<telerik:MapShapefileLayer x:Name="shapeLayer" LabelAttributeName="CNTRY_NAME">
    ...
telerik:MapShapefileLayer>

In the code above, the property LabelAttributeName allows adding a label for each shape in a MapShapefileLayer. When running the app, we can see the names on the map as shown below:

In the demo above, you can see how when zooming the country labels gradually appear, allowing for a pleasant user experience.

Customizing the Map

So far, we have used the map’s default style; however, in real apps you’ll likely want to add colors for sections of your map. This is possible thanks to the use of MapShapeStyleSelector, which is a style selector that we can use to decide what colors to use for each region on the map.

In our example, we’ll compare the population of each country to determine its color. To do this, we’ll create a new class called
PopulationShapeStyleSelector, which will be defined as follows:

...
using IShape = Telerik.Maui.Controls.ShapefileReader.IShape;

public class PopulationShapeStyleSelector : MapShapeStyleSelector
{
    public MapShapeStyle HighPopulationStyle { get; set; } = new();
    public MapShapeStyle MediumPopulationStyle { get; set; } = new();
    public MapShapeStyle LowPopulationStyle { get; set; } = new();

    public override MapShapeStyle SelectStyle(object shape, BindableObject container)
    {
        if (shape is fileReader.IShape mapShape &&
            double.TryParse(mapShape.GetAttribute("POP_CNTRY")?.ToString(), out var population))
        {
            if (population > 50_000_000)
            {
                return HighPopulationStyle;
            }

            if (population < 5_000_000)
            {
                return LowPopulationStyle;
            }

            return MediumPopulationStyle;
        }

        return LowPopulationStyle;
    }
}

The operation is similar to a common .NET MAUI Style Selector, that is, we define style references as part of the class, in this case HighPopulationStyle, MediumPopulationStyle and LowPopulationStyle.

Next, the attribute POP_CNTRY is obtained from each mapShape, which is evaluated to determine the style that will be applied.

With the selector defined, we still need to create the styles to be applied. We can do this from the ContentPage where we’ve implemented the map control, as follows:

<ContentPage ...    
    xmlns:styling="clr-namespace:TelerikMapDemo.Styling">

    <ContentPage.Resources>
        <styling:PopulationShapeStyleSelector x:Key="PopulationStyleSelector">
            <styling:PopulationShapeStyleSelector.HighPopulationStyle>
                <telerik:MapShapeStyle
                    FillColor="#1E4C5C"
                    StrokeColor="#CFE8F2"
                    StrokeWidth="1" />
            styling:PopulationShapeStyleSelector.HighPopulationStyle>
            <styling:PopulationShapeStyleSelector.MediumPopulationStyle>
                <telerik:MapShapeStyle
                    FillColor="#3C99B7"
                    StrokeColor="#CFE8F2"
                    StrokeWidth="1" />
            styling:PopulationShapeStyleSelector.MediumPopulationStyle>
            <styling:PopulationShapeStyleSelector.LowPopulationStyle>
                <telerik:MapShapeStyle
                    FillColor="#95D3E8"
                    StrokeColor="#CFE8F2"
                    StrokeWidth="1" />
            styling:PopulationShapeStyleSelector.LowPopulationStyle>
        styling:PopulationShapeStyleSelector>
    ContentPage.Resources>
    ...
ContentPage>

You can see that we create an instance of PopulationShapeStyleSelector, within which we assign to each property of the selector a MapShapeStyle, which will allow customizing each defined selector.

The last step is to indicate that we want to use the selector we just created in MapShapefileLayer:

<telerik:MapShapefileLayer
    x:Name="shapeLayer"
    LabelAttributeName="CNTRY_NAME"
    ShapeStyleSelector="{StaticResource PopulationStyleSelector}">
   ...
telerik:MapShapefileLayer>

The result of running it is as follows:

In the image above, you can see how the countries appear colored according to their population. Now, let’s see how to select regions on a map.

Enabling Country Selection

To make the map fully functional, we will allow users to select a country to view its information in detail. We’ll do this by adding the use of the property SelectionMode in the MapShapefileLayer:

<telerik:MapShapefileLayer ...   
    SelectionMode="Single">
   ...
    <telerik:MapShapefileLayer.SelectedShapeStyle>
        <telerik:MapShapeStyle FillColor="#F4B400"
                               StrokeColor="#8A6D00"
                               StrokeWidth="1.5" />
    telerik:MapShapefileLayer.SelectedShapeStyle>
telerik:MapShapefileLayer>

In the code above we have indicated that only one country can be selected at a time, although you could also use the value Multiple if you need the user to select more than one country. Likewise, we have defined a MapShapeStyle section, which is used to specify the characteristics of the selected region.

We will also complete the ContentPage of our app, adding a Telerik container RadBorder in the second row of the main grid, which will serve to display the selected country’s information using standard controls and Telerik buttons:

<telerik:RadBorder
    Grid.Row="1"
    Padding="20"
    Background="White"
    BorderColor="#E0E0E0"
    BorderThickness="1"
    CornerRadius="16,16,0,0">
    <VerticalStackLayout Spacing="12">

        <Label
            FontAttributes="Bold"
            FontSize="14"
            Text="Selected country"
            TextColor="#607D8B" />

        <Label
            FontSize="15"
            IsVisible="{Binding HasNoSelection}"
            Text="Tap a country on the map to view its information."
            TextColor="#90A4AE" />

        <VerticalStackLayout IsVisible="{Binding HasSelection}" Spacing="4">
            <Label
                FontAttributes="Bold"
                FontSize="22"
                Text="{Binding SelectedCountry}"
                TextColor="#102A43" />
            <Label
                FontSize="14"
                Text="{Binding SelectedPopulation}"
                TextColor="#455A64" />
        VerticalStackLayout>

        <HorizontalStackLayout Spacing="12">
            <telerik:RadButton
                Padding="16,10"
                Background="#1E4C5C"
                Clicked="OnResetViewClicked"
                CornerRadius="8"
                Text="Overview"
                TextColor="White" />
            <telerik:RadButton
                Padding="16,10"
                Background="#E3F2F8"
                Clicked="OnClearSelectionClicked"
                CornerRadius="8"
                Text="Clear selection"
                TextColor="#1E4C5C" />
        HorizontalStackLayout>

    VerticalStackLayout>
telerik:RadBorder>

You also need to complete the code behind of the ContentPage to react to selection changes, as well as handle button actions:

public partial class MainPage : ContentPage
{
    private readonly MainViewModel viewModel;
    
    public MainPage()
    {
        InitializeComponent();

        ...
        shapeLayer.SelectedShapes.CollectionChanged += OnSelectedShapesChanged;
        
        reader.DataSource = MapSource.FromResource("TelerikMapDemo.Resources.Maps.world.dbf", assembly);
reader.Source = MapSource.FromResource("TelerikMapDemo.Resources.Maps.world.shp", assembly);
    }
    
    ...

    private void OnSelectedShapesChanged(object? sender, NotifyCollectionChangedEventArgs e)
    {            
        if (shapeLayer.SelectedShapes.Count == 0)
        {
            viewModel.HasSelection = false;
            viewModel.SelectedCountry = string.Empty;
            viewModel.SelectedPopulation = string.Empty;
            return;
        }

        var shape = shapeLayer.SelectedShapes[0];

        viewModel.SelectedCountry = shape.GetAttribute("CNTRY_NAME")?.ToString() ?? "Unknown";

        var populationText = shape.GetAttribute("POP_CNTRY")?.ToString();
        viewModel.SelectedPopulation = double.TryParse(populationText, out var population)
            ? $"Approximate population: {population:N0} inhabitants"
            : "Population not available";

        viewModel.HasSelection = true;
    }

    private void OnResetViewClicked(object? sender, EventArgs e)
    {
        map.SetView(shapeLayer.GetBestView());
    }

    private void OnClearSelectionClicked(object? sender, EventArgs e)
    {
        shapeLayer.SelectedShapes.Clear();
    }

}

In the code above we subscribed to the CollectionChanged event, which will be fired when a user selects or deselects a country. In the event handler OnSelectedShapesChanged we validate whether there are selected shapes; if not, the graphical elements that display information about each country are cleared.

If a country has been selected, the attributes CNTRY_NAME and POP_CNTRY are read and the values in the view model are updated.

Finally, we also create the event handlers OnResetViewClicked for a button that allows recentering the entire map using the method GetBestView() again. We have also defined the method OnClearSelectionClicked, which will be used to clear the SelectedShapes collection, to deselect any selected country and reset the data in the UI:

In the image above we can see how, when selecting a country on the map, its information is correctly displayed at the bottom.

Conclusion

In this article you got to know the Telerik UI Map control for .NET MAUI, which is an excellent option for displaying maps, labels and regions reliably and quickly. We saw step by step how to read ESRI shapefiles as well as render them.

We also learned how to color different regions using a style selector and how to allow users to select specific regions on the map.

Now it’s your turn to create unique experiences using this powerful control. The whole Telerik UI for .NET MAUI suite comes with a free 30-day trial so you can explore it yourself.

Try Now

Creating an Account UI in .NET MAUI

2026-09-28T20:43:49Z

See how to bring a user interface design for an account screen to life in a .NET MAUI application.

How many times a month do you create a new account? Probably more often than you remember. And while it may seem like a simple process, that first interaction can shape a user’s perception of the entire app.

As developers, it’s important to pay attention to every detail when transforming a design into code. Our goal isn’t just to make the application work, but also to stay true to the original design and deliver a smooth, enjoyable user experience. That’s why, in this article, we’ll recreate two screens inspired by a Dribbble design, bringing them to life step by step using .NET MAUI.

So grab a cup of coffee (or hot chocolate if you have a sweet tooth ☕), open Visual Studio or Visual Studio Code … and let’s start coding!

How Will the Explanation Work?

So you can understand everything 100%, I’ll explain how the process will work:

➖ Visual diagram: Before we start, you’ll see a diagram with a screenshot of the design we want to achieve. This design will be divided into blocks, each identified with a name and a color. Each one will be explained individually.

➖ Code explanation per block: In addition to the written explanation, each screen includes a set of blocks with the exact code snippets you need to implement and achieve the final result.

➖ Step-by-step visual progress: Each explanation will have its corresponding screenshot, so you can see the progress as we build the UI.

⚠️ For this design, we took inspiration from an original Dribbble UI, but made some adaptations and adjustments to align it with the goals of this article.

Environment Setup

You’ll learn how to take advantage of some of the powerful Progress Telerik UI for .NET MAUI components in this post. If you don’t have the .NET MAUI library installed yet, visit the quick start page, which explains step-by-step how to install Telerik UI for .NET MAUI, download the license key, configure the Telerik package source and install the Telerik MCP server (if needed).

Breaking Down the Design

To make this easier to follow, I’ve divided the design into clear blocks. We’ll build each part one at a time, in the order you see below.

1. Flower Image Step

Let’s start by creating the main page, which we’ll call WelcomeBackPage.xaml. This one will contain the components from both Step 1 and Step 2. For the main layout, we’ll use a Grid, divided into two rows.

This Grid is composed of the following elements:

Header image: In the first row, we’ll add the background image using the AspectFill property, allowing it to fill the available width while maintaining an attractive appearance across different screen sizes.

Main container: In the second row, we’ll add a Border control. In this case, we’ll use the Telerik UI for .NET MAUI Border control, so make sure to include the Telerik namespace in your page:

xmlns:telerik="http://schemas.telerik.com/2022/xaml/maui"

To create the overlapping effect, we only need to apply a negative top margin. This gives the impression that the white container is placed on top of the image. Finally, inside the Border, we’ll add a VerticalStackLayout, which we’ll use in the next steps to place the labels and buttons.

And you’ll get a result like this:

2. Welcome Info Step

For this second step, we already have the foundation in place from the previous section when we added the VerticalStackLayout. This means that all the controls we’ll add from this point forward should be placed inside that layout.

Let’s start by adding the first three Label controls:

Next, Let’s Add the Buttons

I have to admit, I absolutely love these buttons! The soft gradient gives them a modern and elegant look that really makes the UI stand out.

To achieve this effect, we’ll use .NET MAUI’s LinearGradientBrush along with three gradient stops. This allows us to smoothly blend multiple colors and create the beautiful gradient shown in the design.

The implementation looks like this:

✍️ If you want to learn more about LinearGradientBrush, I recommend checking out this article.

Finally, let’s add the label displayed for users who don’t have an account yet. Notice that this text uses two different styles within the same label. Instead of creating two Label controls, we’ll use a FormattedString, which allows us to apply multiple styles within a single Label.

And you’ll get a result like this:

3. Create Account Step

We made it to the third step, yay!

For this step, we’ll create a new page called CreateAccountPage.xaml, which will contain all the elements needed for the account creation screen.

Just like the previous page, this screen also includes a header image and a white content container with rounded top corners.

Now, let’s add the title and description:

Let’s Add the Form

For the form, we’ll use Telerik UI for .NET MAUI DataForm. This control works like magic and helps us save a lot of time when building forms! ✨

To use it in your XAML page, make sure to add the following namespace:

xmlns:telerik="clr-namespace:Telerik.Maui.Controls;assembly=Telerik.Maui.Controls"

Creating the Model

The first step is to define a model that represents the data our form will collect. Each property includes attributes that describe how it should be displayed, whether it’s required, and the type of data it accepts. The Telerik DataForm leverages these attributes to automatically generate the corresponding inputs and validation rules.

Our model should look like this:

public class SignUp : NotifyPropertyChangedBase 
{ 
    private string email; 
    private string password; 
    private string confirmPassword;
     
    [Required] 
    [Display(Name = "Email")] 
    public string Email 
    { 
    get => email; 
    set => UpdateValue(ref email, value); 
    }
     
    [Required] 
    [Display(Name = "Password")] 
    [DataType(DataType.Password)] 
    public string Password 
    { 
    get => password; 
    set => UpdateValue(ref password, value); 
    }
     
    [Required] 
    [Display(Name = "Confirm Password")] 
    [DataType(DataType.Password)] 
    public string ConfirmPassword 
    { 
    get => confirmPassword; 
    set => UpdateValue(ref confirmPassword, value); 
    } 
}

The next step is to assign our model to the page’s BindingContext. To keep the sample simple, we’ll create a new instance of the SignUp model directly in the page constructor.

public CreateAccountPage() 
{ 
    InitializeComponent(); 
    this.BindingContext = new Models.SignUp(); 
}

Adding It in XAML

Finally, we can add it to our XAML. Simply include the RadDataForm like the following:

That’s it! Your dynamic form is now ready and fully integrated into your page.

Let’s Add the Button

Divider and Text

And you’ll get a result like this:

And that’s it, we’re all done! Below, you can see the final result of both screens.

Conclusion

And that’s it! I hope this article helps you recreate beautiful UIs in .NET MAUI!

We built two account creation screens inspired by a Dribbble design. Along the way, we explored how to structure layouts with Grid, create overlapping effects, use gradients and customize the UI using Telerik UI for .NET MAUI RadBorder and DataForm.

As you can see, in just two screens we covered several tips that you can easily apply to your own applications.

I encourage you to keep exploring, experimenting and learning something new every day. See you in the next article! ‍♀️

Replicating a Room Sublet App UI with .NET MAUI

2026-09-18T16:14:29Z

Let’s build out a design of a room subletting app using the Progress Telerik UI for .NET MAUI Rating control, plus concepts like overlapping effects and FormattedText.

I dare say that a large percentage of young people, when they go to university, look for a room to rent where they can become independent and, of course, one that’s close to their campus!

And how cool would it be if, during that special moment, an app could help us find the perfect place. And if there isn’t an app that does it? Even better, let’s learn how to create one!

That’s exactly what we’re going to do in this article. We’re going to replicate a room sublet screen using .NET MAUI controls and one of my favorite Progress Telerik UI for .NET MAUI components: the MAUI Rating control. This UI was inspired from a Dribbble design. So get comfortable, and let’s start building this UI that I absolutely love!!

How Will the Explanation Work?

So you can understand everything 100%, I’ll explain how the process will work:

➖ Code explanation per block: In addition to the written explanation, each screen includes a set of blocks with the exact code snippets you need to implement and achieve the final result.

➖ Step-by-step visual progress: Each explanation will have its corresponding screenshot, so you can see the progress as we build the UI.

⚠️ For this design, we took inspiration from an original Dribbble UI, but made some adaptations and adjustments to align it with the goals of this article.

Environment Setup

You’ll learn how to take advantage of some of the powerful Telerik UI for .NET MAUI components in this post. If you don’t have the .NET MAUI library installed yet, visit the quick start page, which explains step-by-step how to install Telerik UI for .NET MAUI, download the license key, configure the Telerik package source and install the Telerik MCP server (if needed).

Breaking Down the Design

To make this easier to follow, I’ve divided the design into clear blocks. We’ll build each part one at a time, in the order you see below.

1. Header and Background

Woohoo!! Let’s start with the first block. I love this one because it contains several interesting components, but before adding them, we need to create the layout that will hold the entire page.

Grid

We’ll start with a grid composed of a single column. This will help us create the overlay effect between the background image and the main content.

Inside the grid, we’ll place two elements:

The background image.
Another Grid that will contain all the UI components we’ll build throughout this article. This grid will have two columns and nine rows.

In code, it should look something like this:

 

    
 
     
    
    
    <uses-permission android:name="android.permission.RECORD_AUDIO" />

manifest>

For iOS, you should open the file Platforms/iOS/Info.plist, adding the following privacy descriptions:



<plist version="1.0">
<dict>
    ...

    <key>NSCameraUsageDescriptionkey>
    <string>PROVIDE YOUR REASON HEREstring>

    <key>NSMicrophoneUsageDescriptionkey>
    <string>PROVIDE YOUR REASON HEREstring>
dict>
plist>

For Windows no additional action is required.

Creating a ViewModel to Manage the Control

Once we’ve configured the project to request permissions from the user, let’s create the view model, which will allow managing the state of the control. For this, I created a class called MainViewModel with the following content.

public partial class MainViewModel : ObservableObject
{
    [ObservableProperty]
    string statusMessage = "Grant permissions to start the camera.";

    [ObservableProperty]
    string cameraName = "No camera selected";

    [ObservableProperty]
    [NotifyPropertyChangedFor(nameof(HasPhoto))]
    string? lastPhotoPath;

    [ObservableProperty]
    string? lastVideoPath;

    [ObservableProperty]
    [NotifyPropertyChangedFor(nameof(RecordButtonText))]
    [NotifyPropertyChangedFor(nameof(RecordButtonColor))]
    bool isRecording;

    [ObservableProperty]
    bool isTorchOn;

    [ObservableProperty]
    float currentZoom = 1.0f;

    [ObservableProperty]
    float minimumZoom = 1.0f;

    [ObservableProperty]
    float maximumZoom = 4.0f;

    [ObservableProperty]
    CameraFlashMode selectedFlashMode = CameraFlashMode.Off;

    [ObservableProperty]
    CameraInfo? selectedCamera;

    public IReadOnlyList<CameraFlashMode> FlashModes { get; } = Enum.GetValues<CameraFlashMode>();

    public bool HasPhoto => !string.IsNullOrWhiteSpace(LastPhotoPath);

    public string RecordButtonText => IsRecording ? "Stop video" : "Record video";

    public Color RecordButtonColor => IsRecording ? Colors.Firebrick : Colors.DarkGreen;

    public void UpdateCameraInfo()
    {
        if (SelectedCamera is null)
        {
            CameraName = "No camera selected";
            return;
        }

        CameraName = $"{SelectedCamera.Name} ({SelectedCamera.Position})";
        MinimumZoom = Math.Max(1.0f, SelectedCamera.MinimumZoomFactor);
        MaximumZoom = Math.Max(MinimumZoom, SelectedCamera.MaximumZoomFactor);
        CurrentZoom = MinimumZoom;
    }

    partial void OnSelectedCameraChanged(CameraInfo? value)
    {
        UpdateCameraInfo();
    }
}

In the previous code, I created some properties that can help us manage controls in the UI, for example:

CameraName: To indicate which camera is selected
LastPhotoPath and LastVideoPath: To show the latest paths for photos and videos
IsRecording: To maintain the recording state
CurrentZoom, MinimumZoom and MaximumZoom: To control zoom values
OnSelectedCameraChanged(...) and UpdateCameraInfo(): To update values when there is a camera change

With the base viewmodel ready, it’s time to create the graphical interface.

Creating the UI for the Application

It’s time to create the graphical interface page for the application. We’ll do this by creating a ContentPage, replacing the content with the following:


<ContentPage ...
             xmlns:toolkit="http://schemas.microsoft.com/dotnet/2022/maui/toolkit">

    <Grid RowDefinitions="*,Auto" Padding="16" RowSpacing="12">
        <Border Grid.Row="0" StrokeThickness="0" BackgroundColor="Black">
            <Grid>
                <toolkit:CameraView
                    x:Name="Camera"
                    CameraFlashMode="{Binding SelectedFlashMode}"
                    IsTorchOn="{Binding IsTorchOn}"
                    SelectedCamera="{Binding SelectedCamera}"
                    ZoomFactor="{Binding CurrentZoom}" />

                <Border
                    Margin="12"
                    Padding="10,6"
                    BackgroundColor="#99000000"
                    StrokeThickness="0"
                    HorizontalOptions="Start"
                    VerticalOptions="Start">
                    <Label Text="{Binding CameraName}" TextColor="White" FontSize="12" />
                Border>
            Grid>
        Border>

        <ScrollView Grid.Row="1" MaximumHeightRequest="360">
            <VerticalStackLayout Spacing="14">
                <Label Text="CameraView media demo" FontSize="22" FontAttributes="Bold" />
                <Label Text="{Binding StatusMessage}" />

                <Grid ColumnDefinitions="*,*" ColumnSpacing="12">
                    <Button Text="Take photo" Clicked="OnTakePhotoClicked" />
                    <Button
                        Grid.Column="1"
                        Text="{Binding RecordButtonText}"
                        Clicked="OnRecordVideoClicked"
                        BackgroundColor="{Binding RecordButtonColor}" />
                Grid>

                <Grid ColumnDefinitions="Auto,*" ColumnSpacing="12" RowDefinitions="Auto,Auto,Auto">
                    <Label Text="Zoom" VerticalOptions="Center" />
                    <Slider
                        Grid.Column="1"
                        Minimum="{Binding MinimumZoom}"
                        Maximum="{Binding MaximumZoom}"
                        Value="{Binding CurrentZoom}" />

                    <Label Grid.Row="1" Text="Torch" VerticalOptions="Center" />
                    <Switch Grid.Row="1" Grid.Column="1" IsToggled="{Binding IsTorchOn}" HorizontalOptions="Start" />

                    <Label Grid.Row="2" Text="Flash" VerticalOptions="Center" />
                    <Picker
                        Grid.Row="2"
                        Grid.Column="1"
                        ItemsSource="{Binding FlashModes}"
                        SelectedItem="{Binding SelectedFlashMode}" />
                Grid>

                <Image
                    Source="{Binding LastPhotoPath}"                    
                    Aspect="AspectFill"
                    IsVisible="{Binding HasPhoto}" />

                <Label Text="{Binding LastPhotoPath}" FontSize="12" LineBreakMode="TailTruncation" />
                <Label Text="{Binding LastVideoPath}" FontSize="12" LineBreakMode="TailTruncation" />
            VerticalStackLayout>
        ScrollView>
    Grid>

ContentPage>

In the previous code, we can highlight a few things:

The namespace xmlns:toolkit is used so that the control can be used via toolkit:CameraView.
Properties such as CameraFlashMode, IsTorchOn, SelectedCamera and ZoomFactor are used, which will be connected to the viewmodel’s properties.
We use events linked to the code behind OnTakePhotoClicked and OnRecordVideoClicked, because we work with capture APIs and streams.

Connecting the Content Page with the ViewModel

Once we have created the XAML code for the graphical interface, it’s time to connect it with the view model, as well as create the missing event handlers. To do this, replace the code behind of the XAML page with the following content:

public partial class MainPage : ContentPage
{
    readonly MainViewModel viewModel = new();
    Stream recordingStream = Stream.Null;

    public MainPage()
    {
        InitializeComponent();
        BindingContext = viewModel;

        Camera.MediaCaptureFailed += OnMediaCaptureFailed;
    }

    protected override async void OnAppearing()
    {
        base.OnAppearing();
        await RequestCameraPermissions();
        await LoadCameras();
    }

    protected override void OnDisappearing()
    {
        base.OnDisappearing();
        Camera.MediaCaptureFailed -= OnMediaCaptureFailed;
        recordingStream.Dispose();
    }

    private async Task RequestCameraPermissions()
    {
        var cameraStatus = await Permissions.RequestAsync<Permissions.Camera>();
        if (cameraStatus is not PermissionStatus.Granted)
        {
            viewModel.StatusMessage = "You need to grant camera permission.";
            return;
        }

        try
        {
            var microphoneStatus = await Permissions.RequestAsync<Permissions.Microphone>();
            if (microphoneStatus is not PermissionStatus.Granted)
            {
                viewModel.StatusMessage = "You need to grant microphone permission to record video.";
            }
        }
        catch (FileNotFoundException) when (OperatingSystem.IsWindows())
        {
            viewModel.StatusMessage = "On unpackaged Windows apps, microphone permission may require a packaged app.";
        }
    }

    private async Task LoadCameras()
    {
        try
        {
            var cameras = await Camera.GetAvailableCameras(CancellationToken.None);
            viewModel.SelectedCamera = cameras.FirstOrDefault();
            viewModel.UpdateCameraInfo();
        }
        catch (Exception ex)
        {
            viewModel.StatusMessage = $"No cameras were found: {ex.Message}";
        }
    }

    private void OnMediaCaptureFailed(object? sender, MediaCaptureFailedEventArgs e)
    {
        viewModel.StatusMessage = $"Capture error: {e.FailureReason}";
    }
}

In the previous code you can notice some interesting things:

As indicated by the CameraView documentation, permissions must be requested manually from the user to use the camera and microphone, in addition to the per-platform configuration. We do this when the page starts through the method RequestCameraPermissions().
It is possible to obtain the list of available cameras through Camera.GetAvailableCameras.
In case an error occurs, we use the event OnMediaCaptureFailed to handle it.

This is just the beginning. Now, let’s look at how to take a photo and a video.

Taking a Photo with the CameraView Control

In the code-behind, we need a method that allows taking a photograph when pressing a button. To achieve this, we will do it through the following code:

private async void OnTakePhotoClicked(object? sender, EventArgs e)
{
    try
    {
        await using var photoStream = await Camera.CaptureImage(CancellationToken.None);
        var photoPath = Path.Combine(FileSystem.AppDataDirectory, $"photo-{DateTime.Now:yyyyMMdd-HHmmss}.jpg");

        await using var fileStream = File.Create(photoPath);
        await photoStream.CopyToAsync(fileStream);

        viewModel.LastPhotoPath = photoPath;
        viewModel.StatusMessage = "Photo saved successfully.";
    }
    catch (Exception ex)
    {
        viewModel.StatusMessage = $"Unable to take photo: {ex.Message}";
    }
}

In the previous method, we use Camera.CaptureImage to take a photograph, which returns a stream that we store locally. Next, we create a path using a safe location through FileSystemAppDataDirectory, which we use to save the stream with File.Create and CopyToAsync. Finally, we update the preview image and display the created path thanks to LastPhotoPath and StatusMessage.

Recording a Video with CameraView

To implement the recording process, we are going to create three methods. One controls the logic to know whether it is recording, starting or stopping the recording. The other two will allow starting and stopping the recording. The code looks as follows:

private async void OnRecordVideoClicked(object? sender, EventArgs e)
{
    if (viewModel.IsRecording)
    {
        await StopRecording();
        return;
    }

    await StartRecording();
}

private async Task StartRecording()
{
    try
    {
        var videoPath = Path.Combine(FileSystem.AppDataDirectory, $"video-{DateTime.Now:yyyyMMdd-HHmmss}.mp4");
        recordingStream = File.Create(videoPath);

        await Camera.StartVideoRecording(recordingStream, CancellationToken.None);

        viewModel.LastVideoPath = videoPath;
        viewModel.IsRecording = true;
        viewModel.StatusMessage = "Recording video...";
    }
    catch (Exception ex)
    {
        await recordingStream.DisposeAsync();
        recordingStream = Stream.Null;
        viewModel.StatusMessage = $"Unable to start video recording: {ex.Message}";
    }
}

private async Task StopRecording()
{
    try
    {
        await Camera.StopVideoRecording(CancellationToken.None);
        await recordingStream.DisposeAsync();

        recordingStream = Stream.Null;
        viewModel.IsRecording = false;
        viewModel.StatusMessage = "Video saved successfully.";
    }
    catch (Exception ex)
    {
        viewModel.StatusMessage = $"Unable to stop video recording: {ex.Message}";
    }
}

In the previous code, the methods do the following:

OnRecordVideoClicked(...): Through the property IsRecording, it determines which method should be invoked when the user presses the button in the UI.
StartVideoRecording(): It obtains a path using the current time to name the file and creates a stream at that location. Then, it uses the method Camera.StartVideoRecording to start the recording. It is important to keep the stream open while the recording is active.
StopRecording: This ends the capture using Camera.StopVideoRecording. After stopping the recording, the stream is closed to release the file.

Testing the Application

After adding all the previous code to the application, it’s time to test the functionality. When running the application, we get the following result:

You can see that all features work correctly, and that it’s possible to take photos and videos within the same application.

Conclusion

In this article you have learned about the CameraView control from the Community Toolkit, and how to integrate it into your own .NET MAUI applications. We went step by step to initialize it, configure permissions, create the view model and the user interface. With what you’ve learned, you can now create your own experiences using the control in more complex scenarios.

Skeleton in .NET MAUI: What It Is and How to Use It

2026-08-24T15:23:04Z

A skeleton allows us to indicate to users that an app or page is loading. This improves the user experience, providing feedback that the app isn’t broken.

Let’s face it: as users, we tend to be impatient when an application doesn’t respond quickly. It’s very easy to assume that the app has frozen or isn’t working when it doesn’t give us any kind of feedback.

Imagine you have an application with a menu that displays a list connected to a backend. If the backend takes time to respond and we don’t indicate to the user that data is loading, they will most likely think: “This app doesn’t work.”

As developers, it’s important to prevent this from happening. There are different ways to visually communicate that data is loading, and one of my favorites is using skeletons. These allow us to gently indicate to the user that the app is performing an action, even if the content isn’t ready yet.

In this article, we’ll learn what a Skeleton is, in which scenarios it is most useful, and how to implement the Skeleton component designed by Progress Telerik UI for .NET MAUI.

What Is a Skeleton?

Image generated using AI for illustrative purposes

A skeleton is a visual element used to indicate that content is loading. Basically, it appears on the screen as blocks (usually gray) placed in the same positions where the actual elements will be displayed once the data is available and the effect disappears.

Its purpose is to give users context while the information is loading by showing the structure that the content will have. It also typically includes a subtle animation that communicates the app is still working, even if all that’s visible are gray blocks or rectangles.

This way, instead of showing empty spaces, a traditional loader or, even worse, nothing at all, a skeleton keeps the interface clear and lets the user know that the application is working fine.

✅ When Should You Use Skeletons?

It’s important to see skeletons not just as a visual element to “entertain” users, but as a tool that allows your app to handle loading states in a smoother and more intentional way.

Let’s look at some scenarios where skeletons are especially useful:

When Waiting for API Responses

No matter how optimized your app is, it still depends on backend response times. Skeletons help bridge that gap by showing structure while data is loading. Ideally, you should display the skeleton only while the request is in progress and replace it immediately once the data is available.

Screens with Heavy Images

When loading images that may take time, skeletons are extremely useful to indicate that content is coming, instead of leaving empty or broken-looking spaces.

❌ When Are Skeletons NOT Recommended?

When Data Is Not Actually Loading

Avoid using skeletons just for visual purposes. If there’s no real loading happening, then you don’t need them.

For Instant Loads

If the content appears immediately, adding a skeleton only adds unnecessary complexity and can even hurt the experience.

Very Simple Screens

On screens with minimal content, a skeleton might be overkill. A simple layout or even a simple loading indicator could be enough.

Meet the Telerik Skeleton

Did you know that Progress Telerik provides a Skeleton component for .NET MAUI? Oh yeahh!

Now that you’ve seen how powerful using one can be, let’s quickly go through how to implement it and highlight some of its most important benefits.

Before we dive in, let’s make sure your environment is ready. Just keep these two key points in mind:

Create a Telerik account: If you don’t have a Telerik account yet, you can create one for free. You’ll get access to a trial license that allows you to explore not only the Skeleton component, but the full set of UI controls available for .NET MAUI.
Install Telerik UI for .NET MAUI: This is a one-time setup, so you won’t need to repeat it for each component. If you haven’t installed it yet, I’ve included an article that walks you through the process step by step for both Visual Studio and Visual Studio Code.

Adding the Namespace

xmlns:telerik="http://schemas.telerik.com/2022/xaml/maui"

Registering the Component

Go to your MauiProgram.cs file and, inside the CreateMauiApp method, register the Telerik controls using the UseTelerik() extension method.

using Telerik.Maui.Controls.Compatibility;
public static class MauiProgram
{

    public static MauiApp CreateMauiApp()
    {
    var builder = MauiApp.CreateBuilder();
    builder
    .UseTelerik()
    .UseMauiApp()
    .ConfigureFonts(fonts =>
    {
    fonts.AddFont("OpenSans-Regular.ttf", "OpenSansRegular");
    });
    return builder.Build();
    
    }
}

How to Use It?

Using it is very simple. You just have to add a tag like the following:

Skeleton Types in the Telerik UI for .NET MAUI Library

Typically, when creating a skeleton, you need to build the structure from scratch. However, the Telerik UI for .NET MAUI Skeleton component comes with predefined structures (anatomies), which helps you save both time and code. (Honestly, this is gold. A huge win!)

This control offers several built-in structures that you can use to represent different types of content:

➖ Article: Displays a layout with a small image placeholder on the left and multiple text lines on the right, simulating a title and description.

➖ Text: A simple text structure composed of multiple lines, typically used to represent titles and paragraphs.

➖ PersonalCircle: Shows a circular avatar placeholder with text lines next to it, commonly used for user profiles or list items with avatars.

➖ PersonaSquare: Similar to PersonaCircle, but uses a square (with rounded corners) instead of a circular avatar.

➖ Image: Represents a large media placeholder with a single text line below, ideal for image-focused layouts.

➖ Video: Simulates a video layout with a small avatar and text at the top, followed by a large media area and additional text lines below.

➖ Card: Displays a card-style layout with a title at the top, a large image placeholder and text lines at the bottom.

➖ ContentFeed: Mimics a feed-style layout with a header (avatar + one line), a large content block and text lines below, similar to social media posts.

The images of the Skeleton types were generated using AI for better understanding

To use any of these types, you just need to use the SkeletonType property as shown below:

Custom Skeleton View

But … what if you want to create your own skeleton anatomy?

You can do that too! Although the predefined types help you save time and effort, they don’t always fit your design. That’s why Progress Telerik allows you to create a fully custom one.

The idea is very simple: you define your own layout (just like your real UI, but without data) and assign it to the RadSkeleton using the LoadingViewTemplate property.

️ Implementation

First, define your RadSkeleton and assign a custom template to it:

Then, create the DataTemplate that will represent your skeleton:

Done!!! We made it! Did you like it?

Conclusion

I hope this article helped you understand what a skeleton is and how it can improve the user experience in your .NET MAUI applications.

From understanding when to use it, to exploring the different types provided by Progress Telerik and finally implementing it in your UI, you’re now ready to apply this knowledge in your own apps. I invite you to explore more about the Telerik Skeleton for .NET MAUI in the following articles:

If you have any questions or would like me to dive deeper into a specific part, feel free to leave a comment, I’ll be happy to help!

See you in the next article! ‍♀️

Ready to Try Telerik UI for .NET MAUI?

Give the Skeleton component plus 70 other .NET MAUI components a try, free for 30 days.

Try Telerik UI for .NET MAUI

Building an Onboarding and Registration UI in .NET MAUI

2026-08-10T18:11:16Z

See how to use LinearGradientBrush and RadialGradientBrush, structure grid layouts and create a dynamic form using the Telerik DataForm in .NET MAUI.

Have you ever seen apps with super fresh screens with gradients that make you think: “OMG, where do I get that image to use as a background in my apps?”

Well, today you won’t just see a UI like that … you’ll learn how to create it from scratch. This UI is inspired by a design from Dribbble, and we’ll recreate it step by step.

Here’s where it gets interesting: we’ll build that super modern gradient using LinearGradientBrush in .NET MAUI, without relying on external images, achieving that clean look directly from code.

From there, we’ll put together the entire experience: an onboarding screen with a clean and modern design, along with a registration form using the Progress Telerik UI for .NET MAUI DataForm.

The best part is that you’ll understand every step of the process, from the background gradient to the structure of the form and how to use the components, so you can easily adapt it to your own projects.

So let’s get started, and you’ll see how simple and fast it’s to build a UI like this.

How Will the Explanation Work?

So you can understand everything 100%, I’ll explain how the process will work:

➖ Visual diagram: Before we start, you’ll see a diagram with a screenshot of the design we want to achieve. This design will be divided into screens, each identified with a name and a color. Each one will be explained individually.

➖ Code explanation per block: In addition to the written explanation, each screen includes a set of blocks with the exact code snippets you need to implement and achieve the final result.

➖ Step-by-step visual progress: Each explanation will have its corresponding screenshot, so you can see the progress as we build the UI.

⚠️ For this design, we took inspiration from an original Dribbble UI, but made some adaptations and adjustments to align it with the goals of this article.

Environment Setup

Breaking Down the Design

To make this easier to follow, I’ve divided the design into clear blocks. We’ll build each part one at a time, in the order you see below.

1. Onboarding

Oh yeahh! We’ve reached the first screen! This is an onboarding screen, and I really like it because it’s perfect for practicing XAML while building a modern UI.

One of the highlights here is the gradient background. When we see something like this, it’s easy to think we need an image to achieve it, but that’s not the case. We’ll build it from scratch using LinearGradientBrush from .NET MAUI, giving you full control to customize and experiment with gradients directly from code, without relying on external assets.

On top of that, this screen helps us structure a real layout by combining key UI elements: a centered image, a title with a description, and simple actions like a button and a “Skip” option.

Adding the Gradient

To get started with the code, the first thing we’ll create is the gradient that will be used as the background for the entire page. We’ll assign it directly as the background of the ContentPage.

Using LinearGradientBrush, add the following code block right before defining the main layout. Keep in mind that you can tweak each variation of the gradient using GradientStop.

✍️ If you want to learn more about LinearGradientBrush, I recommend checking out the MS Learn article.

Main Layout

Now let’s continue with one of the most important components in a .xaml file: the main layout. For this screen, we’ll add a Grid with two columns and five rows:

Keep in mind that this Grid will contain all the elements of your page, so it should be placed inside the ContentPage, exactly where the previous code block says: “Add your Grid here.”

The Halo

As you may notice, the main image has a kind of “halo” behind it, almost like a soft circle. In this case, we enhanced that effect using a RadialGradientBrush.

This code block should be placed right at the beginning of the Grid, before adding the image and the rest of the elements.

✍️ If you want to learn more about RadialGradientBrush, check out the MS Learn article.

Main Images, Labels and Button

Now we’ll continue by adding the remaining elements of the screen: the main image, labels and the button.

Once the layout and components are in place, the result should look like this:

For our second screen, we’ll also add a gradient. As you can see, it’s not exactly the same as the one on the previous screen, so we’ll create a new one with different color variations, applying it in the same way we did before, directly in the ContentPage.

Just like in the previous page, we’ll use a Grid. In this case, it will have eight rows and two columns. Inside this Grid, we’ll add all the remaining elements.

Title & Description

Let’s Add the Form!

One of my favorite moments has arrived (because yes, I absolutely love this component). For our form, we’ll use the Telerik UI for .NET MAUI DataForm!

To use it, don’t forget to follow the instructions in the “ Environment Setup” section explained earlier. Additionally, you’ll just need to add the following namespace to your XAML:

xmlns:telerik="clr-namespace:Telerik.Maui.Controls;assembly=Telerik.Maui.Controls"

Creating the Model

To display the fields in our form, we’ll create a model where we define everything we need, such as the email and password. This is also where we specify whether each field is required, its display name and the data type.

The data type is especially important, for example, for password fields. It masks the input, showing *** as you type.

Additionally, the Telerik DataForm uses these attributes to automatically generate and validate the UI, which means we don’t need to manually create each input field or handle basic validation logic.

Our model should look like this:

public class SignUp : NotifyPropertyChangedBase
{ 
    private string email; 
    private string password; 
    private string confirmPassword;
     
    [Required] 
    [Display(Name = "Email ID")] 
    public string Email 
    { 
    get => email; 
    set => UpdateValue(ref email, value); 
    }
     
    [Required] 
    [Display(Name = "New Password")] 
    [DataType(DataType.Password)]
     
    public string Password 
    { 
    get => password;  
    set => UpdateValue(ref password, value); 
    }
     
    [Required] 
    [Display(Name = "Confirm Password")] 
    [DataType(DataType.Password)]
     
    public string ConfirmPassword 
    { 
    get => confirmPassword; 
    set => UpdateValue(ref confirmPassword, value); 
    } 
}

Now, go to your XAML page and set the BindingContext from the code-behind. For this article, we’ll keep the example simple and assign a new instance of our SignUp model directly in the page constructor:

public SignUpPage() 
{ 
    InitializeComponent(); 
    this.BindingContext = new Models.SignUp(); 
}

This allows the DataForm to read the model properties and generate the corresponding fields based on the attributes we defined earlier.

Adding It in XAML

Finally, we can add it to our XAML. Simply include something like the following:

At this point, the DataForm will automatically generate the form fields based on the model we defined earlier.

Terms & Conditions and Button

Once the layout and components are in place, the result should look like this:

Conclusion

I hope this article helps you understand how to recreate a modern UI from scratch using .NET MAUI. From building custom gradients with LinearGradientBrush and RadialGradientBrush, to structuring layouts with Grid, and creating a dynamic form using the Telerik DataForm, you now have a solid foundation to build clean and modern interfaces.

The best part is that these are concepts you can easily reuse and adapt to your own projects to create more polished and visually appealing apps.

If you have any questions or would like me to dive deeper into a specific part, feel free to leave a comment. I’ll be happy to help!

See you in the next article! ‍♀️

Remember, you can try Telerik UI for .NET MAUI free for 30 days.

Try Now

4 Rating Card UI Ideas in .NET MAUI

2026-08-03T15:33:09Z

Enable users to provide feedback rating with these four variations of rating cards for your .NET MAUI app.

When we talk about feedback, we often think of the negative kind, like critiques or complaints. It makes sense, since they’re the ones that stand out the most, even if just one out of 1,000 is negative. But that’s not the full story.

There are also users who are enjoying your app, who are having a great experience … but simply don’t say it. And many times, it’s not because they don’t want to, but because they don’t have a way to do it. We’re not giving them the space or the tools to express how they feel.

That’s why it’s key to add touchpoints in our apps where users can rate what they use from a specific module to the entire app through a rating and even a comment.

So, in this article, I’m bringing you four rating UI ideas that we’ll be building in .NET MAUI.

Environment Setup

Let’s Start!

Basically, we’ll be building four different UI ideas, all focused on collecting user ratings. To achieve this, we’ll use two key Telerik components: .NET MAUI Rating and .NET MAUI ProgressBar.

We’ll create one .xaml page for each UI. After completing the Environment Setup in your project, remember that each .xaml page must include the required namespace for the Rating control and, when needed, the ProgressBar control. (Not all screens will use the ProgressBar.)

Your namespace should look like this:

xmlns:telerik="clr-namespace:Telerik.Maui.Controls;assembly=Telerik.Maui.Controls"

Creating the Example Structure

Each of the four cards we’ll build can be implemented in different ways, such as a Popup or a BottomSheet, depending on what best fits your app’s needs.

For this example, we’ll define a reusable Border with shadows that will act as the base container for each card.

1. Friendly Star UI

This design is inspired by a Dribbble concept and has a friendly, soft and playful style. This first UI is perfect for apps that want to ask for feedback in a warm and simple way, without making the rating experience feel too formal or intrusive.

Starting with the Code

Inside the previously defined Border, we’ll create a grid with five rows, as shown below:

Header with Rounded Image

Rating Side

Next, we’ll add a simple text that says “How Would You Rate Our App Experience?” Additionally, we’ll use the Telerik .NET MAUI Rating control.

I really love this control because it allows you to fully customize the colors of selected and unselected items. It’s also not limited to stars, you can use different shapes or elements to represent the rating. I definitely encourage you to explore the .NET MAUI Rating control. You’re going to love it!

Submit button and footer text

2. Rating Summary UI

Next, we’ll continue with another Dribbble-inspired UI. This one focuses on a rating summary, which is especially useful when you want to get a quick, overall view of what’s happening with your app’s feedback.

In addition to the Telerik Rating control, we’ll also incorporate the Telerik ProgressBar, which will help us visually represent the distribution of ratings across each level.

To show different ways of building layouts and working with components, we’ll use a slightly different approach compared to the previous example. This time, we’ll start with a VerticalStackLayout as our main container.

Customers Reviews and Rounded Rating Bar

Along with the text, we’ll use a HorizontalStackLayout to organize the elements, and we’ll also add the RadShapeRating control.

Adding the Rating Breakdown by Star

Now, we’ll add the remaining elements of the screen, including the ProgressBar component from Progress Telerik for each rating level.

To make it easier to understand, especially if you’re just getting started in .NET MAUI, I’ve kept this example very simple. However, you can make it much cleaner and more reusable by using styles or by generating these items from a list.

3. Detailed Feedback UI

Our third screen is a rating UI that also asks users to leave a comment about their score. It was inspired by a Dribbble design, and for this example, we modified it slightly.

For this card, our main layout will be a Grid:

Adding the Label and Telerik Rating Control:

4. Multi-Criteria Rating UI

We’ve reached our final UI!! And I’m sure you’ve learned a lot along the way!

This final design takes things a step further by allowing users to rate multiple criteria or categories, along with leaving a comment. Just like the previous examples, it was inspired by a Dribbble design.

For this card, our main layout will also be a Grid:

And let’s add all the remaining elements:

✍️ If you want to make it even more engaging, you can use a list to avoid repeating each category with its rating and even add some styling!

Conclusion

All set! We’ve now built all four rating UI interfaces. Below, you can see how each one looks:

I hope these four rating UI ideas inspire you to create more interactive and useful feedback experiences in your .NET MAUI apps!

Remember, ratings are not only about collecting numbers. They’re also a great way to understand how users feel and what you can keep improving.

If you have any questions or would like me to explain any part in more detail, feel free to leave a comment, I’ll be happy to help! See you in the next article! ‍♀️

Remember, Telerik UI for .NET MAUI comes with a free 30-day trial, so you can experiment with these examples yourself!

Try Now

Top Common Handlers in .NET MAUI

2026-07-27T15:52:15Z

Connect your .NET MAUI cross-platform controls with corresponding platform-specific controls using handlers. Here are some example use cases where handlers are most useful.

Handlers in .NET MAUI are the way to connect cross-platform controls with their native views on each platform. They offer a clean, decoupled and high-performance design. In this article we will analyze some scenarios where they are especially useful to solve certain problems. Let’s go!

Understanding Handlers in .NET MAUI

A handler in .NET MAUI is a special class that maps a cross-platform control to its native control. When we create the user interface in XAML, we use these cross-platform controls to build interfaces inside content pages, which are translated to native controls. For example, a .NET MAUI Entry control is mapped to an Android AppCompatEditText control, an iOS / Mac Catalyst UITextField control and a TextBox control on Windows.

At this point, you may wonder about the usefulness of handlers in your projects. The answer is that you can use them to customize controls and solve a range of problems: changing the default appearance of controls that cannot be done from XAML controls, accessing the properties of each native control, allowing you to change behavior to perform validations, etc.

Handlers can be used to:

Remove or modify elements of a control (like an underline, border, etc.)
Add functionality to a control (such as search capabilities)
Create custom controls

Knowing about handlers is going a step further in your technical skills in .NET MAUI, so I highly recommend learning about them in depth.

Ways to Customize Handlers in .NET MAUI

In .NET MAUI, there are several ways to customize a handler, including:

Mapper.AppendToMapping(): To perform customizations after the default mapping
CommandMapper.AppendToMapping(): To intercept actions
HandlerChanged: For a specific instance

In the above list you may have noticed the term Mapping, which refers to a dictionary of configurations that define how a control is rendered.

The way we connect to the handler will define which instances in the application we will affect through the handler. Let’s do some practical exercises to better understand them, solving common but simple problems in customizing native controls.

For these demonstrations, I created a new project using the .NET MAUI App template without sample content. Next, I created a folder called Handlers and inside a static class called HandlerCustomizations:

public static class HandlerCustomizations
{
    public static void RegisterHandlers()
    {
        
    }
}

Finally, you need to register the new class in Program.cs as follows:

public static class MauiProgram
{
    public static MauiApp CreateMauiApp()
    {
        var builder = MauiApp.CreateBuilder();
        builder
            .UseMauiApp<App>()
            .ConfigureMauiHandlers(_ =>
            {                
                HandlerCustomizations.RegisterHandlers();
            })
            ...
    }
}

With the above ready, we are now prepared to analyze common use cases for handlers.

Removing Underline or Border from an Entry

Let’s start with the most used handler across the .NET MAUI ecosystem. The problem is that .NET MAUI does not currently expose a property that allows removing the default lines on each native platform. For example, on Android a line appears under the text, on iOS a gray rectangle is shown and on Windows a border.

The handler code looks like the following:

        Microsoft.Maui.Handlers.EntryHandler.Mapper.AppendToMapping("BorderlessEntry", (handler, view) =>
        {
#if ANDROID
            handler.PlatformView.BackgroundTintList =
                Android.Content.Res.ColorStateList.ValueOf(Android.Graphics.Color.Transparent);
#elif IOS || MACCATALYST
            handler.PlatformView.BorderStyle = UIKit.UITextBorderStyle.None;
#elif WINDOWS
            handler.PlatformView.BorderThickness = new Microsoft.UI.Xaml.Thickness(0);
#endif
        });

In the code above, we access the control mapper Entry, which is the configuration dictionary, and add an extra customization called BorderlessEntry. You can also notice a callback that handles two parameters: handler, which is the access to the native control, and view, which is the Entry of .NET MAUI.

In each conditional compilation directive, a different behavior is specified according to the platform, using handler.PlatformView, and the native properties of each control. In the case of Android, we change the border color to transparent using BackgroundTintList. On iOS, the border is completely removed using the native property BorderStyle. And on Windows, BorderThickness is used to indicate a border thickness of zero.

In the image above you can see the Entry control used without an underline on Android, which allows combining with other controls to improve the visual appearance.

Modifying Properties of a Button

Sometimes applications require a controlled visual style for buttons. For example, on Android the normal behavior is to add elevation and a ripple effect to all buttons. In .NET MAUI, there is no way to control these values natively directly on the control, so we can choose to use a handler again:

Microsoft.Maui.Handlers.ButtonHandler.Mapper.AppendToMapping(
    nameof(Microsoft.Maui.IButton.Background), (handler, view) =>
{
#if ANDROID
    handler.PlatformView.StateListAnimator = null;
    handler.PlatformView.Elevation = 0;

    var rippleColor = Android.Graphics.Color.Argb(80, 255, 0, 0);
    var colorStateList = Android.Content.Res.ColorStateList.ValueOf(rippleColor);

    if (handler.PlatformView.Background
                        is Android.Graphics.Drawables.RippleDrawable rippleDrawable)
        rippleDrawable.SetColor(colorStateList);
#elif IOS || MACCATALYST
            handler.PlatformView.Alpha = 1.0f;
            handler.PlatformView.AdjustsImageWhenHighlighted = true;
#endif
});

In the code above, these Android properties are modified:

StateListAnimator: Removes the elevation animation when pressed
rippleDrawable.SetColor: Overrides the ripple effect color

When running the application, we can see a customized ripple effect according to the defined ink color:

The previous handler demonstrates how to change default control effects using native properties.

Select All Text When Receiving Focus in an Entry

The following handler, which proves extremely useful, allows users to select all text in a Entry control when focusing, to then perform actions such as deleting the text, copying it, etc.

Microsoft.Maui.Handlers.EntryHandler.Mapper.AppendToMapping(
    "SelectAllOnFocus", (handler, view) =>
    {
#if ANDROID        
        handler.PlatformView.FocusChange += (_, e) =>
        {
            if (e.HasFocus)
                handler.PlatformView.Post(handler.PlatformView.SelectAll);
        };
#elif IOS || MACCATALYST        
        handler.PlatformView.EditingDidBegin += (_, _) =>
            Microsoft.Maui.ApplicationModel.MainThread.BeginInvokeOnMainThread(
                () => handler.PlatformView.SelectAll(null));
#endif
    });

The method Post on Android allows queuing the select-all action so the text selection is not overwritten. On the other hand on iOS the method SelectAll is invoked to carry out the selection, in the subscription to the EditingDidBegin event. This is because there is no FocusChange event similar to Android’s.

Disabling the Keyboard of an Entry Control

The following useful .NET MAUI handler is the one that allows disabling the keyboard of an Entry control. Disabling keyboards is essential when creating applications where we will have a custom keyboard, such as a calculator app or a PIN input, and we want to show text input controls without the on-screen keyboard appearing.

To implement it, we will do it as follows:

Microsoft.Maui.Handlers.EntryHandler.Mapper.AppendToMapping(
    "DisableKeyboard", (handler, view) =>
    {
        if (view.AutomationId != "no-keyboard") return;

#if ANDROID        
        handler.PlatformView.ShowSoftInputOnFocus = false;
#elif IOS || MACCATALYST        
        handler.PlatformView.InputView = new UIKit.UIView();
#endif
    });

In the previous code, in the Android section the property ShowSoftInputOnFocus with a false value prevents the keyboard from appearing when focusing the field, while on the iOS side, InputView replaces the keyboard with an empty view, preventing the keyboard from appearing.

DatePicker/TimePicker: Text Alignment

A common case that users want in mobile applications is to center the text in the DatePicker and TimePicker controls, which is not possible to do natively from XAML code in .NET MAUI.

To achieve this, we can once again resort to handlers. On this occasion, the code used will be the following:

Microsoft.Maui.Handlers.DatePickerHandler.Mapper.AppendToMapping(
    "CenterDateText", (handler, view) =>
    {
#if ANDROID
        handler.PlatformView.Gravity = Android.Views.GravityFlags.Center;
#elif IOS || MACCATALYST                    
        handler.PlatformView.TextAlignment = UIKit.UITextAlignment.Center;
#endif
    });

Microsoft.Maui.Handlers.TimePickerHandler.Mapper.AppendToMapping(
    "CenterTimeText", (handler, view) =>
    {
#if ANDROID
        handler.PlatformView.Gravity = Android.Views.GravityFlags.Center;
#elif IOS || MACCATALYST
        handler.PlatformView.TextAlignment = UIKit.UITextAlignment.Center;
#endif
    });

In the handler, the property Gravity is used on Android for both DatePicker and TimePicker, which allows aligning the text to the position we need. In the case of iOS, the TextAlignment property is used, which allows the same result:

Without a doubt, it is a small handler that can solve a common visual problem.

Entry with Native Validation

Let’s move on to a more complex case related to the usefulness of handlers. Imagine a scenario where you need to apply some kind of validation to all controls in the application. To achieve this, you can combine the use of events like TextChanged on Android and EditingChanged on iOS:

Microsoft.Maui.Handlers.EntryHandler.Mapper.AppendToMapping(
    "NativeEmailValidation", (handler, view) =>
    {                    
#if ANDROID
        handler.PlatformView.TextChanged += (_, e) =>
        {
            var text = e.Text?.ToString() ?? string.Empty;
            var isValid = System.Text.RegularExpressions.Regex.IsMatch(
                text, @"^[^@\s]+@[^@\s]+\.[^@\s]+$");

            handler.PlatformView.Error =
                (isValid || text.Length == 0) ? null : "Invalid Email";
        };
#elif IOS || MACCATALYST
                    handler.PlatformView.EditingChanged += (_, _) =>
                    {
                        var text = handler.PlatformView.Text ?? string.Empty;
                        var isValid = System.Text.RegularExpressions.Regex.IsMatch(
                            text, @"^[^@\s]+@[^@\s]+\.[^@\s]+$");

                        handler.PlatformView.Layer.CornerRadius = 4f;
                        handler.PlatformView.Layer.BorderColor = (isValid || text.Length == 0)
                            ? UIKit.UIColor.Clear.CGColor
                            : UIKit.UIColor.SystemRed.CGColor;
                        handler.PlatformView.Layer.BorderWidth =
                            (isValid || text.Length == 0) ? 0f : 1f;
                    };
#endif
    });

Within the lambda expression that handles the text change, a regular expression validation is performed. In this example, an email address is validated to be correctly written, but any other validation can be carried out.

Finally, in the Android case, the Error property is used to indicate there is an error, while on iOS the control is colored in a more customized way:

The above approach leads us to imagine scenarios with more complexity and related to events, such as saving to a database after editing a text, preventing prohibited words from a dictionary, etc.

Conclusion

Throughout this article, you have been able to see the usefulness of handlers in real, everyday scenarios. They are a controlled way to modify native properties of controls without having to wrestle with native classes on each platform.

As a final point, in my experience, if you need a higher degree of customization and want something that has been tested across all platforms, I recommend that instead of creating handlers you use prebuilt controls that have the capabilities you need, such as those from the Progress Telerik UI for .NET MAUI suite of controls, which include the functionalities mentioned in the article and many more, without the need to create custom handlers. See you in the next article!

Building a Healthcare UI with .NET MAUI

2026-07-20T21:05:40Z

You’ve probably seen a healthcare interface when you were scheduling a recent doctor’s appointment. Let’s see how to build one in .NET MAUI!

One of the biggest challenges when creating app interfaces is when design elements step a bit outside the conventional. These kinds of designs push us to think differently and get more creative when translating them into code.

In this article, I’m bringing you a healthcare UI inspired by this Dribbble doctor appointment UI design. I have to admit, it’s one of my favorites! It gives us the perfect opportunity to apply some cool tricks that make our design look impressive and truly out of the box.

We’ll be using some Progress Telerik UI for .NET MAUI components, along with a CollectionView, but this time, we’ll simulate different columns to achieve the layout we want. Plus, we’ll rely on three properties that will become our best friends in this UI: Rotation, TranslationY and TranslationX.

So grab your cup of coffee or hot chocolate ☕ and let’s build this together! ✨

How Will the Explanation Work?

So you can understand where we’re headed, I’ll explain how the process will work:

➖ Code explanation per block: In addition to the text explanation, each block will include the exact code snippet you need to write to achieve the result.

➖ Step-by-step visual progress: Each explanation will have its corresponding screenshot, so you can see the progress as we build the UI.

⚠️ For this design, we took inspiration from an original Dribbble UI but made some adaptations and adjustments to align it with the goals of this article.

Environment Setup

Breaking Down the Design into Blocks

To make this easier to follow, I’ve divided the design into clear blocks. We’ll build each part one at a time, in the order you see below.

Alright, now that we’ve broken our UI into clear blocks, it’s time to bring everything to life with some code! Let’s start building each section step by step.

Block 1. Intro

This first block is one of my favorites, as it brings a unique touch to the UI. It plays with the way the information is presented and introduces a slightly different style for the Get Started button. Since this block represents a full page, we’ll break this explanation down into the following steps:

Creating the Main Page with a Background Image

Let’s start by creating a page called DoctorIntroPage.xaml. This page will contain a Grid as the main layout. The grid will have only one row, which will allow us to play with the overlapping effect between the background image and the rest of the elements. Right there, you’ll also see exactly where the background image is added.

Rotated Cards

Now, to add the cards, we’ll use one of my favorite Telerik controls: Telerik Border for .NET MAUI. Make sure you follow the steps indicated in the Environment Setup section at the beginning of the article. After that, you just need to add the corresponding namespace:

xmlns:telerik="clr-namespace:Telerik.Maui.Controls;assembly=Telerik.Maui.Controls"

To achieve the card effect, I mainly relied on the Rotation property. One card uses a value of 50, while the other uses -12, creating the effect of opposite rotations between them. In addition, I used the TranslationX and TranslationY properties to position the cards and make the overlapping effect more noticeable. In code, it would look like this:

Finally, Let’s Add the Get Started Button

To achieve this, we’ll use a Telerik Border as a container to create a rounded black background behind the button. Inside it, we’ll place a Telerik RadButton.

Since we’ve already added the namespace for RadBorder, you’re all set, there’s no need to add anything else to use RadButton.

We’ve finished this first block, and we already have our first page created! Now, let’s move on to the second block and keep building!

Block 2. Header

We’ve finished this first section, and our first page is already up and running! Now, let’s move on to the second section.

This time, we’re going to create a page called DoctorDetailsPage.xaml. Set the background color of this page to #f4f5fe and let’s define the main layout using a Grid. This Grid will have five rows and three columns, as shown below:

Now, let’s add the main image along with the two text elements displayed on top of it. Place this code in the section indicated by the comment: .

✍️ To help create the overlapping effect across the Grid areas, I used the TranslationY property to position the element exactly where needed.

For this second block, we’ll work with several elements, all contained within a white background with rounded top corners. This is where Telerik RadBorder plays a key role.

Inside this container, we’ll include:

Rounded and rectangular buttons (using Telerik RadButton)
Simple labels and styled text (using FormattedText)

White Background with Rounded Corners

To get started with RadBorder, add the corresponding namespace:

xmlns:telerik="clr-namespace:Telerik.Maui.Controls;assembly=Telerik.Maui.Controls"

Once that’s set up, add the component as shown below.

Finally, let’s add all the remaining elements inside the Grid. Here are a few key points to keep in mind:

➖ For the buttons, we’ll use Telerik RadButton. Since you already added the namespace earlier, there’s no need to include it again.

➖ To achieve a rounded button, simply set the WidthRequest and HeightRequest to the same value, and define the CornerRadius as half of that value.

➖ For the label with multiple colors, instead of using several separate labels, we’ll use FormattedText. This helps keep the code cleaner and more efficient.

Woohoo!!! Our first screen is ready. Now, in this third block, we’ll start building the second screen packed with some really interesting elements!

Let’s begin with the main layout. We’ll create a three row Grid where we’ll position the header image, a VerticalStackLayout to hold the plans and benefits and the footer.

To get started, we’ll focus on placing the header image and the primary label.

Header Image

You can either use an image that already has a diagonal effect or take a regular image and create that effect through code. For this demo, I used a regular image and rotated it to show you how it works. This effect comes from combining Rotation, TranslationY, and TranslationX properties, along with adjusting the width and height.

Main Label

Before adding the label itself, we’ll set up the layout that will contain it. Add a VerticalStackLayout, and inside it place a Label with FormattedText. This allows you to apply different colors, sizes and styles within a single label, keeping your UI clean and flexible.

4. Benefits & Plans

For this block, we’ll also use Telerik RadBorder, so make sure to include the same namespace used on the previous page here as well. This section is composed of the following elements:

➖ Benefits: We’ll use a CollectionView so the information can be loaded from a flexible list, instead of adding each item manually in XAML. Each item will include a checkmark image and a label with the benefit name.

➖Plans: We’ll also use a CollectionView for the plan selector. Each item will be displayed inside a box with rounded blue borders and will contain the plan name, the discount, the current price and the previous price.

`5. Footer`

Oh yeah! We’ve reached the final block, the footer. This section includes a centered label and a button (using Telerik RadButton). To add it, go to the main Grid of this screen and locate the comment .

Then, place the following code in that section:

And that’s it—we’re all done! Below, you can see the final result of both screens.

`Conclusion`

And that’s it! In this article, we explored how to build a travel UI using .NET MAUI with XAML, inspired by a modern design.

I hope this guide helps you take these ideas and practices and apply them to your own UI implementations, especially when working with layouts, overlapping elements, and Telerik components.

If you have any questions or would like me to dive deeper into a specific part, feel free to leave a comment, I’ll be happy to help!

See you in the next article! ‍♀️

Remember, Telerik UI for .NET MAUI comes with a free 30-day trial. See what you can create:

Try Now



Replicating a Ticket Screen in .NET MAUI
2026-06-22T17:00:48Z
Travel! It’s one of our favorite things, and here is how to build a flight ticket screen in .NET MAUI.
I dare to say that one of the most loved hobbies, and one of the reasons we want vacations to arrive quickly, is traveling.  Guilty as charged, haha.
But personally, beyond the trip itself, I really enjoy being involved in the whole experience—from packing my bags to having my flight ticket in an app. But you know what’s the most fun part? Besides having my ticket in an app, I can also combine my passion for traveling with my profession, by programming and replicating an app that brings these two things together.
For this reason, in this article you will continue strengthening your UI skills in .NET MAUI. Get it out of your head that you can’t build beautiful and creative UIs, because you absolutely can.  Today we will replicate a ticket UI inspired by a Dribbble design, which will allow us to practice using several .NET MAUI components such as Shapes, Grid, Label, and especially a super special component: the .NET MAUI Border from Progress Telerik UI. All of this in a very simple way. We’ll break it down step by step!
How will the explanation work?
So you can understand everything 100%, I’ll explain how the process will work:
➖Visual diagram: Before we start, you’ll see a diagram with a screenshot of the design we want to achieve. This design will be divided into blocks, each identified with a name and a color. Each block will be explained individually.
➖Code explanation per block: In addition to the text explanation, each block will include the exact code snippet you need to write to achieve the result.
➖Step-by-step visual progress: Each explanation will have its corresponding screenshot, so you can see the progress as we build the UI.
⚠️ For the purposes of these articles, there will be some changes to the original user interface.
Breaking Down the Dribbble Design into Blocks
To make this easier to follow, I’ve divided the original design into clear blocks. We’ll build each part one at a time, in the order you see below.
1. Main Border Block
Let’s start building the first block. This block is the most important one, since it contains all the elements of the remaining blocks.
To replicate the element in this block, we need a control that allows us to add a background color and apply rounded corners.
We will use the RadBorder control from Progress Telerik. This control makes it easy to manage border color, thickness and even apply different corner radius values for each side. It’s super useful!
To use it, keep the following in mind:
If you don’t have a Telerik account yet, you can create one for free. You’ll get access to a trial license so you can explore not only RadBorder, but all the Telerik UI for .NET MAUI controls.
You need to install Telerik UI for .NET MAUI. This is a one-time setup, meaning you don’t need to do it for every component you use. (If you don’t have it installed yet, I’ve included an article where it is explained step by step how to set it up in both Visual Studio and Visual Studio Code).
Once you have these two points ready, go to your XAML and follow these steps:
Add the following namespace:
xmlns:telerik="clr-namespace:Telerik.Maui.Controls;assembly=Telerik.Maui.Controls"
Add a RadBorder to serve as the main container. Configure it with a background color of #29b7fc, a CornerRadius of 30, and apply Padding and Margin to control internal and external spacing, respectively.
 
    
     


2. Passenger Information Block
This second block contains approximately 95% of the remaining UI design. This is where we will display the ticket details, such as the airline name, origin and destination (from, to), gate and the customer’s name.
We will start by adding a Grid. This will allow us, in the next block, to apply the rounded side cut effect that makes the design resemble a ticket.
⚠️ Note: This Grid must be added exactly on the line in the previous code block that says:


" 
     

Now, add a border with a white background. We will continue using the Telerik RadBorder control to maintain design consistency.
     

     
    
     
    
    
Inside this RadBorder, we will add another Grid to organize all the ticket information.
This Grid will have three columns and fourteen rows, giving us the structure needed to properly arrange each element in the UI.

 
    .
Conclusion
And that’s it!  In this article, we explored how to build a ticket screen using .NET MAUI with XAML, recreating a modern and visually appealing boarding pass design.
I hope this guide helps you understand how to approach similar UI challenges and inspires you to recreate more complex designs in your own .NET MAUI applications.
If you have any questions or would like me to explore a specific part in more detail, feel free to leave a comment—I’ll be happy to help! 
See you in the next article! ‍♀️
If you want to learn more about Ellipse in .NET MAUI, I invite you to read the Microsoft Learn article. It is a very useful element for creating creative UI designs.
Additional Resources
I invite you to learn more about the Telerik RadBorder.
Here you can explore the main features and benefits of the product.
Here you can review its technical implementation.
And, don’t forget: You can try Telerik UI for .NET MAUI free for 30 days. 


Creating Localized .NET MAUI Applications
2026-06-17T20:17:33Z
Reach more people with your apps: Learn how to localize .NET MAUI applications, including XAML text elements, view models and prebuilt Telerik controls for .NET MAUI.
Making our mobile applications accessible to users who speak a different language than us can make a huge difference in their usage. Fortunately, .NET MAUI offers the power to deliver multi-language applications thanks to the use of resources files.
Likewise, prebuilt controls such as those from Progress Telerik UI for .NET MAUI can be adapted to support localization, allowing you to build and deliver native language experiences quickly. Let’s see how to do it!
Understanding Localization in .NET MAUI Apps
Localization is the process of enabling an application to support different languages and cultures; that is, it’s not only about translating text strings to other languages, but also adapting date formats, numbers, etc.
There are some key elements for localizing applications, the first of which are the resource files .resx, which are XML files composed of key-value pairs for each language.
Likewise, we have the class CultureInfo, which represents the user’s cultural information. Finally, the class ResourceManager is a class that allows us at runtime to retrieve localized strings according to the language selected on the user’s device.
Creating a Sample App to Localize
To show you in a practical way how to integrate localization into your own projects, let’s create a test project. To do so, create a new .NET MAUI project without example content, and follow the installation guide to add Telerik controls for .NET MAUI to the project.
Also install the NuGet package CommunityToolkit.Mvvm to create viewmodels cleanly. Once the project has been configured, create a data model to represent a Product:
public class Product
{
    public string Name { get; set; } = string.Empty;
    public string Category { get; set; } = string.Empty;
    public decimal Price { get; set; }
    public DateTime CreatedDate { get; set; }
}
Next, let’s create a viewmodel that will display information in the UI for a set of fictitious products:
public partial class MainViewModel : ObservableObject
{
    [ObservableProperty]
    private ObservableCollection<Product> products = [];

    [ObservableProperty]
    private DateTime? selectedDate;

    public MainViewModel()
    {
        SelectedDate = DateTime.Now;
        LoadProducts();
    }

    private void LoadProducts()
    {
        Products =
        [
            new Product
            {
                Name = "Laptop Pro 15",
                Category = "Electronics",
                Price = 1299.99m,
                CreatedDate = new DateTime(2026, 1, 15)
            },
            new Product
            {
                Name = "Running Shoes",
                Category = "Clothing",
                Price = 89.95m,
                CreatedDate = new DateTime(2026, 2, 20)
            },
            new Product
            {
                Name = "Organic Coffee Beans",
                Category = "Food",
                Price = 24.50m,
                CreatedDate = new DateTime(2026, 3, 10)
            },
            new Product
            {
                Name = "Wireless Mouse",
                Category = "Electronics",
                Price = 45.00m,
                CreatedDate = new DateTime(2025, 12, 5)
            },
            new Product
            {
                Name = "Winter Jacket",
                Category = "Clothing",
                Price = 159.99m,
                CreatedDate = new DateTime(2026, 1, 28)
            }
        ];
    }
}
In the code above, you can notice that hard-coded strings in English are used to display information to users only in that language. Now, let’s create an example UI, using a .NET MAUI RadDatePicker (which is an enhanced DatePicker) and a MAUI RadDataGrid to easily display data tables:
<Grid
 Padding="16"
 RowDefinitions="Auto,Auto,*"
 RowSpacing="12">
 
 <Label
     FontAttributes="Bold"
     FontSize="20"
     HorizontalOptions="Center"
     Text="Welcome to the app" />
 
 <HorizontalStackLayout
     Grid.Row="1"
     HorizontalOptions="Center"
     Spacing="10">
     <Label
         FontSize="16"
         Text="Created Date"
         VerticalOptions="Center" />
     <telerik:RadDatePicker
         Date="{Binding SelectedDate}"         
         WidthRequest="250" />
 HorizontalStackLayout>
 
 <telerik:RadDataGrid
     Grid.Row="2"
     AutoGenerateColumns="False"
     ItemsSource="{Binding Products}"
     UserFilterMode="Auto"
     UserGroupMode="Auto"
     UserSortMode="Auto">
     <telerik:RadDataGrid.Columns>
         <telerik:DataGridTextColumn HeaderText="Product Name" PropertyName="Name" />
         <telerik:DataGridTextColumn HeaderText="Category" PropertyName="Category" />
         <telerik:DataGridNumericalColumn
             CellContentFormat="{}{0:C}"
             HeaderText="Price"
             PropertyName="Price" />
         <telerik:DataGridDateColumn
             CellContentFormat="{}{0:d}"
             HeaderText="Created Date"
             PropertyName="CreatedDate" />
     telerik:RadDataGrid.Columns>
 telerik:RadDataGrid>
Grid>
Don’t forget to register both MainPage and MainPageViewModel in the dependency container:
public static class MauiProgram
{
    public static MauiApp CreateMauiApp()
    {
        var builder = MauiApp.CreateBuilder();       
        ...
        builder.Services.AddTransient<MainPage>();
        builder.Services.AddTransient<MainViewModel>();
...
        return builder.Build();
    }
}
Finally, let’s inject the view model into the page’s code-behind, while assigning the injected reference to BindingContext:
public partial class MainPage : ContentPage
{
    public MainPage(MainViewModel viewModel)
    {
        InitializeComponent();
        BindingContext = viewModel;
    }
}
After implementing the above changes, we will have a UI like the following:
As we anticipated, all the UI content is in English. Some text chunks we might want to internationalize could be the page title, the welcome message, column headers, product categories, etc. Let’s see how to achieve it.
Creating Resource Files to Localize a .NET MAUI App
Localization of .NET applications is based on resource files. To create these files, you must start by creating a file with the extension .resx, which will contain the strings in the original language.
In our example, we are going to create a new folder Resources/Strings, and inside create a file named AppStrings.resx. You can achieve this using the context menu on the created folder, selecting Add | New Item. Then, in the search box enter the term resources, which will filter the template for the resource file:
Once you have created the file, you can open it and start adding the application’s strings in their original language, using the + button. This will open a new window where you can enter information such as the string key, the data type, the value and optionally comments:
Another way to add strings more quickly is to paste them in the format: Key name + tab + value. For example, you can copy and paste the following content, and paste it directly into the resource editor, which will create a series of rows in the file:
LanguageLabelLanguage
ProductNameProduct Name
CategoryCategory
PricePrice
CreatedDateCreated Date
SelectLanguageSelect a language
ElectronicsElectronics
ClothingClothing
FoodFood
FilterProductsFilter Products
WelcomeWelcome to the localized app
After having the base file, the next step is to create an additional resource file for each translation you want to perform. For the example, I will create a new file in Resources/Strings called AppStrings.es.resx. You can notice that each new file must be named the same as the main one, adding the ISO code of the language you want to translate to.
When you open the file, you will see that a new column has been added, where you can enter the information of the file, as in the following example:
With the resource files created, it is time to connect the strings with the UI.
Localizing Elements in the UI
With the strings correctly localized, let’s go to the UI page. There, you need to add a namespace for the path where the localized files are located, similar to this:
<ContentPage
    ...
    xmlns:resx="clr-namespace:MauiLocalizedApps.Resources.Strings">
Then, on each element you want to localize you must use the markup extension x:Static, using the key of the resource you want to replace. This is an example of the Label control corresponding to the localized welcome message:
<Label
...
    Text="{x:Static resx:AppStrings.Welcome}" />
Other strings we will replace will be the creation date and the welcome one, as shown below:
<ContentPage ...
    Title="{x:Static resx:AppStrings.AppTitle}">

 <Grid
     Padding="16"
     RowDefinitions="Auto,Auto,*"
     RowSpacing="12">
     
     <Label
         FontAttributes="Bold"
         FontSize="20"
         HorizontalOptions="Center"
         Text="{x:Static resx:AppStrings.Welcome}" />
     
     <HorizontalStackLayout
         Grid.Row="1"
         HorizontalOptions="Center"
         Spacing="10">
         <Label
             FontSize="16"
             Text="{x:Static resx:AppStrings.CreatedDate}"
             VerticalOptions="Center" />
         <telerik:RadDatePicker Date="{Binding SelectedDate}" WidthRequest="250" />
     HorizontalStackLayout>
     ...
Grid>     
After applying the changes and changing the device language to Spanish, we get the following result:
Now, let’s see how to localize the view model strings.
Localizing Data Strings from the viewmodel
In addition to localizing elements in the XAML file, we can also load translated strings that are found in the view model. For example, suppose we want to translate the names of the categories shown in the DataGrid.
To achieve this, we can use the static class that is created when we create a resource file, which takes the same name as the created file. In our case it is called AppStrings, and we will use it as follows:
private void LoadProducts()
{
    Products =
    [
        new Product
        {
            ...
            Category = AppStrings.Electronics
        },
        new Product
        {
            ...
            Category = AppStrings.Clothing,
        },
        ...
    ];
}
With the previous changes, we have seen how to display translated strings to the user found in XAML files and view models:
However, we still have strings in the graphical controls that have not been localized. Let’s see how to translate them.
Localizing Internal Strings of Telerik Controls for .NET MAUI
In case you also want to localize the strings of Telerik controls, such as those that show options in the DataGrid, you can see all the keys used in the controls on the .NET MAUI globalization and localization page. On that page you will find links for each control and their respective strings.
For example, to localize the .NET MAUI DataGrid, we must copy a series of keys that start with DataGrid_..., such as DataGrid_DistinctValues_SelectAll, DataGrid_Filter_ApplyFilter, DataGrid_Filter_ResetFilter, etc. These are the keys that I will add to the file AppStrings.resx.
After doing this, you must create a class that inherits from TelerikLocalizationManager, like the one shown below:
internal class CustomLocalizationManager : TelerikLocalizationManager
{
    public override string GetString(string key)
    {
        string? localizedValue = AppStrings.ResourceManager.GetString(
            key, CultureInfo.CurrentUICulture);

        if (!string.IsNullOrEmpty(localizedValue))
        {
            return localizedValue;
        }

        return base.GetString(key);
    }
}
In the code above, we use the GetString method to attempt to retrieve a key and its translated value in the device’s language. If a translated string is found it is returned; otherwise the original value is returned.
Finally, you must register the created manager in MauiProgram.cs as follows:
public static MauiApp CreateMauiApp()
{
    var builder = MauiApp.CreateBuilder();
    ...
    TelerikLocalizationManager.Manager = new CustomLocalizationManager();
    ...
    return builder.Build();
}
When running the app, we will get the following result:
In the image above you can see how the DataGrid options are displayed translated into Spanish. With this, we have finished localizing the strings in our application.
Conclusion
Throughout this article you’ve seen how to localize .NET MAUI applications. You’ve seen how to translate text elements found in XAML files, view models and even prebuilt Telerik controls for .NET MAUI. Now it’s your time to reach more people with your apps by using localization through resource files.
Try out Telerik UI for .NET MAUI free for 30 days.
 
Try Now


Getting Contact Information with .NET MAUI
2026-06-08T17:06:18Z
Let users easily pull contact info (like name, number, email) from one app and save it to their device’s contact list in .NET MAUI.
Let’s be honest, the only “accessory” you take with you everywhere—no matter the activity you’re doing or the type of event it is, and something that never bothers you to carry—is your mobile device. 
OK … and what does this mean? It means that a large part of the things you need to do in your day-to-day life are covered by your phone: from super basic operations like calculating amounts and saving contacts, to talking with your friends or even ordering food.
Now, think about this: imagine you have an application with a form where you need to enter contact information—the same information you already saved on your phone when creating that contact. Having to type everything again can feel tedious, right?
This is where things get interesting. A simple action like saving a contact opens the door for multiple applications to obtain that information and work together with the data that already exists on the device. If your app could “pull” that information directly, without the user having to type it again, that would be a win! 
So get excited, because in this article I’ll show you how to obtain that contact information to use it in your .NET MAUI apps. 
What Do I Need Before I Start?
Before we begin, it’s important to configure a few platform-specific steps. Let’s go through each one, step by step:
Android
To be able to read contacts, you must explicitly request the READ_CONTACTS permission. There are three different ways to add this permission on Android:
Option 1: Add the permission directly in the AndroidManifest.xml
Go to Platforms → Android, open the AndroidManifest.xml file, and add the following node:

Option 2: Use the Android Manifest graphical editor
Go to Platforms → Android, double-click the AndroidManifest.xml file, and locate the Required permissions section. Find the permission labeled READ_CONTACTS and simply check the option, as shown below.
Option 3: Add the assembly-based permission
Go to Platforms → Android → MainApplication.cs and add the permission as follows:
[assembly: UsesPermission(Android.Manifest.Permission.ReadContacts)]
iOS/Mac Catalyst
On iOS and Mac Catalyst, we also need a very similar configuration to be able to access contacts. Follow these steps:
Step 1:
Right-click on Platforms → iOS → Info.plist and on Platforms → MacCatalyst → Info.plist (yes, each configuration is done per platform) and open the file with the editor.
Step 2:
Once the file is open, add the NSContactsUsageDescription key along with its description. This step is mandatory to comply with Apple’s guidelines. Keep in mind that this text must be very precise, as it will be the message shown to the user when the app requests permission to access their contacts.
NSContactsUsageDescription
This app needs access to your contacts to select a contact and retrieve its information.
Windows
Contact picking is not supported on Windows.
Let’s Start!
All set! We’ve prepared the initial configuration to get started! 
.NET MAUI provides the IContacts interface, which allows us to select and retrieve information from the contacts stored on the device.
This interface is part of the Microsoft.Maui.ApplicationModel.Communication namespace and is available through the Default property, which gives us access to the ready-to-use implementation provided by .NET MAUI.
Important Considerations for iOS and macOS
There is a namespace conflict because multiple classes named Contacts exist. As a result, if you write only Contacts, .NET doesn’t know exactly which one you are referring to, and you might think there is an issue with your code when in reality you are just using the wrong class.
What’s the Solution?
To avoid this conflict, you must tell .NET exactly where the class you want to use comes from. This is done by using the fully qualified name:
Microsoft.Maui.ApplicationModel.Communication.Contacts
A Cleaner Solution
There is also a cleaner way to handle this. Instead of writing the full name every time you use it, you can create an alias with a using directive, like this:
using Communication = Microsoft.Maui.ApplicationModel.Communication;
This gives the namespace a shorter name. Then, you can use that alias directly in your code:
var contact = await Communication.Contacts.Default.PickContactAsync();
What Contact Information Can We Retrieve Exactly?
Let’s take a look at the data that can be retrieved from a contact. The following are the available fields:
Id: The internal identifier of the contact on the device.
NamePrefix: The name prefix (Mr., Mrs., Eng., Dr., etc.)
GivenName: The contact’s first name.
MiddleName: The contact’s middle name.
FamilyName: The contact’s last name.
NameSuffix: The name suffix (if any), for example, Jr.
Phones: The list of phone numbers associated with the contact.
Emails: The list of email addresses associated with the contact.
DisplayName: The full name displayed on the phone. For example: Eng. Maris Lopez.
Getting Your Device Contact List
To retrieve the full list of contacts stored on your device, you can use the GetAllAsync() method. This method returns a collection containing all available contacts.
Below is an example showing how to retrieve them:
public async IAsyncEnumerable GetContactNames() 
{ 
    var contacts = await Contacts.Default.GetAllAsync(); 
// No contacts 
if (contacts == null) 
    yield break;
 
foreach (var contact in contacts) 
    yield return contact.DisplayName; 
}
But How Can I Select a Specific Contact? 
To ask the user to select a specific contact from their device, we use the PickContactAsync() method. This method opens the system’s contact list, where the user can simply choose a contact.
⚠️ If the user does not select any contact or cancels the action, the method returns null.
In the following example, you can see how to retrieve the different pieces of information from the selected contact:
private async void SelectContactButton_Clicked(object sender, EventArgs e) 
{ 
    try 
    { 
    var contact = await Contacts.Default.PickContactAsync(); 
    
    if (contact == null) 
    return; 
    string id = contact.Id; 
    string namePrefix = contact.NamePrefix; 
    string givenName = contact.GivenName; 
    string middleName = contact.MiddleName; 
    string familyName = contact.FamilyName; 
    string nameSuffix = contact.NameSuffix; 
    string displayName = contact.DisplayName; 
    List phones = contact.Phones; 
    List emails = contact.Emails; 
    }
    
    catch (Exception ex) 
    { 
    // Most likely permission denied 
    } 
}
✍️ Platform Differences You Should Know
Android
GetAllAsync does not support the cancellationToken parameter.
iOS / Mac Catalyst
GetAllAsync does not support the cancellationToken parameter.
The DisplayName property is not supported natively. Instead, its value is constructed using GivenName FamilyName.
Conclusion
And that’s it!  In this article, you learned how to work with device contacts in .NET MAUI, from selecting a specific contact to retrieving the full contact list. You also explored key platform differences and important considerations to keep in mind when targeting Windows, Android, iOS and Mac Catalyst.
With this knowledge, you can now integrate contact access into your apps in a clear and reliable way, improving the user experience while handling platform-specific behaviors correctly.
See you in the next article! ‍♀️✨
Reference
Code samples and explanations were based on the official documentation.
https://learn.microsoft.com/en-us/dotnet/maui/platform-integration/communication/contacts?view=net-maui-10.0&tabs=macios
Share Functionality in Your .NET MAUI Apps
Learn how to add share functionality to your .NET MAUI app whether in iOS, Android or Windows.

Telerik Blogs | Mobile| .NET MAUI

Getting Started with the .NET MAUI Map Control

What Is the Telerik UI for .NET MAUI Map Control?

Integrating the Telerik .NET MAUI Map Control into .NET MAUI Apps

Downloading the Map Data

Creating a Demo View Model

Displaying the Map in a ContentPage

Adding Labels to the Map

Customizing the Map

Enabling Country Selection

Conclusion

Creating an Account UI in .NET MAUI

How Will the Explanation Work?

Environment Setup

Breaking Down the Design

1. Flower Image Step

2. Welcome Info Step

Next, Let’s Add the Buttons

The Login Button

3. Create Account Step

Let’s Add the Form

Creating the Model

Adding It in XAML

Let’s Add the Button

Divider and Text

Social Buttons

Conclusion

Replicating a Room Sublet App UI with .NET MAUI

How Will the Explanation Work?

Environment Setup

Breaking Down the Design

1. Header and Background

Grid

Creating a ViewModel to Manage the Control

Creating the UI for the Application

Connecting the Content Page with the ViewModel

Taking a Photo with the CameraView Control

Recording a Video with CameraView

Testing the Application

Conclusion

Skeleton in .NET MAUI: What It Is and How to Use It

What Is a Skeleton?

✅ When Should You Use Skeletons?

When Waiting for API Responses

Screens with Heavy Images

❌ When Are Skeletons NOT Recommended?

When Data Is Not Actually Loading

For Instant Loads

Very Simple Screens

Meet the Telerik Skeleton

Adding the Namespace

Registering the Component

How to Use It?

Skeleton Types in the Telerik UI for .NET MAUI Library

Custom Skeleton View

️ Implementation

Conclusion

Ready to Try Telerik UI for .NET MAUI?

Building an Onboarding and Registration UI in .NET MAUI

How Will the Explanation Work?

Environment Setup

Breaking Down the Design

1. Onboarding

Adding the Gradient

Main Layout

The Halo

Main Images, Labels and Button

2. Sign Up

Main Layout of Sign Up

Title & Description

Let’s Add the Form!

Creating the Model

Adding It in XAML

Terms & Conditions and Button

Social Networks

Conclusion

4 Rating Card UI Ideas in .NET MAUI

Environment Setup

Let’s Start!

Creating the Example Structure

`5. Footer`

`Conclusion`