Set Header in .NET MAUI Busy Indicator (SfBusyIndicator)

23 Jul 20268 minutes to read

The Syncfusion® .NET MAUI Busy Indicator allows you display a title and customize its font. This section covers the title, its color, placement, spacing, and font customization.

Prerequisites

Before using the SfBusyIndicator, ensure the following NuGet package is installed in your .NET MAUI project:

  • Syncfusion.Maui.Core

For a step-by-step setup, refer to the Getting Started documentation.

Title

The .NET MAUI Busy Indicator allows you set text that describes the loading state using the Title property. The default value is an empty string.

<core:SfBusyIndicator x:Name="busyindicator"
                      IsRunning="True"
                      AnimationType="CircularMaterial"
                      Title="Loading..." />
SfBusyIndicator busyIndicator = new SfBusyIndicator()
{
    IsRunning = true,
    AnimationType = AnimationType.CircularMaterial,
    Title = "Loading...",
};

The following image illustrates the result of the above code.

Title

TextColor

The .NET MAUI Busy Indicator allows you change the color of the title text using the TextColor property.

<core:SfBusyIndicator x:Name="busyindicator"
                      IsRunning="True"
                      AnimationType="CircularMaterial"
                      Title="Loading..."
                      TextColor="Red" />
SfBusyIndicator busyIndicator = new SfBusyIndicator()
{
    IsRunning = true,
    AnimationType = AnimationType.CircularMaterial,
    Title = "Loading...",
    TextColor = Colors.Red,
};

The following image illustrates the result of the above code.

TitleColor

TitlePlacement

The .NET MAUI Busy Indicator provides options to set the Title at the top or bottom of the Busy Indicator using the TitlePlacement property. The valid values are Top, Bottom, and None (to omit the title). The default value is Bottom.

<core:SfBusyIndicator x:Name="busyindicator"
                      IsRunning="True"
                      AnimationType="CircularMaterial"
                      Title="Loading..."
                      TextColor="Red"
                      TitlePlacement="Top" />
SfBusyIndicator busyIndicator = new SfBusyIndicator()
{
    IsRunning = true,
    AnimationType = AnimationType.CircularMaterial,
    Title = "Loading...",
    TextColor = Colors.Red,
    TitlePlacement = BusyIndicatorTitlePlacement.Top,
};

The following image illustrates the result of the above code.

TitlePlacement

TitleSpacing

You can set the space between the indicator and the title using the TitleSpacing property. The default value is 10.

<core:SfBusyIndicator x:Name="busyindicator"
                      IsRunning="True"
                      AnimationType="CircularMaterial"
                      Title="Loading..."
                      TextColor="Red"
                      TitlePlacement="Top"
                      TitleSpacing="20" />
SfBusyIndicator busyIndicator = new SfBusyIndicator()
{
    IsRunning = true,
    AnimationType = AnimationType.CircularMaterial,
    Title = "Loading...",
    TextColor = Colors.Red,
    TitlePlacement = BusyIndicatorTitlePlacement.Top,
    TitleSpacing = 20,
};

The following gif image illustrates the result of the above code.

TitleSpacing

Font customization

The .NET MAUI Busy Indicator allows you customize the title text using the FontSize (double), FontAttributes (FontAttributes enum), and FontFamily (string) properties.

<core:SfBusyIndicator x:Name="busyindicator"
                      IsRunning="True"
                      AnimationType="CircularMaterial"
                      Title="Loading..."
                      TextColor="Red"
                      FontSize="16"
                      FontAttributes="Bold"
                      FontFamily="serif" />
SfBusyIndicator busyIndicator = new SfBusyIndicator()
{
    IsRunning = true,
    AnimationType = AnimationType.CircularMaterial,
    Title = "Loading...",
    TextColor = Colors.Red,
    FontSize = 16,
    FontAttributes = FontAttributes.Bold,
    FontFamily = "serif",
};

The following gif image illustrates the result of the above code.

Font customization

FontAutoScalingEnabled

The FontAutoScalingEnabled property automatically scales the Busy Indicator’s title font size based on the operating system’s text size. The default value of the FontAutoScalingEnabled property is false.

<core:SfBusyIndicator x:Name="busyindicator"
                      IsRunning="True"
                      AnimationType="CircularMaterial"
                      Title="Loading..."
                      FontAutoScalingEnabled="True" />
SfBusyIndicator busyIndicator = new SfBusyIndicator()
{
    IsRunning = true,
    AnimationType = AnimationType.CircularMaterial,
    Title = "Loading...",
    FontAutoScalingEnabled = true,
};

See Also