WPF Toolbar Tutorial

The XAML Toolbar element represents a toolbar control in WPF. A ToolBar control is a group of Toolbar button controls that can be clicked to achieve a functionality, forexample the toolbars in Microsoft Word and Visual Studio where you see File Open, Save and Print buttons. 
This tutorial explains how WPF Toolbar works, how to add toolbar buttons on a toolbar tray and how to add code to the toolbar button click.
 
Creating a Toolbar
 
The ToolBar element in XAML represents a WPF ToolBar control. 
  1. <ToolBar />  
The code example in Listing 1 creates a ToolBar control and sets its width and height properties. You may place any control on a ToolBar but typically buttons are used. A ToolBar sits on a ToolBarTray. The code snippet in Listing 1 adds three buttons to the ToolBar and places a ToolBar on a ToolBarTray. 
  1. <ToolBarTray Background="DarkGray" Height="30" VerticalAlignment="Top">  
  2. <ToolBar Name="MyToolbar" Width="200" Height="30" >  
  3. <Button Background="LightSkyBlue" Content="Open" />  
  4. <Button Background="LightSkyBlue" Content="Close" />  
  5. <Button Background="LightSkyBlue" Content="Exit" />  
  6. </ToolBar>  
  7. </ToolBarTray>  
Listing 1.
 
The output looks as in Figure 1.
 
WPF Toolbar 
Figure 1
 
Adding ToolBar Button Click Event Handlers
 
The best part of WPF is that these buttons are WPF Button controls so you have a choice to use them on any other button. You may format them the way you like. You may add a click event handler to them and so on.
 
The code snippet in Listing 2 adds click event handlers to all three ToolBar buttons. 
  1. <ToolBar Name="MyToolbar" Width="200" Height="30" >  
  2. <Button Background="LightSkyBlue" Content="Open" Name="OpenButton" Click="OpenButton_Click" />  
  3. <Button Background="LightSkyBlue" Content="Close" Name="CloseButton" Click="CloseButton_Click" />  
  4. <Button Background="LightSkyBlue" Content="Exit" Name="ExitButton" Click="ExitButton_Click" />  
  5. </ToolBar>  
  6.    
Listing 2
 
On these button click event handlers, you would want to write the code you want to execute when these buttons are clicked. For example, I show a message when these buttons are clicked. The code for these button click event handlers is as in Listing 3. 
  1. private void OpenButton_Click(object sender, RoutedEventArgs e)  
  2. {  
  3. MessageBox.Show("Open button is clicked.");  
  4. }  
  5. private void CloseButton_Click(object sender, RoutedEventArgs e)  
  6. {  
  7. MessageBox.Show("Close button is clicked.");  
  8. }  
  9. private void ExitButton_Click(object sender, RoutedEventArgs e)  
  10. {  
  11. MessageBox.Show("Exit button is clicked.");  
  12. }  
Listing 3
 
If you click on the Open button, you will see Figure 2 as output.
 
WPF Toolbar Button Click
 
Figure 2
 
Adding Images to ToolBar Buttons
 
Usually ToolBars look nicer than just displaying text. In most cases, they have icons. Displaying an Icon image on a button is simply placing an Image control as the content of a Button. The code snippet in Listing 4 changes the Button contents from text to images. 
  1. <ToolBarTray Background="DarkGray" Height="30" VerticalAlignment="Top">  
  2. <ToolBar Name="MyToolbar" Width="200" Height="30" Background="LightCoral" >  
  3. <Button Name="OpenButton" Click="OpenButton_Click">  
  4. <Image Source="Images\camera.png" />  
  5. </Button>  
  6. <Button Name="CloseButton" Click="CloseButton_Click">  
  7. <Image Source="Images\ctv.png" />  
  8. </Button>  
  9. <Button Name="ExitButton" Click="ExitButton_Click" >  
  10. <Image Source="Images\find.png" />  
  11. </Button>  
  12. </ToolBar>  
  13. </ToolBarTray>  
Listing 4
 
The new ToolBar looks as in Figure 3.
 
WPF Toolbar Button
 
Figure 3
 
Adding Separators to a ToolBar
 
You may use a Separator control to give your ToolBar buttons a more prominent look. The code snippet in Listing 4 adds a few extra buttons and a few separators to a ToolBar. 
  1. <ToolBarTray Background="DarkGray" Height="30" VerticalAlignment="Top">  
  2. <ToolBar Name="MyToolbar" Width="180" Height="30" Background="LightCoral" >  
  3. <Separator />  
  4. <Button Name="OpenButton" Click="OpenButton_Click">  
  5. <Image Source="Images\camera.png" />  
  6. </Button>  
  7. <Button Name="CloseButton" Click="CloseButton_Click">  
  8. <Image Source="Images\ctv.png" />  
  9. </Button>  
  10. <Button Name="ExitButton" Click="ExitButton_Click" >  
  11. <Image Source="Images\find.png" />  
  12. </Button>  
  13. <Separator Background="Yellow" />  
  14. <Button >  
  15. <Image Source="Images\award.png" />  
  16. </Button>  
  17. <Button >  
  18. <Image Source="Images\cuser.png" />  
  19. </Button>  
  20. <Button >  
  21. <Image Source="Images\next.png" />  
  22. </Button>  
  23. <Button >  
  24. <Image Source="Images\code.png" />  
  25. </Button>  
  26. <Separator />  
  27. </ToolBar>  
  28. </ToolBarTray>  
Listing 5
 
The ToolBar with separators looks as in Figure 4. Also, if you notice there is a drop array that is available when buttons do not fit in a ToolBar. If you click on that, you will see the rest of the buttons.
 
WPF Toolbar Button Click
 
Figure 4
 
Summary
 
In this article, I discussed how to use a ToolBar control in WPF and C#.
 


Mindcracker
Founded in 2003, Mindcracker is the authority in custom software development and innovation. We put best practices into action. We deliver solutions based on consumer and industry analysis.