Home
WPF
ToolBar Example: Uses ToolBarTray
Updated Mar 6, 2025
Dot Net Perls
ToolBar. Programs often have buttons that are easy to access. These are stored in ToolBars. We arrange ToolBars in a ToolBarTray. We can add nested controls to our ToolBar.
Getting started. A ToolBarTray is used to contain ToolBars—so we should add it first. Please drag a ToolBarTray from the Toolbox to your window Grid.
Example code. Here I add 2 ToolBars to the ToolBarTray. In the first ToolBar, I add 2 Buttons—a ToolBar can store Buttons and Images and other controls.
Button
Next On the ToolBar element, add a Band attribute. This is the vertical index, starting at 0, of the ToolBar.
Tip BandIndex is the horizontal index of the ToolBar, starting at zero on the left. It goes up when two ToolBars are on the same line.
Note Some attributes on the XAML, including the HorizontalAlignment ones are not necessary for the program to correctly work.
HorizontalAlignment
<Window x:Class="WpfApplication11.MainWindow" xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation" xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml" 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="In band 1" Height="22" VerticalAlignment="Top" Width="75"/> <Button Content="Button" Height="22" VerticalAlignment="Top" Width="75"/> </ToolBar> <ToolBar HorizontalAlignment="Left" Height="27" Band="1" BandIndex="0"> <Button Content="In band 2" Height="22" VerticalAlignment="Top" Width="75"/> </ToolBar> </ToolBarTray> </Grid> </Window>
Here, I added a Click event handler to the first Button in the XAML. Type in Click, press equals and have Visual Studio make a Button_Click event.
Also Please assign a Name to the first ToolBar so it is easy to access from the Button_Click event handler.
Name
<ToolBar HorizontalAlignment="Right" Height="27" Band="0" Name="Bar1"> <Button Content="In band 1" Height="22" VerticalAlignment="Top" Width="75" Click="Button_Click"/>
Click. Here we add some code to the contents of Button_Click. When you run it, this code will help you see how the Band and BandIndex properties change as ToolBars are dragged.
Tip The BandIndex is the horizontal index, while the Band is the vertical index. This program makes this concept clear.
using System.Windows; namespace WpfApplication11 { public partial class MainWindow : Window { public MainWindow() { InitializeComponent(); } private void Button_Click(object sender, RoutedEventArgs e) { // ... Change the title when this button is clicked. this.Title = "Band: " + this.Bar1.Band.ToString() + "; BandIndex: " + this.Bar1.BandIndex.ToString(); } } }
In testing ToolBars, try dragging the ToolBars around. You should be able to position them on the same band, next to each other.
Programs can have complex UIs, with lots of buttons. The ToolBar control, and its companion ToolBarPanel, makes it simpler to lay out these buttons.
Dot Net Perls is a collection of pages with code examples, which are updated to stay current. Programming is an art, and it can be learned from examples.
Donate to this site to help offset the costs of running the server. Sites like this will cease to exist if there is no financial support for them.
Sam Allen is passionate about computer languages, and he maintains 100% of the material available on this website. He hopes it makes the world a nicer place.
This page was last updated on Mar 6, 2025 (edit).
Home
Changes
© 2007-2025 Sam Allen