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 - ToolBarTray

The eightieth part of the Windows Presentation Foundation Fundamentals tutorial describes the last of the WPF menu controls. This instalment looks at the ToolBarTray class, which controls the layout of Toolbars.

ToolBarTray

The ToolBarTray class provides a container for the ToolBar control, which we looked at in the previous article. By placing tool bars within a tray, they are automatically given extra features. Toolbars are grouped together, either side by side or one above the other, and the user is given the ability to move them using familiar drag and drop techniques. You can also orientate toolbars vertically instead of horizontally, so that their buttons are organised into a vertical column.

To demonstrate, let's create a new WPF Application project in Visual Studio. Name the solution, "ToolBarTrayDemo". Once prepared, replace the XAML of the main window with the following:

<Window x:Class="ToolBarTrayDemo.MainWindow"
        xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
        xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
        Title="ToolBarTray Demo"
        Height="200"
        Width="250">
    <DockPanel>
        <ToolBarTray DockPanel.Dock="Top">
            <ToolBar>
                <Button>A</Button>
                <Button>B</Button>
                <Button>C</Button>
            </ToolBar>
            <ToolBar>
                <Button>D</Button>
                <Button>E</Button>
                <Button>F</Button>
            </ToolBar>
            <ToolBar>
                <Button>G</Button>
                <Button>H</Button>
                <Button>I</Button>
            </ToolBar>
        </ToolBarTray>
        <TextBox TextWrapping="Wrap" />
    </DockPanel>
</Window>

This XAML creates a window containing a ToolBarTray that holds three ToolBars. Note how the ToolBar controls are included as the content of the tray's XAML tag. When working with the bars programmatically, you can use the ToolBars collection property. In this case, for simplicity, the Buttons in the bars have plain text for their content. Run the program to see the results.

WPF ToolBarTray demonstration window

When you run the program you will see vertical, dotted lines to the left of each of the ToolBar controls. These are handles that you can use to drag the ToolBars. Try dragging the bar with the G, H and I buttons to the left. You'll first see the ToolBar to its left shrink. If you drag far enough, the two bars will switch position. You can also drag ToolBars downwards, creating an extra row and allowing the bars to be placed one above the other.

Preventing Dragging

If you do not wish to allow the user to reposition or resize the ToolBars in a tray, you can disable this feature. To do so, set the Boolean IsLocked property of the ToolBarTray to true.

Modify the opening tag for the ToolBarTray as follows:

<ToolBarTray DockPanel.Dock="Top" IsLocked="True">

Run the program again. You will see that the dragging handles have been removed from the ToolBars and they can no longer be resized or rearranged.

WPF ToolBarTray with locked ToolBars

21 July 2014