Telerik Blogs | Mobile| .NET MAUI

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

2026-08-24T15:23:04Z

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

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

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

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

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

What Is a Skeleton?

Image generated using AI for illustrative purposes

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

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

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

✅ When Should You Use Skeletons?

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

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

When Waiting for API Responses

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

Screens with Heavy Images

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

❌ When Are Skeletons NOT Recommended?

When Data Is Not Actually Loading

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

For Instant Loads

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

Very Simple Screens

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

Meet the Telerik Skeleton

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

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

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

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

Adding the Namespace

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

Registering the Component

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

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

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

How to Use It?

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

Skeleton Types in the Telerik UI for .NET MAUI Library

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

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

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

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

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

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

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

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

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

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

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

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

Custom Skeleton View

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

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

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

️ Implementation

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

Then, create the DataTemplate that will represent your skeleton:

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

Conclusion

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

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

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

See you in the next article! ‍♀️

Ready to Try Telerik UI for .NET MAUI?

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

Try Telerik UI for .NET MAUI

Building an Onboarding and Registration UI in .NET MAUI

2026-08-10T18:11:16Z

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

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

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

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

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

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

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

How Will the Explanation Work?

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

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

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

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

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

Environment Setup

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. 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

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).

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:

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

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

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

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

Environment Setup

Breaking Down the Design into Blocks

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

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

Block 1. Intro

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

Creating the Main Page with a Background Image

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

Rotated Cards

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

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

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

Finally, Let’s Add the Get Started Button

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

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

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

Block 2. Header

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

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

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

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

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

Inside this container, we’ll include:

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

White Background with Rounded Corners

To get started with RadBorder, add the corresponding namespace:

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

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

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

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

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

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

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

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

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

Header Image

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

Main Label

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

4. Benefits & Plans

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

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

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

`5. Footer`

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

Then, place the following code in that section:

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

`Conclusion`

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

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

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

See you in the next article! ‍♀️

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

Try Now



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


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


" 
     

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

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

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


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

    [ObservableProperty]
    private DateTime? selectedDate;

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

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

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

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

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


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

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


5 Heart Animations Using .NET MAUI
2026-06-02T16:28:18Z
Try your hand at some simple, engaging animations in .NET MAUI. Here are five heart animations you can master today!
I’m a big fan of animations that capture the user’s attention—the kind that don’t just make an app look pretty, but also have the ability to guide users and clearly communicate what’s happening. When used correctly, animations become a key part of design and usability. ✨
In .NET MAUI, we have simple yet very powerful animations that allow us to add that dynamic touch without unnecessary complexity. With just a few lines of code, we can transform common interactions into more natural and enjoyable experiences.
I genuinely love this article, because in it we’ll learn how to create five super-creative animations that elevate our application and showcase the beautiful and powerful things we can achieve using the basic animations available in .NET MAUI 
1. Heart ECG Monitor
OMG, can we do this in .NET MAUI?? Yess!!!  (This is my favorite animation, hahaha).
Let’s create an ECG monitor–style animation, where we can see the movement of the line. To achieve this, we’ll work with both XAML and code-behind.
Let’s start with the XAML. 
The design includes a heart and some lines that simulate the monitor’s movement. Both elements will be vertically aligned, so the layout that will contain our design is a VerticalStackLayout.
Inside this layout, we’ll add:
➖ An Image for the heart
➖ And a GraphicsView to draw and animate the monitor lines
 
    
    
     
    


Perfect! Now we’ll continue with the code that brings the monitor and the heart to life. For the purpose of this example, we’ll add everything directly in the code-behind. And how do we locate the code-behind?  For example, if your XAML file is called MainPage.xaml, the code-behind is in MainPage.xaml.cs.
Variable Declaration
➖ WindowSize: This variable allows us to control how many heartbeats can be displayed on the screen at the same time. The higher this value is, the more heartbeats will be visible before they move out of view. As a result, a larger WindowSize makes the heartbeat appear slower on the monitor.
➖ Beat: We define an array to represent a complete heartbeat. Values close to zero represent the baseline, while higher values represent the peaks.
➖ _samples: This variable represents what should be displayed on the screen. Initially, we fill it with zeros to display a flat line.
➖ EcgDrawable: This holds the object responsible for drawing the monitor signal.
➖ _i: Finally, we have the index that will be used to iterate through the Beat array.
// Variables
 
const int WindowSize = 140; 
static readonly float[] Beat = 
    { 
    0,0,0, .12f,.25f,.12f, 0, -.25f,1f,-.35f, 0,0, .20f,.35f,.20f, 0,0,0,0 
};

