.NET 4.0+

WPF Menu Controls - ToolBarTray

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

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.

Band and BandIndex

When the ToolBars in a tray are organised into rows, the rows are called bands. In addition to allowing the user to organise the bands, you can control them with the Band property of the ToolBar class. The property accepts an integer value. Usually the first band is deemed to be band zero and subsequent bands have increasing numbers.

To organise the ToolBars within a band, you can use BandIndex. This is another integer value. ToolBars with higher values appear to the right of those with lower numbers.

Let's adjust the positions of the ToolBars so that the "ABC" bar appears in the uppermost band and the "DEF" and "GHI" bars share a lower band. We'll also set the BandIndex properties of the lower ToolBars so that they appear in the reverse order.

<ToolBarTray DockPanel.Dock="Top">
    <ToolBar Band="0">
        <Button>A</Button>
        <Button>B</Button>
        <Button>C</Button>
    </ToolBar>
    <ToolBar Band="1" BandIndex="1">
        <Button>D</Button>
        <Button>E</Button>
        <Button>F</Button>
    </ToolBar>
    <ToolBar Band="1" BandIndex="0">
        <Button>G</Button>
        <Button>H</Button>
        <Button>I</Button>
    </ToolBar>
</ToolBarTray>

The resultant window appears as follows:

Orientation

In some cases you may wish to change the orientation of your ToolBars to vertical instead of horizontal. This cannot be done using ToolBars alone. However, by setting the Orientation property of a ToolBarTray, you can change the layout of all of its child tool bars. The property can be set to either Horizontal or Vertical.

Let's update the ToolBarTray XAML so that the tray is docked to the left and has a vertical layout:

<ToolBarTray DockPanel.Dock="Left" Orientation="Vertical">
    <ToolBar Band="0">
        <Button>A</Button>
        <Button>B</Button>
        <Button>C</Button>
    </ToolBar>
    <ToolBar Band="1" BandIndex="1">
        <Button>D</Button>
        <Button>E</Button>
        <Button>F</Button>
    </ToolBar>
    <ToolBar Band="1" BandIndex="0">
        <Button>G</Button>
        <Button>H</Button>
        <Button>I</Button>
    </ToolBar>
</ToolBarTray>

The updated window appears as shown below: