Telerik Blogs | Mobile

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.

DataGrids Are For... Medical Professionals

2026-08-31T16:23:26Z

DataGrids are excellent for providing both expansive data and filtered specifics, all in a usable and familiar setup. Just what the medical industry demands.

If you’re part of creating applications in the medical field, many (or most) of your users are going to be medical professionals: trained individuals who are licensed/certified to provide preventative, curative or rehabilitative healthcare to patients. This includes doctors, nurses, paramedics, dentists, their support staff (e.g., pharmacists) and other health professionals (e.g., physiotherapists).

Really, the group of users includes anyone who is certified to provide care (i.e., diagnosing, treating or managing) for either physical or mental illnesses. As broad as that group is, those professionals have a set of shared needs that your application will need to support.

For example, all medical professionals work in evidence-based environments where it’s difficult to have “too much” information … but where it’s essential to find the relevant details quickly. All these professionals (and the applications they use) must also adhere to various regulatory standards, including confidentiality and privacy requirements.

Many medical professionals are working in environments where time is critical and, as result, are environments best described as “high stress”: Too much to do, not enough time to do all of it, and frequent interruptions by new, high priority tasks. Speed and “ease of use” are essential here, but “ease of use” must also include flexibility to meet changing needs.

Finally, as that list of different people suggests, medical professionals work in highly collaborative environments, where they are constantly calling on other professionals in different specialties or departments to support their patients. The ability to share data is also critical.

You can support all those needs with the DataGrid component in your favorite Progress Telerik or Kendo UI library.

Reporting the Data

A medical professional will often need to handle large volumes of complex patient data, sometimes for multiple patients (doctor’s offices, hospital wards) and sometimes for a single patient (reviewing patient history). Because of the time-critical nature of the field, medical professionals need to get to the data quickly either in real time or near real time.

You can leverage the DataGrid OnRead event and support for Observables to load initial data quickly and to respond to changes in the data as those changes happen.

Being able to find “what matters” in large amounts of is also going to be important to your users. Out of the box, the DataGrid allows users to reorder and pin columns, filter data and group data to pull together what matters to them right now.

See, for example, the React Healthcare Management sample app, with a Progress KendoReact DataGrid displaying a filterable list of patients.

However, users will also want to be able quickly switch between DataGrid configurations they use frequently (grouping, column order, filters) rather than have to recreate those configurations from scratch: switching from viewing patient data grouped and sorted by patient or room to seeing the data grouped and organized by time (either historical dates or future activities). You can implement “one-click” switching between those settings by using DataGrid templates, or you can give users the ability to save DataGrid configurations that are useful to them.

Medical professionals are also going to value having key data highlighted as soon as that data is displayed. But you can also use the DataGrid conditional formatting (at the row or cell level) to highlight critical data. In addition, the DataGrid “scroll to item” option lets you programmatically put critical data on the screen for the user to review.

Much medical data is hierarchical in nature (for example, patients in a ward, patients attending a clinic in any time period, a single patient’s medical history). Your users can take advantage of the DataGrid’s ability to define new groups as needed by dragging and dropping columns.

And you can also leverage the DataGrid’s ability to create nested hierarchies to allow your users to view the groups that matter to them as soon as the data is displayed. The DataGrid’s hierarchical display then allows your users to expand those high-level groups to, for example, drill down to individual patients in a ward or to single events in a patient’s medical history.

Out of the box, the DataGrid (in addition to supporting assistive technologies like Jaws and ZoomText) is designed to be compliant with both the Web Content Accessibility Guidelines and the Americans with Disabilities Act accessibility guidelines. But you can also take advantage of the DataGrid’s ability to dynamically hide columns and mask sensitive data to let you control what data is seen by users (based, for example, on the user’s roles as retrieved from whatever authorization system their organization uses).

The DataGrid also integrates cleanly with server-side data processing, enabling you to decide what data you want to keep on the server and what you’re willing to send to the client.