readonly List _samples = Enumerable.Repeat(0f, WindowSize).ToList(); 
readonly EcgDrawable _drawable; 
int _i;
Continuing with the Constructor
Once we have all the required variables defined, the next step is to connect the components and start the animation inside the constructor.
First, we create an instance of EcgDrawable and assign it to the GraphicsView. This allows the view to know how to render the ECG signal based on the provided samples.
Next, we configure a timer using the Dispatcher. This timer is responsible for updating the signal at a regular interval, which helps us achieve a smooth and continuous animation.
On each timer tick:
The next value from the heartbeat pattern is added to the samples list.
The window size is preserved by removing the oldest value.
The GraphicsView is invalidated to force a redraw.
Finally, we start the timer, and the heart monitor animation begins automatically.
In code, it looks like this:
public HeartAnimations() 
{ 
    InitializeComponent(); 
    _drawable = new EcgDrawable(_samples); 
    Ecg.Drawable = _drawable; 
    var t = Dispatcher.CreateTimer(); 
    t.Interval = TimeSpan.FromMilliseconds(16); 
    t.Tick += (_, __) => 
    { 
    _samples.Add(Beat[_i++ % Beat.Length]); 
    if (_samples.Count > WindowSize) _samples.RemoveAt(0); 
    Ecg.Invalidate(); 
    }; 
    t.Start(); 
}
Finally, let’s add the EcgDrawable class.
This class is responsible for visually rendering the ECG signal inside the GraphicsView component. It takes the list of values that represent the heart signal and transforms them into a continuous line, automatically calculating:
The vertical position of the signal
The horizontal distribution of each point
In code, this translates to the following:
class EcgDrawable(IReadOnlyList samples) : IDrawable 
{ 
    public void Draw(ICanvas c, RectF r) 
    { 
    if (samples.Count < 2) return; 
    c.StrokeColor = Colors.Red; 
    c.StrokeSize = 2; 
    var baseline = r.Top + r.Height * .55f; 
    var amp = r.Height * .35f; 
    var dx = r.Width / (samples.Count - 1); 
    var p = new PathF(); 
    p.MoveTo(r.Left, baseline - samples[0] * amp);  
    for (int i = 1; i < samples.Count; i++) 
    p.LineTo(r.Left + i * dx, baseline - samples[i] * amp);
     
    c.DrawPath(p); 
    } 
}
And that’s it!  We’ve just finished building the Heart ECG Monitor animation. See? It wasn’t that hard! I encourage you to try it out and experiment with it on your own.
Now, let’s move on to the next animation! 
2. Heart Ripple Pulse
This animation represents the heartbeat and the waves generated by that pulse.
Here, we combine several simple animations and use a Grid as the main container to overlay all the elements in the same space, making them feel like a single, unified animation.
We’ll start with the XAML, where we will define:
➖ Two Border components in red color, representing the ripple waves.
➖ A heart image, which will act as the main element at the center.

    
    
     
    
     
    


To bring our animation to life, we’ll work with the OnAppearing and in a method called Loop.
➖ OnAppearing: To explore something different, this time we’ll work with the OnAppearing method (✍️ please make sure to declare the _running bool variable).
When the screen appears, we call the Loop method, which is responsible for running the animation cycle.
protected override void OnAppearing() 
{ 
    base.OnAppearing(); 
    _running = true; 
    _ = Loop(); 
}
➖ Loop(): This is where the magic happens. ✨ Inside this method:
We trigger the heart pop, a subtle scale effect on the heart
We animate the two circular lines to create the ripple effect
We use a delay to give each animation enough time and make them clearly distinguishable
Thanks to this approach, we achieve a smooth, easy-to-follow and well-synchronized animation.
In code, this would look like the following:
async Task Loop() 
{ 
    while (_running) 
    { 
    // Reset 
    Ripple1.Opacity = Ripple2.Opacity = 0; 
    Ripple1.Scale = Ripple2.Scale = 0.2; 
    Heart.Scale = 1;
     
    // Heart pop 
    _ = Heart.ScaleTo(1.12, 90, Easing.CubicOut)
    
    .ContinueWith(_ => MainThread.InvokeOnMainThreadAsync( 
    () => Heart.ScaleTo(1.0, 120, Easing.CubicInOut)));
    
    // Ripple 1 
    _ = Task.WhenAll( 
    Ripple1.FadeTo(0.45, 60, Easing.CubicOut), 
    Ripple1.ScaleTo(1.8, 700, Easing.CubicOut) 
    ).ContinueWith(_ => MainThread.InvokeOnMainThreadAsync( 
    () => Ripple1.FadeTo(0, 250, Easing.CubicIn)));

    // Ripple 2 
    await Task.Delay(120); 
    _ = Task.WhenAll( 
    Ripple2.FadeTo(0.35, 60, Easing.CubicOut), 
    Ripple2.ScaleTo(1.8, 700, Easing.CubicOut) 
    ).ContinueWith(_ => MainThread.InvokeOnMainThreadAsync( 
    () => Ripple2.FadeTo(0, 250, Easing.CubicIn)));
     
    await Task.Delay(650); 
    } 
}
And that’s it! Let’s keep going and jump into the next animation! 
3. Blinking Heart
In this animation, we’ll make a heart blink in a subtle and elegant way. We’ll start with the XAML. In this case, the structure is very simple, since we only need a single heart image, centered on the screen. From this single element, we’ll build the entire animation.

