ToolBar Control in WPF

As the name suggests it is a Bar of Tools. You can arrange various Buttons or other items in a single row or column. You must have seen toolbars in a number of applications. The Purpose of Toolbar is to give easy and fast access to some common commands.

WPF provides a ToolBarTray control in which we can place one or more ToolBar controls (it acts as a container for ToolBar), that are finally responsible for holding the control items that are responsible for executing different commands.

WPF ToolBar

It gives some good features like Overflow Management, by providing a special overflow area. It often happens when the items are more than the place it could be placed in the ToolBar. So in that case some tool items get placed in the overflow panel and an overflow button is shown. User can easily see the overflow items by clicking on that overflow button. ToolBar also provide ToolBar.OverflowMode, an attached property which can be set to Always, Never or AsNeeded to get more control over the items placed in the overflow panel.

ToolBarTray

As you know now that this class acts as a container for ToolBar control. And adds various functionalities like it handles the sizing, placement of toolbars. Also provide drag and drop feature to easily place your toolbar at the place you want. You can place your tool items in different rows (here it is called bands) by using BandIndex property with any ToolBar placed inside the ToolBarTray. ToolBarTray can be set to Horizontal or Vertical by setting its Orientation property. By default it is Horizontal. It provide other properties to have more control over the Tools it contains.

<Window x:Class="WpfApplication2.MainWindow"
        xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
        xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
        xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
        xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
        xmlns:local="clr-namespace:WpfApplication2"
        mc:Ignorable="d"
        Title="MainWindow" Height="350" Width="525">
    <Grid>
        <ToolBarTray HorizontalAlignment="Left" Height="74" Margin="10,10,0,0"
                     VerticalAlignment="Top" Width="497">
            <ToolBar HorizontalAlignment="Right" Height="27"
                     Band="0" BandIndex="0">
                <Button Content="File" Height="22" VerticalAlignment="Top" Width="75"/>
                <Button Content="Open" Height="22" VerticalAlignment="Top" Width="75"/>
                <Button Content="Save" Height="22" VerticalAlignment="Top" Width="75"/>
                <Button Content="Edit" Height="22" VerticalAlignment="Top" Width="75"/>
                <Button Content="Cut" Height="22" VerticalAlignment="Top" Width="75"/>
                <Button Content="Copy" Height="22" VerticalAlignment="Top" Width="75"/>
            </ToolBar>
            <ToolBar HorizontalAlignment="Left" Height="27"
                     Band="1" BandIndex="0">
                <Button Height="22" VerticalAlignment="Top" Width="75">
                    <Image Source="toolbargraphics\file.bmp" />
                </Button>
                <Button Height="22" VerticalAlignment="Top" Width="75">
                    <Image Source="toolbargraphics\open.bmp" />
                </Button>
                <Button Height="22" VerticalAlignment="Top" Width="75">
                    <Image Source="toolbargraphics\save.bmp" />
                </Button>
                <Button Height="22" VerticalAlignment="Top" Width="75">
                    <Image Source="toolbargraphics\edit.bmp" />
                </Button>
                <Button Height="22" VerticalAlignment="Top" Width="75">
                    <Image Source="toolbargraphics\cut.bmp" />
                </Button>
                <Button Height="22" VerticalAlignment="Top" Width="75">
                    <Image Source="toolbargraphics\copy.bmp" />
                </Button>
            </ToolBar>
        </ToolBarTray>
    </Grid>
</Window>