New to Telerik UI for .NET MAUI? Start a free 30-day trial

.NET MAUI BusyIndicator Content

This article explains the content options of the BusyIndicator when the control is and isn't in a busy state.

When the control is not busy you can display a content using the Content(View) property.

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

The ContentUnderOpacity(double)—Defines the opacity when the indicator is busy. the content behind the indicator is visible. The default value is 0.

<telerik:RadBusyIndicator x:Name="BusyIndicator" ContentUnderOpacity="0.4">
   <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>

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.

Busy Content

Setting the BusyContent property of BusyIndicator allows you to display any content together with the built-in animations while the control is in its Busy state.

Custom Busy Content

You can customize the BusyContentTemplate to arrange the custom content and the animated content per your choice.

The following example demonstrates how to customize the busy content.

1. Apply the BusyContent and BusyContentTemplate properties.

<telerik:RadBusyIndicator x:Name="BusyIndicator"
                          AnimationContentHeightRequest="100"
                          AnimationContentWidthRequest="100"  
                          AnimationType="Animation6"                                            
                          IsBusy="True">           
    <telerik:RadBusyIndicator.BusyContent>
        <Label Text="Working on it, just a moment, please..." />
    </telerik:RadBusyIndicator.BusyContent>
    <telerik:RadBusyIndicator.BusyContentTemplate>
        <ControlTemplate>
            <Grid>
                <Grid.RowDefinitions>
                    <RowDefinition Height="Auto" />
                    <RowDefinition Height="Auto" />
                    <RowDefinition Height="*" />
                </Grid.RowDefinitions>
                <ContentPresenter Content="{TemplateBinding Path=AnimationContent}" />
                <ContentPresenter Grid.Row="1"
                                  Content="{TemplateBinding Path=BusyContent}"
                                  HorizontalOptions="Center" />
            </Grid>
        </ControlTemplate>
    </telerik:RadBusyIndicator.BusyContentTemplate>
</telerik:RadBusyIndicator>

2. Add the telerik namespace:

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

The following image shows the result.

BusyIndicator custom busy content

See Also

In this article