We’ll continue working with OnAppearing to start the animation, and additionally we’ll create a method called BlinkLoop() to handle the animation logic. This one is composed of FadeTo and ScaleTo animations, which allow us to play with the icon’s opacity and size, creating the blinking effect.
In code, it would look like the following:
protected override void OnAppearing() 
{ 
    base.OnAppearing(); 
    _running = true; 
    _ = BlinkLoop(); 
} 
async Task BlinkLoop() 
{

    while (_running) 
    { 
    await Task.WhenAll( 
    Heart.FadeTo(0.35, 220, Easing.CubicInOut), 
    Heart.ScaleTo(0.95, 220, Easing.CubicInOut) 
    ); 
    
    await Task.WhenAll( 
    Heart.FadeTo(1, 220, Easing.CubicInOut), 
    Heart.ScaleTo(1, 220, Easing.CubicInOut) 
    ); 
    } 
}
All set! Ready to move on to the next animation ✨
4. Rotating Heart
Now we’ll create an animation where our heart rotates. ❤️ This type of animation is very useful, for example, as a loading indicator in your screens.
To get started with the implementation, we’ll begin by adding the Image in XAML, as shown below:

And in the code-behind, it’s time to bring the heart to life! ❤️
We’ll use the OnAppearing method, and for the animation (✍️ please make sure to declare the _isRunning bool variable), we’ll rely on RotateTo(), as shown below:
protected override async void OnAppearing() 
{ 
    base.OnAppearing(); 
    _isRunning = true; 
    
    while (_isRunning) 
    { 
    await Heart.RotateTo(360, 4000, Easing.Linear); 
    Heart.Rotation = 0; 
    } 
}
Done! Let’s bring the next animation to life ✨
5. Jumping Heart
For our final animation, we’ll make the heart jump up and down in a continuous loop.
This animation also works great as a loading indicator, adding a playful touch to your screen.
Let’s start by adding the Image to the XAML:

In the code-behind, we’ll create the animation by working with TranslationTo and the TranslationY methods, as shown below:
protected override async void OnAppearing() 
{ 
    base.OnAppearing(); 
    _isRunning = true; 
    Heart.TranslationY = -120;
 
    while (_isRunning)
    
    { 
    await Heart.TranslateTo(0, 0, 600, Easing.CubicOut); 
    await Heart.TranslateTo(0, -12, 120, Easing.CubicInOut); 
    await Heart.TranslateTo(0, 0, 120, Easing.CubicInOut); 
    await Heart.TranslateTo(0, -120, 450, Easing.CubicIn); 
    } 
}
And that’s all—thanks for building this with me! 
Conclusion
And that’s it!  We’ve successfully created five awesome, ready-to-use animations with .NET MAUI. Each one was designed to be easy to implement, demonstrating just how powerful even the most basic animations can be when used correctly.
I hope this article has inspired you and sparked new ideas for incorporating animations into your current and future .NET MAUI projects ✨
As always, if you have any questions or would like me to explore any of these animations in more detail, feel free to leave a comment — I’d be happy to help! 
See you in the next article! ‍♀️
Building an Instagram-Style Like Animation in .NET MAUI
Learn how to make your .NET MAUI app a little more engaging with interactive animations. We’ll see how to animate a heart for a like action.


Share Functionality in Your .NET MAUI Apps
2026-05-26T13:50:18Z
Learn how to add share functionality to your .NET MAUI app whether in iOS, Android or Windows.
In recent years, many large companies have decided to rely on technology and move a big part—or even all—of their processes to mobile applications.
For example, not long ago, sending money from one bank account to another meant physically going to the bank and spending hours waiting in line. Today, that same process can be completed in just a few seconds using a mobile app. 
But… What happens next? 
How do we send a confirmation or receipt to the account owner so they can validate the transfer?
To solve this, applications usually include a share functionality, which allows users to send information through the familiar share sheet we all know—via WhatsApp, email, social media and more.
It’s important to design the user experience from start to finish. It’s not just about completing an action, but also about enabling users to easily share or confirm the result of that action.
In this article, you’ll learn how to open the share sheet in your .NET MAUI apps, so you can share information quickly and effortlessly.
What Is IShare?
IShare is an interface that provides an API that allows you to share data such as links, files or text using the system’s share functionality. When invoked, it opens a button sheet where the user can choose how and with whom they want to share that information.
The IShare interface is already available through the Share.Default property and is located in the Microsoft.Maui.ApplicationModel.DataTransfer namespace.
When the user interacts with this feature, they will see something like the following:
Image obtained from the official documentation.
Platform Settings
To implement the share functionality, some platforms require additional configuration. These are the supported platforms and their requirements:
Android and Windows: No setup is required.
iOS / Mac Catalyst: To be able to access photos and videos, you need to add the appropriate permissions. To do this, go to:
        Platforms/iOS/Info.plist
