Getting Started with the .NET MAUI BusyIndicator

This guide provides the information you need to start using the Telerik UI for .NET MAUI BusyIndicator by adding the control to your project.

At the end, you will achieve the following result.

Prerequisites

Before adding the BusyIndicator, you need to:

1. Set up your .NET MAUI application.

2. Download Telerik UI for .NET MAUI.

3. Install Telerik UI for .NET MAUI.

The BusyIndicator is rendered through the SkiaSharp graphics library.

Define the Control

1. When your .NET MAUI application is set up, you are ready to add a BusyIndicator control to your page. The BusyIndicator is a layout control that can display two views depending on its current busy or not-busy state.

To define the state of the control, use its IsBusy property. By default, IsBusy is set to False and the control displays its normal content. If you change it to True, the control displays its busy content, which by default, is a spinning-balls animation. Check the article on animations to see the built-in animations, how to change them, and how to use a custom animation.

<telerik:RadBusyIndicator x:Name="BusyIndicator"
                                    AnimationContentHeightRequest="100"
                                    AnimationContentWidthRequest="100"
                                    AnimationContentColor="#674bb2"
                                    AutomationId="busyIndicator"
                                    IsBusy="True">
    <telerik:RadBusyIndicator.Content>
        <Label Text="This is the content of the RadBusyIndicator control displayed when the indicator is not busy." TextColor="Black" />
    </telerik:RadBusyIndicator.Content>
</telerik:RadBusyIndicator>

2. Add the telerik namespace:

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

3. Register the Telerik controls through the Telerik.Maui.Controls.Compatibility.UseTelerik extension method called inside the CreateMauiApp method of the MauiProgram.cs file of your project:

using Telerik.Maui.Controls.Compatibility;

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

Placing controls inside the RadBusyIndicator.Content that provide UI virtualization (controls like Listview, CollectionView, DataGrid) is not recommended. For more details how to integrate the RadBusyIndocator with such controls, review the Integration article.

For a runnable example with the BusyIndicator Getting Started scenario, see the SDKBrowser Demo Application and go to BusyIndicator > Getting Started.

Additional Resources

• .NET MAUI BusyIndicator Product Page
• .NET MAUI BusyIndicator Forum Page
• Telerik .NET MAUI Blogs
• Telerik .NET MAUI Roadmap

See Also

• Animations
• Custom Busy Content