Because medical professionals are working collaboratively with other professionals to deliver patient care, exporting data is often essential. Out of the box, users can easily support export DataGrid data in either CSV or PDF format. Users can choose to export a single page from the DataGrid, export a filtered subset of the data or export all the data in the grid. The DataGrid also supports integrating your own custom code into the export process so that you can control what data is shared, helping to protect sensitive data from leaving the security parameters of your application.

Because of the nature of the data in medical applications, you’ll also want to take advantage of DataGrid protection against Cross-Site Scripting attacks by using the HtmlEncode property to reduce the attack surface of your grid. When interacting with SQL data sources, using the DataGrid’s Parameter elements can help protect your application’s data from SQL injection attacks.

Updating the Data

In the evidence-based environment that medical professionals work in, reporting data is important. Equally important is capturing and recording data quickly without losing accuracy.

Users can rapidly update data within the grid without, for example, having to open a separate form (though you can enable popup forms for individual rows or even navigate to another form in order provide a UI that supports more intensive data entry). The DataGrid supports row-by-row editing to enable updating a single entry in the grid (including locking out cells in a row to prevent inadvertent changes). The DataGrid also support bulk editing that allows the user to update multiple rows before saving their changes with a single button click.

The shortcuts and keyboard navigation built into the DataGrid allow experienced users to move quickly through the grid and update data without having to reach for the mouse. On top of that, the new “smart” AI features in the DataGrid let users enter natural language queries to find or highlight rows that meet the criteria that users provide. The DataGrid has various AI assistants (Chat, Column and Toolbar) to go further in letting users describe what they want the grid to do and have the grid respond without the user having to get involved in the detailed mouse movements.

In a medical environment verifying that only valid entries are made in patient data (including, for example, medication dosages) is essential. The DataGrid has built-in support for validating data entry, including integrating your own custom validation to support maintaining data integrity.

To put it another way: With the DataGrid, you can create applications that integrate with any clinical workflow and provide medical professionals with the tools they need to better meet the needs of their job.

You saw the KendoReact Grid above. Check out the Telerik DevCraft suite of products to learn about the DataGrid in your favorite .NET or JavaScript flavor, like the Blazor Grid or the Angular Grid.

Get your hands on the whole suite free for 30 days:

Try Telerik DevCraft

DataGrids Are For... Financial Analysts

2026-08-24T15:39:48Z

As a financial analyst, you need the ability to explore your organization’s data—the DataGrid from Progress Telerik and Kendo UI gives you that ability.

If you are a financial analyst, your responsibility is to “understand the numbers”—not just in terms of what “the numbers” tell you about the past but what those numbers can tell you about the future. That understanding drives your ability both to make informed decisions yourself and to support others in making informed decisions.

As a financial analyst, you work with a variety of data from multiple sources, some of them external (market information, financial forecasts) and many of them internal (budgets, financial statements and other organization data). Essentially, you turn data into information so that information can drive decisions by becoming business intelligence.

Each of your organization’s applications manages part of your organization’s data and, as a result, can provide data that you need for that process. A data exploration tool, embedded in an application’s user interface or as a standalone tool, can automatically bring together the information for any area of business. That commitment to a set of data can eliminate the time needed to extract, transform and load the data that a more general-purpose financial analysis tool (e.g., Cube) requires. You just open the application and there’s your data, ready for you to work with.

That’s only useful to you, however, if the application’s user interface goes beyond simple transaction management—if the application includes a tool that enables you to work with and explore the data embedded in the application. You need a tool that, among other things, can:

Work with data from a wide variety of sources
Handle large amounts of data but remain responsive (you don’t want to have to wait on your data being displayed so that you can work on it)
Format the data to highlight key issues
Give you the ability to change the data display as you’re working with the data to support whatever analysis you need
Integrate support for Large Language Models to let you leverage AI analytics
Export the data so that you can use it in other tools
Support looking at the “big picture” while also letting you drill down into the essential detail

And, critically, you need a tool that works “the way you expect” so you don’t have to figure out how to use the tool and can concentrate on the data the grid delivers.

The Progress Telerik and Kendo UI DataGrid does all those things. (See the Blazor DataGrid Demo for example.) Some of those features are available in any implementation of the grid (“works the way you expect,” for instance). Some features will require you to specify to the application’s developers how you want the grid to work.