And Platforms/MacCatalyst/Info.plist
Then add the permission keys along with their descriptions. Keep in mind that this description will be shown to the user when requesting permission, so it’s important to use clear and user-friendly text. Below is an example of how the configuration should look:
NSPhotoLibraryAddUsageDescription 
This app needs access to the photo gallery to save photos and videos. 

NSPhotoLibraryUsageDescription 
This app needs access to the photo gallery to save photos and videos.
What Information Can I Share? 
You can share text, links, files or even multiple files at the same time, depending on your needs. .NET MAUI provides different request types to handle each scenario.
Below are the most common use cases and how to implement them.
 Text
To share plain text, you can use the ShareTextRequest class. This allows you to pass the text you want to share along with a title.
public async Task ShareText(string text) 
{ 
    await Share.Default.RequestAsync(new ShareTextRequest 
    { 
    Text = text, 
    Title = "I’m the title" 
    }); 
}
 Links
You can also share a link by using the Uri property of ShareTextRequest. Simply provide the URI and a title.
public async Task ShareUri(string uri, IShare share) 
{ 
    await share.RequestAsync(new ShareTextRequest 
    { 
    Uri = uri, 
    Title = "I’m the title" 
    }); 
}
 Files
.NET MAUI automatically detects the file type (MIME) and handles the sharing process accordingly. However, keep in mind that each operating system may decide whether a specific file type can be shared or not, depending on platform restrictions.
To share a single file, use the ShareFileRequest type, as shown below:
public async Task ShareFile() 
{ 
    string fn = "MyFile.txt"; 
    string file = Path.Combine(FileSystem.CacheDirectory, fn); 
    File.WriteAllText(file, "This is a file"); 
    await Share.Default.RequestAsync(new ShareFileRequest 
    { 
    Title = "Share text file", 
    File = new ShareFile(file) 
    }); 
}
️ Multiple Files
Oh yeah!!  We also have the option to share multiple files using the ShareFileRequest type. Let’s look at the following example:
public async Task ShareMultipleFiles() 
{ 
    string file1 = Path.Combine(FileSystem.CacheDirectory, "File1.txt"); 
    string file2 = Path.Combine(FileSystem.CacheDirectory, "File2.txt");  
    File.WriteAllText(file1, "Hello 1"); 
    File.WriteAllText(file2, "Hello 2");
     
    await Share.Default.RequestAsync(new ShareMultipleFilesRequest 
    { 
    Title = "I’m sharing multiple files", 
    Files = new List { new ShareFile(file1), new ShareFile(file2) } 
    }); 
}
Android Control File Locations
On Android, there are scenarios where a file is located in the app’s private storage. In these cases, Android temporarily copies the file to the app cache and shares it using a FileProvider.
This behavior is very useful, but it’s important to be careful. If it’s not configured correctly, it can expose more information than intended, including data that should not be publicly accessible.
The good news is that this can be prevented by following the steps below.
Step 1: Add the FileProvider Path File
Inside the following folder:
Platforms/Android/Resources/xml
And add a file with the exact name:
microsoft_maui_essentials_fileprovider_file_paths.xml
Step 2: What Will This File Contain?
This file defines the allowed locations from which files can be shared.
Example configuration:
 
 
     
     
     

