BusyIndicator with a Cancel-Button

Introduction

The WPF Toolkit introduces a BusyIndiactor control, which you can display to the user when your program is executing a time consuming task. You can inform the user about the progress of the task, but there is no built in way that allows the user to cancel the task. I show a simple way to introduce such a button to the BusyIndicator control.

Using the Code

The first thing is to add the BusyIndicator to your User Control and set the Style property.

<xctk:BusyIndicator Style="{DynamicResource CancelBusyIndicatorStyle}">

You can define the style in the same User Control. Add a Resources-Entry directly to the top of the User Control. If you use expression blend, you can mark the BusyIndicator in the Objects and Timeline Box on the left hand side. On top of the mainwindow, there is a Box with the name of your marked BusyIndicator. If you click in that box, a dropdown menu will open. Click Edit Template, then Edit a Copy ... In the appearing dialog box, you can give the style a name like CancelBusyIndicatorStyle. Leave Define in at This document and click the Ok Button. You now have a lot of lines with a copy of the style of the BusyIndicator.

<UserControl.Resources>
  <Style x:Key="CancelBusyIndicatorStyle" 
  TargetType="{x:Type xctk:BusyIndicator}">
  ...
  </Style>
</UserControl.Resource>

Scroll down until you are almost at the bottom of the Style-definition. There is the definition of the ContentPresenter named busycontent. It contains a nameless Grid that you can identify by the MinWidth-Property of 150. To this object, we want to add our button. The code should look like this:

<Grid MinWidth="150">
  <Grid.RowDefinitions>
    <RowDefinition/>
    <RowDefinition Height="Auto"/>
  </Grid.RowDefinitions>
  <ContentPresenter ContentTemplate="{TemplateBinding BusyContentTemplate}" 
    Content="{TemplateBinding BusyContent}" Margin="8"/>
  <ProgressBar Grid.Row="1" Style="{TemplateBinding ProgressBarStyle}"/>
</Grid>

We need to add another row to this grid and we need to add the button. The code should now look like this (added lines are bold):

<Grid MinWidth="150">
  <Grid.RowDefinitions>
    <RowDefinition/>
    <RowDefinition Height="Auto"/>
    <RowDefinition Height="Auto"/>
  </Grid.RowDefinitions>
  <ContentPresenter ContentTemplate="{TemplateBinding BusyContentTemplate}" 
    Content="{TemplateBinding BusyContent}" Margin="8"/>
  <ProgressBar Grid.Row="1" 
  Style="{TemplateBinding ProgressBarStyle}"/>
  <Button x:Name="Button_Cancel" 
  Grid.Row="2" Content="Cancel" Margin="0,0,0,5" 
    Width="50" Click="<code>Button_Cancel_Click"/>
</Grid>

All that is left to do now is to add the EventHandler for the Click-event to the code behind file of your User Control:

private void <code>Button_Cancel_Click(object sender, System.Windows.RoutedEventArgs e)
{
  MessageBox.Show("Cancel");
}

Instead of showing a MessageBox, you can execute the code to cancel the task your program is executing and the user wants to be canceled.

History

• 26.11.2014 Initial post