If, for example, you want the DataGrid to work with a data source that includes lot of rows, you’ll want developers to enable the DataGrid’s “load on demand” feature. Similarly, if you’re going to be working with data that others will be updating, you’ll want your grid to be implemented using observables that let you see those changes as early as possible.

The Initial Display

Typically, for example, you’ll want to have the DataGrid configured so that, as you open the application, the grid retrieves the data that you normally expect to work with. But if you’ll need to look at several different data sources as part of analyzing the data, then you’ll also want to have the DataGrid configured to allow you to dynamically switch to that other data.

For that initial display, you can also have your grid act as a dashboard that highlights cells (or whole rows) that signal key issues. If there are specific values that you want highlighted in the grid, you can have those values built in. But, if you want, you can also have the ability to change the values/thresholds used to highlight the data you’re interested in.

You can, of course, sort the grid’s rows into the order you need. But you can also, at any time, reorder the grid’s columns (or suppress columns) to pull together the data you’re interested right now.

And, also by default, you can filter the grid to show just the rows you need for a particular analysis. You can filter by arbitrary values (e.g., “variances greater than 5%”) or have a checkbox option for specific columns that makes it easier to select the rows you want. The DataGrid’s toolbar also includes a search textbox that you can use to find specific rows.

Supporting Multiple Configurations

That’s already multiple options and, as a result, a lot of opportunities for you to dynamically reconfigure the DataGrid as you’re working with it. Fortunately, you can also have the DataGrid save and restore your configuration settings so that you can quickly switch between different grid configurations as you need them.

AI Support

In the modern world, you’ll also want to decide how much of the grid’s AI support you’ll want to have enabled. The DataGrid gives you multiple ways to access AI processors:

The AI Toolbar for Data Operations lets you use plain language commands to explore your data through filtering, grouping and sorting
The AI Toolbar for Highlighting lets you flag rows that meet complicated conditions
The AI Assistant adds a column to your table with a button that opens an AI prompt window to let you ask any question that makes sense

Grouping and Aggregating Data

The DataGrid also lets you organize rows into meaningful groups. You can, as you’re viewing the data, select the rows that you want to group or drag/drop columns or rows to create the groups you need. (See Grouping options for KendoReact Grid as an example.)

Once you create groups, you can include displays of aggregate values for those groups. But you don’t have to create groups to get aggregate values. You can, as you’re working with the grid, select the rows and columns you want to be included in your aggregated values.

While the DataGrid supports the typical aggregate functions “out of the box” (e.g., count, sum, average, etc.), you can have more sophisticated aggregates integrated into your grids.

Drilling Down

You can also have the DataGrid configured as a hierarchy of high-level sections that you can drill down into to reveal nested, detailed data. You can have your data nested as many levels deep as you need, and each level can have its own, distinct set of columns and aggregates. Effectively, you can expand your high-level rows into a different grid of detail data that reflects your needs at each level.

Exporting Data

The DataGrid also supports exporting data in a variety of formats so you can integrate other tools into your analysis (or you can just copy grid data so you can paste into some other tool).

You’re not limited to copying or exporting all the data in the grid. While you’re working with the grid, you can select the rows and columns you want you want to export into another tool (or just share with others—the grid supports multiple export formats, including PDF). If your application is using the Telerik Chart control you can export your data straight into the chart for visualization.

And, if you are using the DataGrid to facilitate selecting the data to export into some other tool, the grid supports a “high density” mode that packs more data on the screen. (See the Kendo UI for Angular Grid Grouping Display Modes page for example.)

As an analyst, you can’t really have too much data—provided, of course, your tools let you review and explore that data effectively. The Telerik DataGrid gives you a customizable window into the data for any application, turning the application itself into a tool for analyzing its own data. That enables you to create the business intelligence that drives better decisions, which is, after all, the purpose of being a financial analyst.

Check out the Telerik DevCraft suite of products to learn about the DataGrid in your favorite .NET or JavaScript flavor. And you can try out the whole suite free for 30 days.

Try Telerik DevCraft

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

Build, Automate and Observe: What You Can Do with Telerik, Kendo UI and AI Engineering This August