What does each line mean?
: Allows sharing files from external storage. Useful when the file is stored in a location accessible to the user.
: Allows sharing files from the app’s internal cache. This is the most common and safest option, ideal for temporary files such as PDFs, images, or receipts.
: Allows sharing files from the external cache. It is still a temporary location, but outside the internal storage.
sharing-root: Is a folder that you define and that acts as a secure area for sharing files. Only files located inside this folder can be shared.
iPadOS Presentation Location
When requesting a share or opening launcher on iPadOS, the system displays the action as a popover. To control where this popover appears on the screen and where its arrow points, you must specify a position using the PresentationSourceBounds property.
You can do it in the following way:
Share
await Share.RequestAsync(new ShareFileRequest 
{ 
    Title = Title, 
    File = new ShareFile(file), 
    PresentationSourceBounds = 
    DeviceInfo.Platform == DevicePlatform.iOS && 
    DeviceInfo.Idiom == DeviceIdiom.Tablet 
    ? new Rect(0, 20, 0, 0) 
    : Rect.Zero 
});
Launcher
await Launcher.OpenAsync(new OpenFileRequest 
{ 
    File = new ReadOnlyFile(file), 
    PresentationSourceBounds = 
    DeviceInfo.Platform == DevicePlatform.iOS && 
    DeviceInfo.Idiom == DeviceIdiom.Tablet 
    ? new Rect(0, 20, 0, 0) 
    : Rect.Zero 
})
Conclusion
And that’s it!  In this article, you learned how to implement share functionality in your .NET MAUI apps, allowing users to easily share text, links, files and even multiple files across platforms.
You also explored important platform-specific considerations, such as additional permissions on iOS and Mac Catalyst, secure file sharing on Android using FileProvider, and how to properly handle popover presentation on iPadOS to avoid unexpected issues.
With these concepts in mind, you now have a clearer understanding of how to create a complete and secure sharing experience, taking care of both user experience and platform requirements.
If you have any questions or would like me to cover more .NET MAUI topics, feel free to leave a comment—I’d be happy to help! 
See you in the next article! ‍♀️✨
Reference
Sample codes and explanation was based on the official documentation:
https://learn.microsoft.com/en-us/dotnet/maui/platform-integration/data/share?view=net-maui-10.0&tabs=android
Get Your .NET MAUI App Up More Quickly
Deliver native apps for every platform in half the time with 70+ customizable UI components, an AI Coding Assistant and unmatched productivity tools. Check out Progress Telerik UI for .NET MAUI.


Installing and Basics of Telerik UI for .NET MAUI AI Coding Assistant
2026-05-18T14:25:07Z
Check out the Telerik UI for .NET MAUI AI Coding Assistant, the MCP server native to Telerik controls and MAUI.
Code generation using artificial intelligence has improved impressively over the past few months. One of the features that has helped this growth are MCP servers, which allow connecting an AI to information sources quickly. From consulting Microsoft Learn documentation, to those that perform actions on a calendar, to MCP servers for retrieving information from databases, these servers help improve the accuracy of results by obtaining up-to-date and reliable information.
The team at Progress has released an AI Coding Assistant for .NET MAUI, which helps create and improve graphical interfaces, using the latest features of its UI controls reliably. Let’s see it in action.
What Is Telerik UI for .NET MAUI AI Coding Assistant (MCP Server)?
Telerik AI Coding Assistant for .NET MAUI is an MCP server that allows retrieving information provided directly by Progress, with the purpose of letting users learn about the use of a specific component or, alternatively, create high-quality graphical interfaces using the latest features and capabilities of the controls in the Telerik suite. Some available features are:
Prompt handling: Handles complex prompts
Client compatibility: You can use it in different clients, such as VS Code, Cursor, etc.
Code suggestions: It can suggest code and perform automatic rebuilds to check for errors
Response focus: Focused on code generation
The above features enable a variety of use cases, including:
Generation of complex interfaces: You can rely on the MCP server to generate dashboards, specific pages, etc., requesting the use of specific controls to be used
Advanced Grid configuration: Specify which features you need to include in a DataGrid
Better testing using mock data: Get a more robust preview by entering test data before connecting to a data source
Modernization of graphical interfaces: Refactor your UI, improving it for modern times and better user experiences
Let’s see how to use it.
Installing Telerik UI for .NET MAUI AI Coding Assistant (MCP Server)
To be able to use Telerik MCP server for .NET MAUI, you must meet some prerequisites:
A version of .NET equal or greater than 9
A client compatible with the MCP protocol, such as VS Code, Visual Studio 2026, Cursor, etc.
A Telerik account
An active Telerik license (including a trial account)
A .NET MAUI app that includes the Telerik UI for .NET MAUI controls
Installing a License Key
Before running any command, I recommend that you obtain a License Key so your account can be verified and you can use the MCP server. There are several ways to do this. For example, you can go to your Progress account, where you select the License Keys option:
On the License Keys page, click the Download License Key button:
The downloaded file telerik-license.txt should be placed in %AppData%\Telerik\telerik-license.txt if you’re using Windows, as in my case, or in ~/.telerik/telerik-license.txt if you’re on Linux. Now, it’s time to install the MCP server.
Installing the MCP Server
With a License Key on your machine, installing the server is quite simple. In my case I will run the command for .NET 10:
dnx Telerik.MAUI.MCP
Once the Telerik MCP for MAUI is installed, the next step is to configure your preferred editor. In the case of VS Code, you should first open the folder containing the .NET MAUI project you’ll be working on.
Then, create a folder at the root named .vscode, inside which you should create a file mcp.json. This file must be replaced or adapted (if you already have previous MCP servers), adding the following entry valid for .NET 10:
{
  "servers": {
    "telerik-maui-assistant": {
      "type": "stdio",
      "command": "dnx",
      "args": ["Telerik.MAUI.MCP", "--yes"],
    }
  }
}
Alternatively, to use it in Visual Studio, you must create the file .mcp.json at the solution level and add the following content inside:
{
  "servers": {
    "telerik-maui-assistant": {
      "type": "stdio",
      "command": "dnx",
      "args": ["Telerik.MAUI.MCP", "--yes"],
    }
  }
}
Once done, you will be able to find the new MCP server as part of the tools in both VS Code and Visual Studio 2026:
VS Code
Visual Studio 2026
With the MCP server configured, we’re ready to continue.
Testing the Telerik MCP Server to Create .NET MAUI Apps
As I mentioned before, the Telerik MCP server can help us perform different tasks.
For example, suppose you have a page you made using standard .NET MAUI controls, using code similar to the following:
<Grid RowDefinitions="Auto,*" Padding="16">

    
    <Label
        Grid.Row="0"
        Text="Product List"
        FontSize="22"
        FontAttributes="Bold"
        Margin="0,0,0,12" />

    
    <ActivityIndicator
        Grid.Row="1"
        IsRunning="{Binding IsBusy}"
        IsVisible="{Binding IsBusy}"
        HorizontalOptions="Center"
        VerticalOptions="Center" />

    
    <CollectionView
        Grid.Row="1"
        ItemsSource="{Binding Products}"
        SelectedItem="{Binding SelectedProduct}"
        SelectionMode="Single">

        <CollectionView.ItemTemplate>
            <DataTemplate x:DataType="models:ProductModel">
                <Border
                    Margin="0,4"
                    Padding="12"
                    BackgroundColor="{AppThemeBinding Light=White, Dark=#1E1E1E}"
                    StrokeShape="RoundRectangle 8"
                    Stroke="#E0E0E0">

                    <Grid ColumnDefinitions="*,Auto" RowDefinitions="Auto,Auto">

                        
                        <Label
                            Grid.Row="0" Grid.Column="0"
                            Text="{Binding Name}"
                            FontSize="16"
                            FontAttributes="Bold" />

                        
                        <Label
                            Grid.Row="0" Grid.Column="1"
                            Text="{Binding Price, StringFormat='${0:F2}'}"
                            FontSize="16"
                            FontAttributes="Bold"
                            TextColor="#512BD4"
                            HorizontalOptions="End" />

                        
                        <Label
                            Grid.Row="1" Grid.Column="0"
                            Text="{Binding Category}"
                            FontSize="13"
                            TextColor="Gray" />

                        
                        <Label
                            Grid.Row="1" Grid.Column="1"
                            Text="{Binding InStock, Converter={StaticResource BoolToStockConverter}}"
                            FontSize="12"
                            TextColor="{Binding InStock, Converter={StaticResource BoolToStockColorConverter}}"
                            HorizontalOptions="End" />
                    Grid>
                Border>
            DataTemplate>
        CollectionView.ItemTemplate>

    CollectionView>
