ToolBar Overview

ToolBar controls are containers for a group of commands or controls which are typically related in their function. A ToolBar usually contains buttons which invoke commands. This topic introduces the ToolBar class and provides examples of how to use it in both Extensible Application Markup Language (XAML) and C#.

This topic contains the following sections.

• ToolBar Control
• Creating ToolBars
• ToolBars with Overflow Items
• ToolBar Styling
• Related Topics

ToolBar Control

The ToolBar control takes its name from the bar-like arrangement of buttons or other controls into a single row or column. WPF ToolBar controls provide an overflow mechanism which places any items that do not fit naturally within a size-constrained ToolBar into a special overflow area. Also, WPF ToolBar controls are usually used with the related ToolBarTray control. ToolBar trays provide special layout behavior as well as support for user-initiated sizing and arranging of toolbars. The following graphics depict horizontal and vertical ToolBar controls.

---

Horizontal Toolbar

---

Vertical Toolbar

Creating ToolBars

The following example shows how to create ToolBar controls in Extensible Application Markup Language (XAML). Notice that the ToolBar is inside a ToolBarTray. The Band and BandIndex properties are used to position the ToolBar in the ToolBarTray. Band indicates the position in which the ToolBar is placed within its parent ToolBarTray. BandIndex indicates the order in which the ToolBar is placed within its band.

<ToolBarTray Background="White">
    <ToolBar Band="1" BandIndex="1">
        <Button><Image Source="toolbargraphics\new.bmp" /></Button>
        <Button><Image Source="toolbargraphics\open.bmp" /></Button>
        <Button><Image Source="toolbargraphics\save.bmp" /></Button>
        <Separator/>
        <Button><Image Source="toolbargraphics\cut.bmp" /></Button>
        <Button><Image Source="toolbargraphics\copy.bmp" /></Button>
        <Button><Image Source="toolbargraphics\paste.bmp" /></Button>
        <Separator/>
        <Button><Image Source="toolbargraphics\print.bmp" /></Button>
        <Button><Image Source="toolbargraphics\preview.bmp" /></Button>
   </ToolBar>
</ToolBarTray>

For the complete sample see Toolbar Sample.

The following example shows how to generate a ToolBar with C#.

tbartray = new ToolBarTray();
tbar = new ToolBar();
btn = new Button();
btn.Content = "File";
tbar.Items.Add(btn);
btn1 = new Button();
btn1.Content = "Edit";
tbar.Items.Add(btn1);
tbar1 = new ToolBar();
btn2 = new Button();
btn2.Content = "Format";
tbar1.Items.Add(btn2);
btn3 = new Button();
btn3.Content = "View";
tbar1.Items.Add(btn3);
btn4 = new Button();
btn4.Content = "Help";
tbar1.Items.Add(btn4);
tbartray.ToolBars.Add(tbar);
tbartray.ToolBars.Add(tbar1);
spanel2.Children.Add(tbartray);

For the complete sample see Creating Controls Sample.

ToolBars with Overflow Items

Often ToolBar controls contain more items than can fit into the toolbar's size, when this happens the ToolBar displays an overflow button. To see the overflow items a user clicks the overflow button and the items are shown in a pop-up window below the ToolBar. The following graphic shows a ToolBar with overflow items.

---

Toolbar with Overflow Items

ToolBar Styling

Control styling enables you to dramatically change the appearance and behavior of ToolBar controls without having to write a custom control. In addition to setting visual properties, you can also apply styles to individual parts of a control, change the behavior of parts of the control through properties, add additional parts, or change the layout of a control. The following examples demonstrate several ways to add styles to ToolBar controls.

The first code example defines a style called TBButton that shows how to style buttons that are contained in the ToolBar. The code assigns a height and width to the buttons and makes the background blue.

<Style x:Key="TBButton" TargetType="{x:Type Button}">
    <Setter Property = "Width" Value= "30"/>
    <Setter Property = "Height" Value= "30"/>
    <Setter Property = "Background" Value= "LightBlue"/>
</Style>

The following example uses triggers to change the appearance of a ToolBar in response to events raised on the ToolBar. When you move the mouse over the ToolBar its appearance changes.

<Style x:Key="Triggers" TargetType="{x:Type ToolBar}">
    <Style.Triggers>
    <Trigger Property="Button.IsMouseOver" Value="true">
        <Setter Property = "Background" Value="Red"/>
        <Setter Property = "BorderBrush" Value="Green"/>
    </Trigger>
    </Style.Triggers>
</Style>

For the complete sample see ToolBar Styles Sample.

See Also

Tasks

How to: Create a ToolBar

Other Resources

WPF Controls Gallery Sample