Similar to Menus, WPF also supports Toolbars for your application. They are fairly simple to use and will hold just about any control. For best usage, you will want to first place a ToolBarTray onto the container (I’m using a DockPanel). The ToolBarTray will handle things like placement and letting users move the toolbars around as needed.
Then, inside your tray place your ToolBar controls. From there simply add whatever controls you wish to place. You would programmatically respond to events on your controls like you normally would, with Click=”” type syntax or whatever is appropriate for the control. Since I’ve demonstrated that in previous lessons I’ll skip it for today.
In this example I’ve created two bars, one with 3 buttons, the other with a mixture of controls.
<DockPanel>
<ToolBarTray DockPanel.Dock=“Top“
Background=“LightGray“>
<ToolBar Name=“ButtonBar“ >
<Button>One</Button>
<Button>Two</Button>
<Button>Three</Button>
</ToolBar>
<ToolBar Name=“Mixed“>
<TextBlock>Hunt For it:</TextBlock>
<TextBox Width=“50“></TextBox>
<Button>GO</Button>
</ToolBar>
</ToolBarTray>
<Grid>
<Grid.ColumnDefinitions>
<ColumnDefinition Width=“3*“/>
<ColumnDefinition Width=“*“/>
</Grid.ColumnDefinitions>
<TextBlock Margin=“5,5,0,0“
VerticalAlignment=“Top“>
More Stuff Here
</TextBlock>
</Grid>
</DockPanel>
Note that I put a Grid in the lower half of the Dock area, don’t worry to much about it right now I just wanted to have something to fill the space.
Run the app and grab the “Hunt For it” bar down and see what happens:
The ToolBars stack nicely. As you might expect, you may rearrange them as well.
At the end of the ToolBar is the Overflow control, the little thing that looks like a black arrow pointing down. If you resize the Window too small, or drag one ToolBar too close to it’s neighbor, it will act as a drop down with the remaining controls.
Here you can see it even expands outside the boundaries of the Window, in case the Window is not big enough.
It’s possible to lock your ToolBars down, should you not want the users to be able to move them. All you have to do is add a IsLocked=True to the tray declaration.
<ToolBarTray DockPanel.Dock=“Top“
Background=“LightGray“
IsLocked=“True“ >
If you look carefully, you’ll notice the moving handles are gone, and your ToolBars are locked down as if they were behind jail bars.
While in the above example I’ve placed my ToolBars in a ToolBarTray, it’s not required. You could place a ToolBar out on it’s own. Let’s add one to our Grid, in the column next to the “More Stuff Here” area.
<DockPanel>
<!–Tool Bar Tray here, same as previous sample–>
<Grid>
<Grid.ColumnDefinitions>
<ColumnDefinition Width=“3*“/>
<ColumnDefinition Width=“*“/>
</Grid.ColumnDefinitions>
<TextBlock Margin=“5,5,0,0“
VerticalAlignment=“Top“>
More Stuff Here
</TextBlock>
<ToolBar Grid.Column=“1“
Margin=“0,5,0,0“
VerticalAlignment=“Top“
ToolBarTray.IsLocked=“True“ >
<Button>
<Image Source=“D:\Icons\Win9x\DISK06.ico“
Height=“16“ Width=“16“ />
</Button>
<Button>
<Image Source=“D:\Icons\WinXP\IPML.ICO“
Height=“16“ Width=“16“ />
</Button>
</ToolBar>
</Grid>
</DockPanel>
Note something interesting in the ToolBar declaration, ToolBarTray.IsLocked. Even though we are not explicitly creating a tray, WPF takes care of it for us. You are locked in, however, and cannot move the ToolBar anywhere. That’s why I added the IsLocked, to get rid of the useless moving handle.
I could have simulated this with the two buttons placed in columns in the Grid, but this does give us the advantage of the overflow button should the Window get resized smaller than it needs to be.
ToolBars are a common user interface element that will add that professional touch to your major applications.
Hi, Thanks for the demonstration .. but I like to ask if there’s a way to add a common click event handler for the buttons in the toolbar!
Thanks!
@Mina
common click event?
the tools are just buttons so i you just do
btnBold.Command = EditingCommands.ToggleBold
Good, compressed and easy to follow. Thanks!
Nice Article..Could you please explain how to make a toolbar by writing the code in .xaml.cs file?
Thank you very much!!! So simple but very helpful!