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