.NET 4.0+

WPF Menu Controls - ToolBar

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

The seventy-ninth part of the Windows Presentation Foundation Fundamentals tutorial describes another of the WPF menu controls. This article looks at the ToolBar class, which presents a series of commands, usually as a strip of small buttons.

ToolBar

In recent articles in the tutorial we've looked at the menu controls, including Menu, MenuItem and ContextMenu, which allow you to present the user with a large number of commands and options in a hierarchical structure. A common user interface pattern for very complex menus is to compliment them with a tool bar containing the most commonly used commands. A tool bar is a strip of screen containing Buttons and other interactive controls, often providing a graphical representation of the functions being used.

Tool bars are becoming less common, with some modern applications preferring a ribbon design. Ribbons combine features of menus and tool bars in a single control. However, many applications, particularly technical ones such as Visual Studio, continue to rely on tool bars.

To demonstrate the control we need a sample application. Create a new WPF application project in Visual Studio. As the tool bar control is provided by the ToolBar class, name the project, "ToolBarDemo".

We'll be using buttons that show images rather than plain text. Begin by clicking the following link to download the icons in a zip file. Extract the zip file, then add a folder named, "Icons" to the project using the commands in the Solution Explorer. Finally, add all of the icon images to that folder.

With the folder and files correctly added, the Solution Explorer should appear similar to the image below:

We can now modify the XAML for the main window to define a layout containing a ToolBar control. The code below positions a ToolBar at the top of the window, using a DockPanel to control the layout.

<Window x:Class="ToolBarDemo.MainWindow"
	    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
	    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
	    Title="ToolBar Demo"
	    Height="200"
	    Width="450">
    <DockPanel Background="Gray">
        <ToolBar DockPanel.Dock="Top" Height="28">
            <Button><Image Source="/Icons/New.png"/></Button>
            <Button><Image Source="/Icons/Open.png"/></Button>
            <Button><Image Source="/Icons/Save.png"/></Button>
            <Button><Image Source="/Icons/Print.png"/></Button>
            <Button><Image Source="/Icons/Email.png"/></Button>
            <Button><Image Source="/Icons/Cut.png"/></Button>
            <Button><Image Source="/Icons/Copy.png"/></Button>
            <Button><Image Source="/Icons/Paste.png"/></Button>
            <ToggleButton Width="20" FontWeight="Bold">B</ToggleButton>
            <ToggleButton Width="20" FontStyle="Italic">I</ToggleButton>
            <Button><Image Source="/Icons/Left.png"/></Button>
            <Button><Image Source="/Icons/Centre.png"/></Button>
            <Button><Image Source="/Icons/Right.png"/></Button>
            <Button><Image Source="/Icons/FullScreen.png"/></Button>
            <Button><Image Source="/Icons/Help.png"/></Button>
        </ToolBar>
        <TextBox TextWrapping="Wrap"/>
    </DockPanel>
</Window>

You can see that the contents of the ToolBar are defined using a series of controls within its XAML tag. The controls are mainly simple buttons, with two toggle buttons representing features that can be enabled and disabled. Note that most of the buttons use an Image for their content. The two ToggleButtons use formatted text.

Run the program to see the layout, which will be similar to the following:

The ToolBar has several sections. At the left is a vertical, dotted line. This is used when the ToolBar is configured in a way that allows it to be repositioned using the mouse. Next, all of the contents of the control are displayed; in our case this is a series of buttons. They are organised from left to right, in a similar manner to that of a StackPanel with a horizontal orientation.

Finally, at the end of the tool bar is a grey area with a drop-down arrow icon. This is the overflow area. If there are more controls than can be seen in the available area of the bar, this section becomes enabled. Clicking it shows the hidden items. You can demonstrate this by reducing the width of the window until some of the buttons are hidden.