Using the Toolbar Control

Generally, when a program has a menu (as most programs should), it should also have a toolbar. Toolbars (called toolstrips in Visual C# 2005 for some reason) are one of the easiest ways for a user to access program functions. Unlike menu items, tool-bar items are always visible and therefore immediately available. In addition, tool-bar items have ToolTips, which enable a user to discover a tool button's purpose simply by hovering the pointer over the button.

Toolbar items are really shortcuts for menu items; every item on a toolbar should have a corresponding menu item. Remember that some users prefer to use the keyboard, in which case they need to have keyboard access to functions via menus.

The actual items you place on a toolbar depend on the features supported by the application. However, the mechanics of creating toolbars and toolbar items are the same regardless of the buttons you choose to use. Toolbars are created using the ToolStrip control.

Follow these steps to add a toolbar to the main form in your Picture Viewer project:

1.	Display the frmViewer.cs form in the Form Designer (if it's not already).
2.	Add a new ToolStrip control to your form now by double-clicking the Toolstrip item in the toolbox. A new toolbar is then added to the top of your form. Change the name of the toolbar to tbrMainToolbar. Your form should now look like Figure 9.11. Figure 9.11. New toolbars default to the top of the form and have no buttons.
3.	Notice that the toolbar appears above your menu. Anyone who has used a Windows application knows that toolbars belong below menus. Right-click the toolbar and choose Bring To Front from its shortcut menu. That causes the toolbar to move below the menu.

Adding Toolbar Buttons Using the Buttons Collection

Like many other controls you've already learned about, the ToolStrip control supports a special collection: the Items collection. The Items collection contains the buttons that appear on the toolbar. Click the Items property in the Properties window, and then click the small Build button that appears; the Items Collection Editor displays. The list of members shows the toolbar itself, but no buttons because new tool-bars have no buttons.

By the Way

You are going to be adding three images to your toolbar: One for Open, one for Draw Border, and one for Options. You can download these images from my web-site at www.jamesfoxall.com/books.htm.

Take a moment to open the drop-down list in the upper-left corner (see Figure 9.12). This list contains the types of items that can be added to a toolbar.

Figure 9.12. Toolbars may contain a number of different types of items.

For this example, you will be creating buttons and separators. Feel free to experiment with the different item types in another project. Follow these steps:

1.

With Button selected in the drop-down list, click Add to create a new button. Set its properties as follows:

Property	Value
Name	tbbOpenPicture
Text	Open Picture
TooltipText	Open Picture

2.

Click the Image property for the button and then click the Build button that appears. Click Import; then browse and select the Open image. If you don't see the image when you browse, you may have your browse filter set to not show icons, so open Files of Type on the Open dialog box and choose All.

3.

Click OK to save the image in the button.

4.

Click Add to create a new button and set its properties as follows:

Property	Value
Name	tbbDrawBorder
Text	Draw Border
ToolTipText	Draw Border

5.

Set the Image property of the Draw Border button to a valid bitmap file.

6.

Click Add again to create the final button. Set its properties as follows:

Property	Value
Name	tbbOptions
Text	Options
ToolTipText	Options

7.

Set the Image property of the Options button to a valid bitmap file.

You've now created the buttons for your toolbar. There's one last thing you should do, however. Professional designers always separate related groups of tool buttons using a separator. A separator is a vertical line that appears between two buttons. All three of the buttons you've created are relatively unrelated, so you're now going to create separators to isolate them from one another. Follow these steps:

1.	Choose Separator from the drop-down list and click Add. The separator is added to the bottom of the list. Click the up arrow that appears to the right of the list twice to move the separator up between the Open button and the Draw Border button.
2.	Click Add again to create another separator and click the up arrow once this time to move the separator between the Draw Border button and the Options button.
3.	Click OK to save your toolbar definition. Your screen should now look like Figure 9.13. Figure 9.13. Your toolbar is now ready for some code to make it work.

By the Way

You can add buttons to the ToolStrip control dynamically like you added menu items by using the default button that appears on the ToolStrip. I chose to have you use the Items Collection Editor instead, though, so that you could see there are often multiple ways to attack a problem.

Programming Toolbars

Programming toolbars is pretty much the same as programming menus. As you will see, Microsoft has chosen to standardize things whenever possible. For example, in the previous edition of .NET you worked with a Toolbar control that had a Buttons collection. In 2005, the Toolbar control is replaced with a ToolStrip control that has an Items collection. The List View control has an Items collection, as does the Tree View control. Seeing a pattern? After you learn how to work with the Items collection of one control, it's an easy transition to work with the Items collection of another.

Follow these steps to make your toolbar functional:

1.	Double-click the Open button on the toolbar to access its Click event. Be sure to click the button and not the toolbar. Double-clicking the toolbar accesses a different event altogether. Enter the following code: // Show the open file dialog box. if (ofdSelectPicture.ShowDialog() == DialogResult.OK) { // Load the picture into the picture box. picShowPicture.Image = Image.FromFile(ofdSelectPicture.FileName); // Show the name of the file in the form's caption. this.Text = string.Concat("Picture Viewer(" + ofdSelectPicture.FileName + ")"); }
2.	Click the frmViewer.cs [Design] tab to return to the form designer.
3.	Double-click the Draw Border button and add the following code to its Click event: Graphics objGraphics = null; objGraphics = this.CreateGraphics(); objGraphics.Clear(SystemColors.Control); objGraphics.DrawRectangle(Pens.Blue, picShowPicture.Left - 1, picShowPicture.Top - 1, picShowPicture.Width + 1, picShowPicture.Height + 1); objGraphics.Dispose();
4.	Click the frmViewer.cs [Design] tab to return to the form designer.
5.	Double-click the Options button and add the following code to its Click event: frmOptions frmOptionsDialog = new frmOptions(); frmOptionsDialog.ShowDialog();

Go ahead and save your work and then press F5 to run the project. Clicking the toolbar buttons should now perform the same actions as clicking the menu items. In Hour 10, I'll show you how the two controls can share code.

Creating Drop-Down Menus for Toolbar Buttons

Although you're not going to use one in this project, be aware that you can create drop-down menus on toolbars. Visual Studio 2005 uses these in a number of places (see Figure 9.14). To create a menu like this, instead of adding a regular button to the toolbar you add a DropDownButton. Doing so creates a submenu just like when you defined regular menus earlier in this hour.

Figure 9.14. You can create drop-down menus like these.