Dealing with Busy State in UWP Busy Indicator

18 Nov 20182 minutes to read

UWP Busy Indicator 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

UWP Busy Indicator Caption

UWP Busy Indicator 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 UWP Busy Indicator Caption

UWP Busy Indicator 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 UWP Busy Indicator

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

Here is an example showing resized UWP Busy Indicator.

<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