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 Menu Controls - ToolBar

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.

Enabling the Commands

Let's configure the buttons on the ToolBar so that they react to being clicked. We can add the same Click event target to each one. To do so, modify the XAML for the ToolBar control, as follows. This registers the event and adds a Tag that we'll use to identify which button was clicked.

<ToolBar DockPanel.Dock="Top" Height="28">
    <Button Click="BtnClk" Tag="New"><Image Source="/Icons/New.png"/></Button>
    <Button Click="BtnClk" Tag="Open"><Image Source="/Icons/Open.png"/></Button>
    <Button Click="BtnClk" Tag="Save"><Image Source="/Icons/Save.png"/></Button>
    <Button Click="BtnClk" Tag="Print"><Image Source="/Icons/Print.png"/></Button>
    <Button Click="BtnClk" Tag="Email"><Image Source="/Icons/Email.png"/></Button>
    <Button Click="BtnClk" Tag="Cut"><Image Source="/Icons/Cut.png"/></Button>
    <Button Click="BtnClk" Tag="Copy"><Image Source="/Icons/Copy.png"/></Button>
    <Button Click="BtnClk" Tag="Paste"><Image Source="/Icons/Paste.png"/></Button>
    <ToggleButton Click="BtnClk" Tag="Bold" Width="20" FontWeight="Bold">B</ToggleButton>
    <ToggleButton Click="BtnClk" Tag="Italic" Width="20" FontStyle="Italic">I</ToggleButton>
    <Button Click="BtnClk" Tag="Left"><Image Source="/Icons/Left.png"/></Button>
    <Button Click="BtnClk" Tag="Centre"><Image Source="/Icons/Centre.png"/></Button>
    <Button Click="BtnClk" Tag="Right"><Image Source="/Icons/Right.png"/></Button>
    <Button Click="BtnClk" Tag="Full Screen"><Image Source="/Icons/FullScreen.png"/></Button>
    <Button Click="BtnClk" Tag="Help"><Image Source="/Icons/Help.png"/></Button>
</ToolBar>

Now add the code behind the window that displays the tag of the clicked button:

private void BtnClk(object sender, RoutedEventArgs e)
{
    var button = sender as FrameworkElement;
    MessageBox.Show(button.Tag.ToString());
}

Run the program and click the buttons to see the results.

NB: Each button could be linked to a different event if required, or commands could be connected to the buttons using command binding, which will be described later in this tutorial.

Adding Separators

Tool bars do not have the natural hierarchy of menus. However, as with menus and some other commands, you can add logical grouping by inserting Separators. Try modifying the XAML for the ToolBar to include some Separators, as follows:

<ToolBar DockPanel.Dock="Top" Height="28">
    <Button Click="BtnClk" Tag="New"><Image Source="/Icons/New.png"/></Button>
    <Button Click="BtnClk" Tag="Open"><Image Source="/Icons/Open.png"/></Button>
    <Button Click="BtnClk" Tag="Save"><Image Source="/Icons/Save.png"/></Button>
    <Separator/>
    <Button Click="BtnClk" Tag="Print"><Image Source="/Icons/Print.png"/></Button>
    <Button Click="BtnClk" Tag="Email"><Image Source="/Icons/Email.png"/></Button>
    <Separator/>
    <Button Click="BtnClk" Tag="Cut"><Image Source="/Icons/Cut.png"/></Button>
    <Button Click="BtnClk" Tag="Copy"><Image Source="/Icons/Copy.png"/></Button>
    <Button Click="BtnClk" Tag="Paste"><Image Source="/Icons/Paste.png"/></Button>
    <Separator/>
    <ToggleButton Click="BtnClk" Tag="Bold" Width="20" FontWeight="Bold">B</ToggleButton>
    <ToggleButton Click="BtnClk" Tag="Italic" Width="20" FontStyle="Italic">I</ToggleButton>
    <Separator/>
    <Button Click="BtnClk" Tag="Left"><Image Source="/Icons/Left.png"/></Button>
    <Button Click="BtnClk" Tag="Centre"><Image Source="/Icons/Centre.png"/></Button>
    <Button Click="BtnClk" Tag="Right"><Image Source="/Icons/Right.png"/></Button>
    <Separator/>
    <Button Click="BtnClk" Tag="Full Screen"><Image Source="/Icons/FullScreen.png"/></Button>
    <Separator/>
    <Button Click="BtnClk" Tag="Help"><Image Source="/Icons/Help.png"/></Button>
</ToolBar>

When you run the program you should see additional spacing and a vertical line between buttons that have been separated.

WPF ToolBar with separators

Adding Other Controls

The ToolBar control is just a container for other controls. You can add any control to it, although some are suited to the small area of the tool bar and some are not. For some controls, such a ComboBoxes and CheckBoxes, placing them within a ToolBar can change the style of the control.

To demonstrate, let's add a ComboBox to the ToolBar, placing it to the right of the two ToggleButtons. Update the XAML for the ToolBar for the final time:

<ToolBar DockPanel.Dock="Top" Height="28">
    <Button Click="BtnClk" Tag="New"><Image Source="/Icons/New.png"/></Button>
    <Button Click="BtnClk" Tag="Open"><Image Source="/Icons/Open.png"/></Button>
    <Button Click="BtnClk" Tag="Save"><Image Source="/Icons/Save.png"/></Button>
    <Separator/>
    <Button Click="BtnClk" Tag="Print"><Image Source="/Icons/Print.png"/></Button>
    <Button Click="BtnClk" Tag="Email"><Image Source="/Icons/Email.png"/></Button>
    <Separator/>
    <Button Click="BtnClk" Tag="Cut"><Image Source="/Icons/Cut.png"/></Button>
    <Button Click="BtnClk" Tag="Copy"><Image Source="/Icons/Copy.png"/></Button>
    <Button Click="BtnClk" Tag="Paste"><Image Source="/Icons/Paste.png"/></Button>
    <Separator/>
    <ToggleButton Click="BtnClk" Tag="Bold" Width="20" FontWeight="Bold">B</ToggleButton>
    <ToggleButton Click="BtnClk" Tag="Italic" Width="20" FontStyle="Italic">I</ToggleButton>
    <ComboBox Width="100">
        <ComboBoxItem>Arial</ComboBoxItem>
        <ComboBoxItem>Consolas</ComboBoxItem>
        <ComboBoxItem>Times New Roman</ComboBoxItem>
        <ComboBoxItem>Wingdings</ComboBoxItem>
    </ComboBox>
    <Separator/>
    <Button Click="BtnClk" Tag="Left"><Image Source="/Icons/Left.png"/></Button>
    <Button Click="BtnClk" Tag="Centre"><Image Source="/Icons/Centre.png"/></Button>
    <Button Click="BtnClk" Tag="Right"><Image Source="/Icons/Right.png"/></Button>
    <Separator/>
    <Button Click="BtnClk" Tag="Full Screen"><Image Source="/Icons/FullScreen.png"/></Button>
    <Separator/>
    <Button Click="BtnClk" Tag="Help"><Image Source="/Icons/Help.png"/></Button>
</ToolBar>

Run the program to see the results. You should find that the ComboBox is added between the "I" button and the subsequent Separator.

WPF ToolBar with other combo box

16 July 2014