Custom Busy Content

RadBusyIndicator provides the option to customize what's shown in the RadBusyIndicator's content while the indicator is active through its BusyContent and BusyContentTemplate properties. We will cover them in the following sections:

Setting BusyContent property

BusyContent property sets the loading message while the indicator is active as shown in the following example:

Setting BusyContent

<telerik:RadBusyIndicator BusyContent="The report is currently loading..." > 
    <!-- the content here --> 
</telerik:RadBusyIndicator> 
Here is the result:

Setting BusyContentTemplate property

RadBusyIndicator exposes a BusyContentTemplate property which allows you to customize the DataTemplate shown while the indicator is in Busy state.

In this section we will show you how to create and apply a simple BusyContentTemplate to your RadBusyIndicator control. For the purpose of this example we will create a DispatcherTimer timer and while this timer is on, the RadBusyIndicator will also be active. To start the timer the user will have to click on a button. The example also includes a counter representing the progress value which will count down from 100 to 0 percent and will be visible through the RadBusyIndicator's busy content.

To do this, first you have to define your RadBusyIndicator control:

Defining RadBusyIndicator

<telerik:RadBusyIndicator x:Name="radBusyIndicator" 
                          Background="Transparent" 
                          BusyContentTemplate="{StaticResource BusyContentDataTemplate}"> 
    <Grid> 
         <TextBlock Text="Some Content" 
                    TextAlignment="Center" /> 
         <Button Content="Show RadBusyIndicator" 
                 VerticalAlignment="Bottom" 
                 Click="showIndicatorButton_Click" 
                 Width="150" /> 
    </Grid> 
</telerik:RadBusyIndicator> 

Notice that the RadBusyIndicator's Background property is set to Transparent. This will be the background applied to the indicator's content and the Grid hosting the RadBusyIndicator's progress bar and content elements.

In the RadBusyIndicator's definition you have indicated the BusyContentTemplate, that's why you have to define this DataTemplate as well. Here is an example:

Defining DataTemplate

<DataTemplate x:Key="BusyContentDataTemplate"> 
    <StackPanel Orientation="Horizontal" 
                DataContext="{Binding DataContext, ElementName=radBusyIndicator}"> 
        <TextBlock Text="Loading... " 
                   FontWeight="Bold" /> 
        <TextBlock Text="{Binding ProgressValue}" 
                   FontWeight="Bold" /> 
        <TextBlock Text="%" 
                   FontWeight="Bold" /> 
    </StackPanel> 
</DataTemplate> 
In the code behind you have to:
  • Create and initialize the DispathcherTimer object.

  • Handle the click event for the button:

    • Enable the RadBusyIndicator by setting its IsBusy property to True.

    • Start the timer that will count down some period of time.

  • Handle the tick event for the timer:

    • Modify the counter (progress) property.

    • Disable the RadBusyIndicator by setting its IsBusy property to False in a specific condition.

You can also create a determined RadBusyIndicator control which provides a straightforward way to report a changing progress value.

In order to use the DispatcherTimer and the INotifyPropertyChanged interface you will need to add the following usings/imports:

  • System.ComponentModel
  • System.Windows.Threading

BusyContentTemplateSample class implementation

public partial class BusyContentTemplateSample : UserControl, INotifyPropertyChanged 
{ 
    private int progressValue; 
    private DispatcherTimer progressTimer; 
    public event PropertyChangedEventHandler PropertyChanged; 
    public BusyContentTemplateSample() 
    { 
        InitializeComponent(); 
        this.DataContext = this; 
 
        this.progressTimer = new DispatcherTimer(); 
        this.progressTimer.Interval = TimeSpan.FromSeconds( 1 ); 
        this.progressTimer.Tick += new EventHandler( this.progressTimer_Tick ); 
    } 
    public int ProgressValue 
    { 
        get 
        { 
            return this.progressValue; 
        } 
        set 
        { 
            if ( this.progressValue == value ) 
                return; 
            this.progressValue = value; 
            if ( this.PropertyChanged != null ) 
                this.PropertyChanged( this, new PropertyChangedEventArgs( "ProgressValue" ) ); 
        } 
    } 
    private void showIndicatorButton_Click( object sender, RoutedEventArgs e ) 
    { 
        this.progressTimer.Start(); 
        this.ProgressValue = 100; 
        this.radBusyIndicator.IsBusy = true; 
    } 
    private void progressTimer_Tick( object sender, EventArgs e ) 
    { 
        this.ProgressValue--; 
        if ( this.ProgressValue == 0 ) 
        { 
            this.progressTimer.Stop(); 
            this.radBusyIndicator.IsBusy = false; 
        } 
    } 
} 
Public Partial Class BusyContentTemplateSample 
 Inherits UserControl 
 Implements INotifyPropertyChanged 
 Private m_progressValue As Integer 
 Private progressTimer As DispatcherTimer 
 Public Event PropertyChanged As PropertyChangedEventHandler 
 Public Sub New() 
  InitializeComponent() 
  Me.DataContext = Me 
  Me.progressTimer = New DispatcherTimer() 
  Me.progressTimer.Interval = TimeSpan.FromSeconds(1) 
  Me.progressTimer.Tick += New EventHandler(Me.progressTimer_Tick) 
 End Sub 
 Public Property ProgressValue() As Integer 
  Get 
   Return Me.m_progressValue 
  End Get 
  Set 
   If Me.m_progressValue = value Then 
    Return 
   End If 
   Me.m_progressValue = value 
   RaiseEvent PropertyChanged(Me, New PropertyChangedEventArgs("ProgressValue")) 
  End Set 
 End Property 
 Private Sub showIndicatorButton_Click(sender As Object, e As RoutedEventArgs) 
  Me.progressTimer.Start() 
  Me.ProgressValue = 100 
  Me.radBusyIndicator.IsBusy = True 
 End Sub 
 Private Sub progressTimer_Tick(sender As Object, e As EventArgs) 
  Me.ProgressValue -= 1 
  If Me.ProgressValue = 0 Then 
   Me.progressTimer.Stop 
   Me.radBusyIndicator.IsBusy = False 
  End If 
 End Sub 
End Class 

Here is the final result:

See Also

In this article
Not finding the help you need? Improve this article