Grid>
In the previous code there isn’t much customization, because an unmodified CollectionView is being used:
Although it’s true that we could customize it manually through a DataTemplate, most of the time what is required is a quick but robust implementation. Let’s use the MCP server to modify the look and feel by giving the following instruction:
#telerik-maui-assistant  I need you to improve the ProductsPageTelerik page. Replace the CollectionView with a DataGrid. I need the page and its controls to look modern and interactive.
When running the instruction and having the Telerik MCP server selected, we will receive a request to run tools, whose information is obtained automatically based on the query made:
With the evolution of AI models, we can achieve that in a single call our instruction is executed, with the GitHub Copilot agent responsible for modifying the code, compiling and testing that everything works correctly. In just a few minutes, the replacement is very precise:
Another thing we can do is use the Telerik Prompt Library, which contains a list of prompts for different use cases.
For example, suppose you’d like to add paging to the component. To accomplish this, you can take the prompt DataGrid with Paging and adapt it to your use case, as follows:
#telerik-maui-assistant Modify the DataGrid to include pagination of 20 records per page.
Again, after a few calls to the MCP tool, the change is implemented in just a few minutes:
With the previous exercises, you have been able to verify the power of using the Telerik MCP server for .NET MAUI to create robust graphical interfaces in much less time.
Conclusion
In this article you learned about the Telerik UI for .NET MAUI AI Coding Assistant, a powerful MCP server specialized in using Telerik controls to guide you and implement complex graphical interfaces using artificial intelligence.
Undoubtedly, having this assistant provides a competitive advantage by helping you reduce the time required to create graphical interfaces, while also allowing you to explore design alternatives.
Remember: Telerik UI for .NET MAUI comes with a free 30-day trial. 
Try Now


