.NET 4.0+

WPF Information Controls - ProgressBar

by Richard Carr, published at http://www.blackwasp.co.uk/ProgressBar.aspx

The fortieth part of the Windows Presentation Foundation Fundamentals tutorial continues the examination of the WPF user information controls, which are non-interactive controls that provide user feedback. This article looks at progress bars.

ProgressBar

When you develop software that includes long-running tasks, displaying a progress bar is a good way to provide feedback to the user, so that they do not assume there is a problem. A progress bar is usually a long, thin strip of screen that fills with colour as the process progresses. Ideally, the amount of the bar that is filled represents the amount of work already completed.

In some cases it is not possible to know how much processing is required. In these situations an indeterminate progress bar may be used. This animates to show the user that the software has not crashed but does not give an indication of the amount of work completed or remaining.

When using WPF, you can create progress bars with the ProgressBar control. To demonstrate, we need a sample project. Create a new WPF application project in Visual Studio, naming the solution, "ProgressBarDemo". Once the solution is prepared, replace the XAML of the main window with the code shown below:

<Window x:Class="ProgressBarDemo.MainWindow"
        xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
        xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
        Title="ProgressBar Demo"
        Width="250"
        Height="100">
    <Grid>
        <Grid.ColumnDefinitions>
            <ColumnDefinition/>
            <ColumnDefinition/>
            <ColumnDefinition/>
        </Grid.ColumnDefinitions>
        <Grid.RowDefinitions>
            <RowDefinition/>
            <RowDefinition Height="Auto"/>
        </Grid.RowDefinitions>

        <RepeatButton Width="25" Height="25">-</RepeatButton>
        <RepeatButton Width="25" Height="25" Grid.Column="1">+</RepeatButton>
        <Button Width="25" Height="25" Grid.Column="2">?</Button>

        <ProgressBar Name="Progress"
                     Grid.Row="1"
                     Grid.ColumnSpan="3"
                     Height="25"/>
        <Label Name="ProgressText"
               Content="0"
               HorizontalAlignment="Center"
               Grid.Row="1"
               Grid.Column="1"/>
    </Grid>
</Window>

The XAML creates a window containing three Buttons, a ProgressBar and a Label. The ProgressBar appears behind the Label. This is a common layout that permits a visual indication of progress, along with some text that shows more accurate information.

Value Property

By default, ProgressBars let you display a value within the range from zero to one hundred. To set the current value and partially or totally fill the bar, you change the Value property. You can do this with an attribute in the ProgressBar's XAML or by setting the property from code, using a double-precision floating-point number. We'll do the latter using the first two buttons.

First, we need to add Click events to the two Buttons. To do so, replace the XAML of the two RepeatButton tags as follows.

<RepeatButton Click="Decrement_Click" Width="25" Height="25">-</RepeatButton>
<RepeatButton Click="Increment_Click" Width="25" Height="25" Grid.Column="1">+</RepeatButton>

Next we need to add the code behind the buttons. We'll make each button increment or decrement the Value property when clicked. Holding a button down will continuously raise the event, updating the value repeatedly. Each change in the ProgressBar's value will also copy the value into the Label control's Content.

Add the following code behind the window. Note that the Value is only changed if it will remain in the permitted range.

private void Decrement_Click(object sender, RoutedEventArgs e)
{
    if (Progress.Value > 0)
    {
        Progress.Value--;
    }
    SetProgressText();
}

private void Increment_Click(object sender, RoutedEventArgs e)
{
    if (Progress.Value < 100)
    {
        Progress.Value++;
    }
    SetProgressText();
}

private void SetProgressText()
{
    ProgressText.Content = Progress.Value;
}

Run the program and click the buttons to see the effect. The image below shows the result when the "+" button is clicked until the Value reaches 66.