WPF BusyIndicator

WPF BusyIndicator Control

Do you remember the wait cursor or an hourglass cursor in Windows applications? An alternative to the wait cursor is new BusyIndicator control.

A BusyIndicator control provides an alternative to a wait cursor to show user an indication that an application is busy doing some processing. It is a combination of the wait cursor and the ProgressBar control. 

This article demonstrates how to use the BusyIndicator control in a WPF application using C# and XAML.  

Adding Reference to WPF Toolkit Extended Assembly 

The BusyIndicator control is an extension to the WPF Toolkit and does not come with Visual Studio 2010. To use the BusyIndicator control in your application, you must add reference to the WPFToolkit.Extended.dll assembly. You can download Extended WPF Tookit from the CodePlex or you can use the WPFToolkit.Extended.dll available with this download. All you need is the DLL. See Downloads section of this article. 

After downloading the WPFToolkit.Extended.dll, you can add reference to your project by right clicking on the project name in Visual Studio, select Add Reference and browse the DLL.  See Figure 1.

Figure 1

Once the assembly reference is added, the next step is to import the namespace in XAML using the xmlns. As soon as you type xmlns in XAML you should see the http://schemas.microsoft.com/winfx/2006/xaml/presentation/toolkit/extended option in the list. See Figure 2. If you do not see this URL, please read the next section. 

Figure 2

Unblocking the WPF Toolkit Assembly 

If an assembly reference is not added to your project correctly, you will see the following message when you build your application.

Unable to load the metadata for assembly 'WPFToolkit.Extended'

You get this message when try to add reference to the Extended WPF Toolkit to a project and build the project.  The problem here is when you download an assembly from a Website, it is block by default. All you need to do is, unblock the assembly.

Right click on the DLL and click Unblock button. See Figure 3.  

Figure 3

Remove and add reference again. You are all set.

Creating a BusyIndicator

The BusyIndicator element represents a WPF BusyIndicator control in XAML. The BusyIndicator control is defined in the System.Windows.Controls namespace. Listing 1 creates a simple BusyIndicator control. The IsBusy property is used to show the control. 

<wpfx:BusyIndicator Name="BusyBar" IsBusy="True" />

Listing 1

The default output of Listing 1 generates Figure 4. 

 

Figure 4

BusyContent

The BusyContnet property represents the content part of the control. In Figure 1, you see the default content is Please wait… and if you want to change this message, all you need to do is set the BusyContent property to any text you want.  

<wpfx:BusyIndicator Name="BusyBar" IsBusy="True" BusyContent="Application is running a background process. Please wait..." />

Listing 2

For example, if I set the BusyContent property listed in Listing 2, the new output looks like Figure 5.

 

Figure 5

The BusyContent property doesn't always have to be a text content. It can be any WPF control, panel, or a control hosting multiple controls. Listing 3 creates a BusyIndicator control with Button content in it and the output looks like Figure 6. 

<wpfx:BusyIndicator Name="BusyBar" IsBusy="True" >     <wpfx:BusyIndicator.BusyContent>         <Button Name="BusyButton" Height="40" Width="200" Background="Blue"                  Foreground="White" Content="I am a Button " Click="BusyButton_Click" />     </wpfx:BusyIndicator.BusyContent>             </wpfx:BusyIndicator>

Listing 3

 Figure 6

BusyContentTemplate

We can customize a BusyIndicator control using the BusyContentTemplate property.  This property overrides the BusyContent property. Listing 4 sets the BusyContentTemplate property to a DataTemplate that has couple of buttons and a TextBlock. 

<wpfx:BusyIndicator.BusyContentTemplate>     <DataTemplate>         <StackPanel>             <TextBlock Text="Application is processing data." FontFamily="Georgia" FontWeight="Bold" />                                       <Grid>                 <Grid.ColumnDefinitions>                     <ColumnDefinition/>                     <ColumnDefinition/>                     <ColumnDefinition/>                 </Grid.ColumnDefinitions>                     <Grid.RowDefinitions>                         <RowDefinition />                         <RowDefinition />                         <RowDefinition />                     </Grid.RowDefinitions>                         <Button Grid.Column="0" Content="Start" HorizontalAlignment="Right"                          Width="80" Height="30" Grid.Row="1"/>                     <Button Grid.Column="2" Grid.Row="1" Content="Stop" HorizontalAlignment="Left"                          Width="80" Height="30" />             </Grid>         </StackPanel>     </DataTemplate> </wpfx:BusyIndicator.BusyContentTemplate>

 Listing 4

The output looks like Figure 7. 

 

Figure 7

BusyIndicator in Real World

So, not let's come to our main question. When should you be using the BusyIndicator control in your real world applications? 

The answer is simple. Any time your application needs to show a custom wait message when doing some background processing, you can use the BusyIndicator control. You can also show it to show the progress of the process.

I have built an application looks like Figure 8. The Start Processing button starts some background processing. When the processing is started, I display the BusyIndicator control using the following code:

BusyBar.IsBusy = true;

And when the processing is completed, I hide the BusyIndicator control. 

BusyBar.IsBusy = false;

Figure 8

Download the attached sample project for more details. You will need understanding the WPF Timer control and the WPF ListBox control to understand this sample.

Summary

In this article, I discussed how we can use a BusyIndicator control in WPF, XAML and C#.