Set Header in .NET MAUI Busy Indicator (SfBusyIndicator)
23 Aug 20247 minutes to read
Set Header in .NET MAUI Busy Indicator
The Syncfusion .NET MAUI Busy Indicator provides a feature to display a title with font customizations.
Title
.NET MAUI Busy Indicator provides option to set the text that indicates the information related to loading. This can be done using Title property.
<core:SfBusyIndicator x:Name="busyindicator"
IsRunning="True"
AnimationType="CircularMaterial"
Title="Loading..." />SfBusyIndicator busyIndicator = new SfBusyIndicator()
{
IsRunning = true,
AnimationType = AnimationType.CircularMaterial,
Title = "Loading...",
};The following screenshot illustrates the result of the above code.
Text Color
.NET MAUI Busy Indicator provides options to change the color of the text. The color of the text can be changed 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 screenshot illustrates the result of the above code.
Title Placement
.NET MAUI Busy Indicator provides options to set the Title at the top or bottom of the Busy Indicator. The Title can be set using the TitlePlacement property. When the Title is not needed, set the TitlePlacement property of SfBusyIndicator to None.
<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 screenshot illustrates the result of the above code.
Title Spacing
.NET MAUI Busy Indicator provides options to set the space between the indicator and the title. The space can be set using the TitleSpacing property.
<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 screenshot illustrates the result of the above code.
Font customization
.NET MAUI Busy Indicator provides options to customize the title text. The title text can be customized using the FontSize, FontAttributes, and FontFamily 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 screenshot illustrates the result of the above code.
Font auto scaling enabled
The FontAutoScalingEnabled property is used to automatically scale 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 FontAutoScalingEnabled="True"/>SfBusyIndicator busyIndicator = new SfBusyIndicator()
{
FontAutoScalingEnabled = true,
};