BlackWaspTM

This web site uses cookies. By using the site you accept the cookie policy.This message is for compliance with the UK ICO law.

Windows Presentation Foundation
.NET 4.0+

WPF Information Controls - StatusBar

The forty-third part of the Windows Presentation Foundation Fundamentals tutorial looks at a further WPF information control. This article describes the StatusBar, which displays messages and progress details in a horizontal strip.

StatusBar

Many applications employ a status bar to report information about the progress of operations or the current state of the software. A status bar is usually a thin, horizontal strip at the bottom of a window. Sometimes it just shows simple text. For more complex programs, the status bar may be split into many sections containing text, glyphs, progress bars and interactive controls.

When developing software using WPF, you can easily add a status bar to an application using the StatusBar control. The StatusBar class inherits from ItemsControl, meaning that you can add multiple child controls and text elements to the bar.

To demonstrate, let's start with a simple example. Create a new WPF application project in Visual Studio, naming the project, "StatusBarDemo". Once loaded, replace the XAML in the main window with the code below:

<Window x:Class="StatusBarDemo.MainWindow"
        xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
        xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
        Title="StatusBar Demo"
        Width="250"
        Height="200">
    <DockPanel>
        <StatusBar DockPanel.Dock="Bottom">
            Loading...
        </StatusBar>
        <Label>StatusBar Example</Label>
    </DockPanel>
</Window>

This code includes several controls. The DockPanel is included to allow the StatusBar to be docked to the bottom of the screen. You could dock the StatusBar in other positions or use an alternative layout control. However, the DockPanel approach is probably the most common. The StatusBar itself contains simple text in this case and the Label is included to show how other controls would be arranged within the DockPanel.

The resultant window appears as shown below:

WPF StatusBar

Adding a Control to a StatusBar

A common use of a status bar is to show the progress of a task with a progress bar. You can achieve this by simply adding a ProgressBar control within the StatusBar's XAML element.

For example:

<StatusBar DockPanel.Dock="Bottom">
    <ProgressBar Width="100" Height="15" Value="67" />
</StatusBar>

The status bar now appears as follows:

WPF StatusBar with ProgressBar

Adding Multiple Controls

As the StatusBar type is a subclass of ItemsControl, you can add any number of child controls. These are displayed across the status bar in the order in which they are defined. For example, you could combine the "Loading..." message and the progress indicator side by side with the following XAML:

<StatusBar DockPanel.Dock="Bottom">
    <TextBlock>Loading...</TextBlock>
    <ProgressBar Width="100" Height="15" Value="67" />
</StatusBar>

This gives the following results:

WPF StatusBar with Two Child Controls

Using Separators

You will often see status bars with sections that are separated by a vertical line with a standard style. You can insert such section boundaries by adding Separator controls. Separator controls can be used with several parents, including progress bars, list boxes, tool bars and menus. Although it is possible to modify the style of a Separator, you can use the standard style to ensure that the user interface is consistent with the version of Microsoft Windows that is in use.

The final example includes two textual elements and a ProgressBar, with separators between each item.

<StatusBar DockPanel.Dock="Bottom">
    Loading...
    <Separator />
    <ProgressBar Width="100" Height="15" Value="67" />
    <Separator />
    67%
</StatusBar>

You can see that the separators appear as thin vertical lines when rendered using Windows 7.

WPF StatusBar with Separators

10 January 2014