How to Verify Network Connectivity in .NET MAUI
2026-05-11T13:22:15Z
Learn the key steps to checking network connectivity in the various platforms available to your .NET MAUI app.
Identifying the connectivity of the devices running our mobile applications allows us to have much more precise control over the decisions we need to make within the app. From knowing whether the device has internet access, if the connection is limited, and if connection types such as Bluetooth, WiFi or Ethernet are active, all this information helps us provide a better user experience.
For example, we can decide whether to show an empty state when there is no internet connection, prevent certain actions or clearly inform the user about what is happening. This is especially important because, in many cases, the user loses connectivity and assumes the problem is with the application, when in reality it is a network issue.
Additionally, we can display different scenarios or behaviors depending on the type of connection available, such as when the device only has Bluetooth active or does not have internet access. That’s why it’s essential to know how to detect these connectivity states. The good news is that in .NET MAUI, we have the ability to do this in a very simple way. Let’s take a look! 
First, Platform Configuration
Before starting with any implementation, it’s important to verify whether you need to apply any platform-specific configuration. Some platforms may require additional setup, while others work out of the box.
For this, iOS/Mac Catalyst and Windows require no additional configuration.
For Android, to access connectivity information, you must add the ACCESS_NETWORK_STATE permission. There are three different ways to add this permission on Android:
Android Option 1: Add the Permission Directly in the AndroidManifest.xml
Go to Platforms → Android, open the AndroidManifest.xml file, and add the following node:

Android Option 2: Use the Android Manifest Graphical Editor
Go to Platforms → Android, double-click the AndroidManifest.xml file, and locate the Required permissions section. Find the permission labeled ACCESS_NETWORK_STATE and simply check the option, as shown below.
Android Option 3: Add the Assembly-based Permission
Go to Platforms → Android → MainApplication.cs and add the permission as follows:
[assembly: UsesPermission(Android.Manifest.Permission.AccessNetworkState)]
Network Accessibility in .NET MAUI
To inspect the network accessibility on a device, .NET MAUI provides the IConnectivity interface. This is part of the Microsoft.Maui.Networking namespace and is available through the Connectivity.Current property.
One thing I really like about this API is that it doesn’t simply return a boolean value indicating whether there is internet access or not. Instead, it provides much more detailed information, such as the scope of the current network (for example, Internet, ConstrainedInternet and others), as well as details about active connection profiles like Bluetooth, Cellular, WiFi and others. It also exposes an event that allows you to monitor changes in the device’s connectivity state in real time.
Next, we’ll take a closer look at each of these values to better understand what they mean and how you can use them in your applications.
How to Inspect the Current Network Scope? 
Thanks to the .NET MAUI team, we can determine the scope of the current network in a much more precise way through the NetworkAccess property. This property provides different values that we can evaluate to obtain more detailed information about the device’s connectivity state. These values are the following:
➖ Internet: Indicates that the device has access to both the local network and the internet. This is the ideal state for making API calls or performing any action that requires a full internet connection.
➖ Local: The device has access only to the local network.
➖ None: No type of connectivity is available. In this state, it’s ideal to inform the user that all or some actions within the app will not work correctly due to the lack of connectivity. This can be done through an empty state, an alert or any other approach that best fits the scenario you’re working on.
➖ Unknown: It’s not possible to determine the connectivity state. If this happens, while the correct information is being retrieved, it’s recommended to inform the user in the same way as in the None state.
➖ ConstrainedInternet: Indicates that the device has limited internet access. This state usually appears when the device is connected to a network with a captive portal, meaning networks that require accepting terms or entering information before granting full internet access. This is common in places like airports, universities or hotels.
Thanks to all these states, as developers we can be much more specific in how we communicate connectivity issues to our users and better adapt the behavior of our applications.
For the code implementation, you can do something like what I show below:
NetworkAccess accessType = Connectivity.Current.NetworkAccess; 

if (accessType == NetworkAccess.Internet) 
{ 
    // Add the code that you need here 
}
Checking Active Connection Profiles
While NetworkAccess tells us how accessible the network is (internet, local, none, etc.), ConnectionProfiles allows us to know which type of connection the device is actively using at a given moment.
The types of connections we can detect are the following:
WiFi
Cellular (mobile data)
Bluetooth
Ethernet
This information is extremely useful for making decisions within your application. For example:
You can limit your app to download files only when the device is connected to a WiFi network.
Enable local features when only a Bluetooth connection is available.
It’s important to keep in mind that Connectivity.Current.ConnectionProfiles returns a collection (IEnumerable), because a device can have multiple connection types active at the same time. For instance, the device may be connected to WiFi while Bluetooth is enabled simultaneously.
In code, the implementation would look like the following:
IEnumerable profiles = Connectivity.Current.ConnectionProfiles;

if (profiles.Contains(ConnectionProfile.WiFi)) 
{ 
    // Add the code that you need here. 
}
Reacting to Connectivity Changes
We know that network conditions can change at any moment. For this reason, .NET MAUI provides the ConnectivityChanged event, which allows us to detect when network access or active connection profiles change. This makes it possible for our applications to react immediately to these changes, without breaking the app experience.
Let’s take a look at an example based on the official documentation:
public class ConnectivityListener 
{ 
    public ConnectivityListener() 
    { 
    Connectivity.ConnectivityChanged += OnConnectivityChanged; 
    }
     
    void OnConnectivityChanged(object sender, ConnectivityChangedEventArgs e) 
    { 
    if (e.NetworkAccess != NetworkAccess.Internet) 
    { 
    Console.WriteLine("No internet connection available."); 
    return; 
    }
     
    if (e.ConnectionProfiles.Contains(ConnectionProfile.WiFi)) 
    { 
    Console.WriteLine("Connected via Wi-Fi."); 
    } 
    else if (e.ConnectionProfiles.Contains(ConnectionProfile.Cellular)) 
    { 
    Console.WriteLine("Using mobile data."); 
    } 
    } 
}
⚠️ Important Considerations
NetworkAccess.Internet: Due to how connectivity detection works on each platform, .NET MAUI can only detect that a network connection is available. It does not guarantee that the connection has real internet access. For example, a device may be connected to a WiFi network, but the router itself may not have an internet connection.
Conclusion
And that’s it!  In this article, you explored how to work with network connectivity in .NET MAUI using Connectivity. You learned how to determine the scope of the current network, detect active connection profiles such as WiFi, Cellular, Bluetooth and Ethernet, and react to connectivity changes in real time using the ConnectivityChanged event.
With this knowledge, you can now make better decisions in your apps, provide clearer feedback to users and build more resilient experiences that adapt to changing network conditions.
See you in the next article! ‍♀️✨
References
Code samples and explanations were based on the official documentation:
https://learn.microsoft.com/en-us/dotnet/maui/platform-integration/communication/networking?view=net-maui-10.0&tabs=android
Get Your .NET MAUI App Up More Quickly
Deliver native apps for every platform in half the time with 70+ customizable UI components, an AI Coding Assistant and unmatched productivity tools. Check out Progress Telerik UI for .NET MAUI.

Telerik Blogs | Mobile| .NET MAUI

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

What Is a Skeleton?

✅ When Should You Use Skeletons?

When Waiting for API Responses

Screens with Heavy Images

❌ When Are Skeletons NOT Recommended?

When Data Is Not Actually Loading

For Instant Loads

Very Simple Screens

Meet the Telerik Skeleton

Adding the Namespace

Registering the Component

How to Use It?

Skeleton Types in the Telerik UI for .NET MAUI Library

Custom Skeleton View

️ Implementation

Conclusion

Ready to Try Telerik UI for .NET MAUI?

Building an Onboarding and Registration UI in .NET MAUI

How Will the Explanation Work?

Environment Setup

Breaking Down the Design

1. Onboarding

Adding the Gradient

Main Layout

The Halo

Main Images, Labels and Button

2. Sign Up

Main Layout of Sign Up

Title & Description

Let’s Add the Form!

Creating the Model

Adding It in XAML

Terms & Conditions and Button

Social Networks

Conclusion

4 Rating Card UI Ideas in .NET MAUI

Environment Setup

Let’s Start!

Creating the Example Structure

1. Friendly Star UI

Starting with the Code

Header with Rounded Image

Rating Side

2. Rating Summary UI

Customers Reviews and Rounded Rating Bar

Adding the Rating Breakdown by Star

3. Detailed Feedback UI

4. Multi-Criteria Rating UI

Conclusion

Top Common Handlers in .NET MAUI

Understanding Handlers in .NET MAUI

Ways to Customize Handlers in .NET MAUI

Removing Underline or Border from an Entry

Modifying Properties of a Button

Select All Text When Receiving Focus in an Entry

Disabling the Keyboard of an Entry Control

DatePicker/TimePicker: Text Alignment

Entry with Native Validation

Conclusion

Building a Healthcare UI with .NET MAUI

How Will the Explanation Work?

Environment Setup

Breaking Down the Design into Blocks

Block 1. Intro

Creating the Main Page with a Background Image

Rotated Cards

Finally, Let’s Add the Get Started Button

Block 2. Header

2. Sign-in Details

White Background with Rounded Corners

3. Header

Header Image

Main Label

4. Benefits & Plans

5. Footer

Conclusion

Replicating a Ticket Screen in .NET MAUI

Breaking Down the Dribbble Design into Blocks

`5. Footer`

`Conclusion`