Dealing with Busy State in UWP Busy Indicator (SfBusyIndicator)

10 May 20212 minutes to read

SfBusyIndicator can be shown/hidden using the IsBusy property. By default, IsBusy is true.

  • IsBusy=True – shows the indicator
  • IsBusy=False – collapses the indicator
<Grid Background="CornflowerBlue">

<Notification:SfBusyIndicator IsBusy="True"/>

</Grid>
SfBusyIndicator busyIndicator = new SfBusyIndicator();
busyIndicator.IsBusy = true;
Dim busyIndicator As New SfBusyIndicator()
busyIndicator.IsBusy = True

Enable the Animation to Show

Busy Caption

SfBusyIndicator can be captioned along with the attractive animation. Header is displayed below the animation and it can be a text, image etc. Header is collapsed along with the animation when IsBusy is set to false.

<Grid Background="CornFlowerBlue"/>

<notification:SfBusyIndicator Header="Loading..."/>

</Grid>
SfBusyIndicator busyIndicator = new SfBusyIndicator();

busyIndicator.Header = "Loading...";
Dim busyIndicator As New SfBusyIndicator()

busyIndicator.Header = "Loading..."

Provide the Animation Header

Customizing Busy Caption

SfBusyIndicator header can be customized using the HeaderTemplate property.

<Grid Background="CornflowerBlue">

<notification:SfBusyIndicator Header="Loading...">

<notification:SfBusyIndicator.HeaderTemplate>

<DataTemplate>

<Grid Margin="50 0 0 18">

<TextBlock Text="{Binding}" FontSize="16" FontWeight="Bold"/>

</Grid>

</DataTemplate>

</notification:SfBusyIndicator.HeaderTemplate>

</notification:SfBusyIndicator>

</Grid>

Provide the Template for Header

Sizing the BusyIndicator

Width and Height properties which are used for sizing the control does not resize the animating element inside SfBusyIndicator. Set the properties ViewBoxHeight and ViewBoxWidth for sizing the animation inside SfBusyIndicator.

Here is an example showing resized SfBusyIndicator.

<Grid Background="CornFlowerBlue"/>

<notification:SfBusyIndicator ViewboxHeight=”70” ViewboxWidth=”70/>

</Grid>
SfBusyIndicator busyIndicator = new SfBusyIndicator();

busyIndicator.ViewboxHeight = 70.0;

busyIndicator.ViewboxWidth = 70.0;
Dim busyIndicator As New SfBusyIndicator()

busyIndicator.ViewboxHeight = 70.0

busyIndicator.ViewboxWidth = 70.0

Provide the Size of the Control