Getting Started with WinUI BusyIndicator

13 Aug 20265 minutes to read

This section explains how to add and configure the SfBusyIndicator control in a WinUI application and demonstrates the basic features required to get started.

Creating an application with WinUI BusyIndicator control

1. Create a WinUI 3 desktop app for C#.
2. Install the Syncfusion.Notifications.WinUI NuGet package.
3. Import the Syncfusion.UI.Xaml.Notifications namespace in XAML or C#.

4. Create and initialize the SfBusyIndicator control and add it to the window. Set IsActive to true to display the indicator.

   XAML

   <Window
       x:Class="GettingStarted.MainWindow"
       xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
       xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
       xmlns:local="using:GettingStarted"
       xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
       xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
       xmlns:notification="using:Syncfusion.UI.Xaml.Notifications"
       mc:Ignorable="d">
       <Grid>
         <notification:SfBusyIndicator IsActive="True"/>
       </Grid>
   </Window>

   C#

   using Microsoft.UI.Xaml;
   using Syncfusion.UI.Xaml.Notifications;
      
   namespace GettingStarted;
      
   /// <summary>
   /// An empty window that can be used on its own or navigated to within a Frame.
   /// </summary>
   public sealed partial class MainWindow : Window
   {
       public MainWindow()
       {
           this.InitializeComponent();
           SfBusyIndicator busyIndicator = new SfBusyIndicator();
           busyIndicator.IsActive = true;
           this.Content = busyIndicator;
       }
   }

Setting the animation type in BusyIndicator

The BusyIndicator control provides eight predefined animation types, such as DottedCircle, DottedCircularFluent, DottedLinear, LinearIndicator, Pulse, Ripple, SingleCircle, and Slices. You can choose any of the predefined animation types by setting the AnimationType property. The default value is DottedCircle.

XAML

<Window
    x:Class="GettingStarted.MainWindow"
    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
    xmlns:local="using:GettingStarted"
    xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
    xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
    xmlns:notification="using:Syncfusion.UI.Xaml.Notifications"
    mc:Ignorable="d">
    <Grid>
      <notification:SfBusyIndicator IsActive="True"
           AnimationType="DottedLinear">
      </notification:SfBusyIndicator>
    </Grid>
</Window>

C#

using Microsoft.UI.Xaml;
using Syncfusion.UI.Xaml.Notifications;

namespace GettingStarted;

public sealed partial class MainWindow : Window
{
    public MainWindow()
    {
        this.InitializeComponent();
        SfBusyIndicator busyIndicator = new SfBusyIndicator();
        busyIndicator.IsActive = true;
        busyIndicator.AnimationType = BusyIndicatorAnimationType.DottedLinear;
        this.Content = busyIndicator;
    }
}

Displaying content in BusyIndicator

The BusyIndicator control provides an option to set the content that indicates the busy status of the control to the user, by using the BusyContent property. The content is rendered alongside the animation while IsActive is true, and is hidden when IsActive is false.

XAML

<Window
    x:Class="GettingStarted.MainWindow"
    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
    xmlns:local="using:GettingStarted"
    xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
    xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
    xmlns:notification="using:Syncfusion.UI.Xaml.Notifications"
    mc:Ignorable="d">
    <Grid>
      <notification:SfBusyIndicator IsActive="True"
           AnimationType="DottedCircularFluent"
           BusyContent="Loading">
      </notification:SfBusyIndicator>
    </Grid>
</Window>

C#

using Microsoft.UI.Xaml;
using Syncfusion.UI.Xaml.Notifications;

namespace GettingStarted;

public sealed partial class MainWindow : Window
{
    public MainWindow()
    {
        this.InitializeComponent();
        SfBusyIndicator busyIndicator = new SfBusyIndicator();
        busyIndicator.IsActive = true;
        busyIndicator.AnimationType = BusyIndicatorAnimationType.DottedCircularFluent;
        busyIndicator.BusyContent = "Loading";
        this.Content = busyIndicator;
    }
}