2026-08-19T17:28:37Z

See what you can do with this August’s updates across Progress Telerik, Kendo UI, Telerik Reporting, Fiddler and AI Observability.

AI stopped being “the thing that writes your code” a while ago. At this point, it’s showing up at nearly every stage of the job: helping you build the app, automate the parts nobody wants to do by hand and keep an eye on how AI-powered features actually behave once real users touch them.

This month’s updates across Progress Telerik, Kendo UI, Telerik Reporting, Fiddler and Progress AI Observability are a good snapshot of that shift. Here’s what’s new and, more importantly, what it actually lets you do.

But before that … We’re walking through everything below on Progress AI Monthly: Telerik, Kendo UI & More livestream on August 28, 9 a.m. ET. No sign-up, just show up.

YouTube · LinkedIn · Twitch

Build

More AI, Fewer Tokens

Before getting to what’s new, a word on what’s gotten leaner: token consumption is down by up to 45% across our .NET products, with better output quality on top of that, so the same prompt now costs you less and gets you more. Alongside that, the Agentic UI Generator for Telerik UI for Blazor, KendoReact and Kendo UI for Angular is now available as an agent-native skill instead of an externally configured tool, which makes it noticeably easier to deploy in air-gapped and regulated environments.

See the MCP servers page.

Build UI with a Prompt

The Agentic UI Generator now supports Telerik UI for ASP.NET Core. Describe what you need in plain language, and it generates real, framework-aware code that follows the patterns you’d already be using: grids, forms, navigation, layout, the works. That means less time assembling scaffolding and more time on the parts of the app that actually need your judgment.

A few things people are already using it for: business applications, admin portals, customer-facing dashboards, analytics views and data-driven workflows.

See how the ASP.NET Core UI Generator works.

Build Reports with Natural Language

The Telerik Reporting AI Report Generator in Web Report Designer has already been generating charts and gauges from a plain description of what you want to see. Now that same idea extends to structured report content: tables, lists, crosstabs, summary rows, headers and footers, and grouped structures.

Describe the table you need. For instance, grouped by region, with subtotals. And the Generator builds it, then hands you a preview to check before anything actually lands in the report.

Explore AI-Generated Tables, Lists and Crosstabs.

Build Faster with New Components

Not every update this month is AI-flavored. Some of it is just useful, new UI:

Telerik UI for Blazor: Expansion Panel
KendoReact: OTP Input
Kendo UI for Vue: Barcode, PDF Viewer
Telerik UI for .NET MAUI: Charts (Preview), Circular Slider
Telerik UI for WPF: Smart Paste Button, Inline AI Assistant
Telerik UI for WinForms: Smart Paste Button

Build AI-ready Experiences with the LLM Kit

The LLM Kit isn’t just something you bolt on after the fact to keep tabs on your agents. It’s a set of components for building the AI-powered experience itself. Chat-style interfaces, multi-step agent workflows, tool-call displays, approval steps, citations, checkpoints: the pieces you’d otherwise have to design and build from scratch are already there, ready to wire into your app.

It gives you a real head start on shipping AI features that feel considered rather than bolted on, and, as a side benefit, your users and your team can actually see what the AI is doing along the way.

It’s available now for Telerik UI for Blazor, UI for ASP.NET Core, UI for MVC, Kendo UI for Angular, UI for jQuery and KendoReact.

Automate

Automate Application Upgrades

Nobody enjoys upgrading a codebase, and it’s rarely the highest-value use of anyone’s afternoon. AI-assisted migration is now available for Telerik UI for ASP.NET Core, UI for MVC, UI for WPF, KendoReact and Kendo UI for jQuery through the Upgrade Assistant (part of the MCP engine). It handles the changes it already knows how to make on its own and walks you through the ones that need a human decision, so version bumps stop eating whole sprints.

Automate Reporting Operations with AI Agents

Telerik Report Server now ships with a native MCP Server, so assistants like Copilot, Claude, Cursor and Codex can work directly inside your reporting environment instead of going through a custom integration you’d have to build and maintain. Once you’ve set up a Personal Access Token, agents can:

Generate reports
Manage data sources
Schedule reports
Handle general reporting-environment admin

See Report Server MCP docs.

Automate Debugging with Fiddler MCP

Debugging gets a lot more useful when your AI assistant can see what actually happened over the wire, not just what the code says should happen. Fiddler MCP connects your coding assistant to real traffic captured in Fiddler Everywhere, actual requests, responses, headers, status codes, so it’s reasoning from evidence instead of guessing. Set it up with one click inside Fiddler Everywhere, then go from “something’s broken” to a fix without leaving your IDE.

Explore Fiddler Everywhere MCP.

Automate Licensing for CI/CD

Automation isn’t only about what your agents do. It’s also about what shouldn’t need a human to manage. Deployment Keys give you a dedicated way to license automated builds and deployments: each key ties to a registered application and the exact Telerik or Kendo products it uses, so tracking, monitoring and reporting on product usage across your CI/CD environments gets a lot less manual.

Observe

Building faster and automating more only gets you so far if you can’t tell what your AI systems are actually doing once they’re live. That’s the part teams tend to underinvest in until something goes wrong.

Learn Why AI Observability Matters

If you want to go deeper on this, join Jeff Fritz and Progress Product Manager Lyubomir Atanasov on August 26 for “AI Observability: When AI Goes Off the Rails.” They’ll walk through some genuinely memorable public AI failures, then run a live Progress AI Observability demo covering agent tracing, drift and hallucination detection, and performance and cost monitoring.

Help Shape the Future of Agentic Development

This is also the thinking behind the Progress Agent Harness Early Access Program: structured, auditable AI workflows, with early adopters getting a direct line to the roadmap. As agents take on more, being able to manage them predictably matters just as much as what they can build.

Join the Agent Harness EAP.

What’s New and Release History

To see everything that’ is new in August 2026 release edition, visit the What’s New in Telerik and Kendo UI page. For a deeper dive into each product, follow the links below.

Product	What’s New	Release History
Kendo UI for Angular	What’s New in Kendo UI for Angular	Kendo UI for Angular Release History
KendoReact	What’s New in KendoReact	KendoReact Release History
Kendo UI for Vue	What’s New in Kendo UI for Vue	Kendo UI for Vue Release History
Kendo UI for jQuery	What’s New in Kendo UI for jQuery	Kendo UI for jQuery Release History
Telerik UI for Blazor	What’s New in Telerik UI for Blazor	Telerik UI for Blazor Release History
Telerik UI for ASP.NET Core	What’s New in Telerik UI for ASP.NET Core	Telerik UI for ASP.NET Core Release History
Telerik UI for ASP.NET MVC	What’s New in Telerik UI for ASP.NET MVC	Telerik UI for ASP.NET MVC Release History
Telerik UI for .NET MAUI	What’s New in Telerik UI for .NET MAUI	Telerik UI for .NET MAUI Release History
Telerik UI for WPF	What’s New in Telerik UI for WPF	Telerik UI for WPF Release History
Telerik UI for WinForms	What’s New in Telerik UI for WinForms	Telerik UI for WinForms Release History
Telerik Reporting	What’s New in Telerik Reporting	Telerik Reporting Release History
Telerik Report Server	What’s New in Telerik Report Server	Telerik Report Server Release History
Telerik Document Processing	What’s New in Telerik DPL	Telerik DPL Release History

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:

Telerik Blogs | Mobile

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

DataGrids Are For... Medical Professionals

Reporting the Data

Regulatory Issues, Sharing Data and Privacy

Updating the Data

DataGrids Are For... Financial Analysts

The Initial Display

Supporting Multiple Configurations

AI Support

Grouping and Aggregating Data

Drilling Down

Exporting Data

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?

Build, Automate and Observe: What You Can Do with Telerik, Kendo UI and AI Engineering This August

Build

More AI, Fewer Tokens

Build UI with a Prompt

Build Reports with Natural Language

Build Faster with New Components

Build AI-ready Experiences with the LLM Kit

Automate

Automate Application Upgrades

Automate Reporting Operations with AI Agents

Automate Debugging with Fiddler MCP