New to Telerik UI for WinUI? Download free 30-day trial

Getting Started

This tutorial will walk you through the creation of a sample application that contains RadBusyIndicator.

The RadBusyIndicator is displayed on the UI thread. If this thread is blocked, the control will not be shown. It is meant to indicate to the user that there is a long running background task/process.

Assembly References

In order to use RadBusyIndicator in your projects, you have to add references to the following assembly:

  • Telerik.WinUI.Controls.dll

Adding RadBusyIndicator to the Project

Make sure the required assembly reference is added to the project before you proceed with adding RadBusyIndicator to your project.

You can access the RadBusyIndicator control through an alias pointing to the Telerik.UI.Xaml.Controls.Primitives namespace: xmlns:primitives="using:Telerik.UI.Xaml.Controls.Primitives"

You can add RadBusyIndicator manually by writing the XAML code in Example 1.

Example 1: Adding RadBusyIndicator in XAML

<primitives:RadBusyIndicator x:Name="radBusyIndicator"/>     
When you are using RadBusyIndicator, you can set its Content property. The content will be displayed next to the animation. This content may give useful information about the process being indicated by the control. To activate RadBusyIndicator you have to set its IsActive boolean property to True. It is a Dependency property that you can data bind in any way that suits your custom logic. Example 3 demonstrates RadBusyIndicator:

RadBusyIndicator will be visible only when the IsActive property is set to True.

Example 3: Adding Content

 <primitives:RadBusyIndicator ContentPosition="Right" IsActive="True" Content="Custom text" x:Name="indicator" /> 
If you run the application you will see RadBusyIndicator placed on the left side of its Content.

Figure 1: This figure is generated by the code in Example 3

Customizing the Indicator's Colors

Similarly to other controls, you can change the color of the text via the Foreground property.

If you want to change the default colors used for the indicator and for the overlay displayed over the underlying controls, however, you need to override the TelerikBusyIndicator_IndicatorBackground and TelerikBusyIndicator_OverlayBackground brushes.

Example 4: Customize Colors

 <primitives:RadBusyIndicator IsActive="True" Foreground="Red"> 
      <primitives:RadBusyIndicator.Resources> 
           <SolidColorBrush x:Key="TelerikBusyIndicator_IndicatorBackground" Color="Red" /> 
           <SolidColorBrush x:Key="TelerikBusyIndicator_OverlayBackground" Color="#33FF0000" /> 
      </primitives:RadBusyIndicator.Resources> 
 </primitives:RadBusyIndicator> 

Figure 2: RadBusyIndicator with Customized Colors

RadBusyIndicator with Customized Colors

See Also

In this article
Not finding the help you need?