Using the Toolbar Control

---

Generally speaking, when a program has a menu (as most programs should), it should also have a toolbar. Toolbars are one of the easiest ways for a user to access program functions. Unlike menu items, toolbar items are always visible and therefore are immediately available. In addition, toolbar items have ToolTips, which allow a user to discover a toolbar 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 is the same, regardless of the buttons you choose to use. Toolbars are created using the Toolbar control.

1. Add a new Toolbar control to your form now by double-clicking the ToolBar item in the toolbox. A new toolbar is then added to the top of your form (see Figure 9.8). Change the name of the toolbar to tbrMainToolbar.

   Figure 9.8. New toolbars default to the top of the form and have no buttons.

   

   
   

   Every toolbar you've used displays pictures on buttons. The Toolbar control gets the pictures for its buttons from an Image List control.

2. Go ahead and add an Image List control to the form now and change its name to imgMyPictures.

3. Add a new 16x16 pixel bitmap to the Images collection of the Image List control (you can use a picture you created or use one from the samples I've made available on the Web site).

4. When you're finished adding the new button, close the Image Collection Editor and select the Toolbar control on the form.

5. Set the ImageList property of the toolbar to use the image list you've just created.

Adding Toolbar Buttons Using the Buttons Collection

Like many other controls you've already learned about, the Toolbar control supports a special collection: the Buttons collection. The Buttons collection contains the buttons that appear on the toolbar. Click the Buttons property in the Properties window and then click the small button that appears; the ToolBarButton Collection Editor displays. The list of button members is empty because new toolbars have no buttons. Click Add to create a new button, and set its properties as follows :

Property	Value
Name	tbbQuit
ImageIndex
Text	Quit
ToolTipText	Quit this application

Click OK to close the ToolBarButton Collection Editor. Your new button is now visible on the toolbar. As you can see, text appears below the picture in the button, but this is not how most toolbars appear. Not a problemaccess the Buttons collection once more and clear the Text property of the button.

Programming Toolbars

Unlike menus, where each menu item receives its own Click event, the Toolbar control has one common Click event that fires when the user clicks any button on the toolbar. Double-click the Toolbar control on the form to access the toolbar's ButtonClick event (close the button editor first if it's open ). Enter the following code:

 if (e.Button == tbbQuit)    this.Close(); 

In a nontrivial program, the ideal way to set this up would be to create a method that is called both by the Click event of the menu item and by clicking the equivalent toolbar button. This reduces duplication of code and eliminates bugs (the Quit button doesn't honor the Ask Before Closing option in this example, even though the menu item does).

The e object is discussed in detail in Hour 11, "Creating and Calling Methods." For now, realize that the Button property of the e object is an object property that holds a reference to the button that is clicked. This code uses an if statement to determine if the clicked button is the Quit button. If the Quit button was clicked, the form closes . When you have many buttons on a toolbar, a switch statement is much more useful than an if statement, as you'll see in the next section. (Decision-making constructs such as if and switch statements are discussed in Hour 14, "Making Decisions in C# Code.")

Creating Toggle Buttons

The button that you've created for your toolbar is a standard push-style button. When the user clicks it with the mouse, the button will appear to be pressed while the user holds down the mouse button and will return to a normal state when the user releases the mouse button. Although this is the style you'll use for most of your toolbar buttons, the Toolbar control supports other styles as well. One such style is the toggle button. A toggle button, much like the check mark of a menu item, is used to denote state. When a toggle button is clicked, it appears in a pressed state and stays that way until clicked again, in which case it returns to its normal appearance. Microsoft Word has a number of such buttons. For instance, the paragraph alignment buttons are all toggle buttonsthe button that corresponds to the current paragraph's alignment appears to be pressed.

Add a new button to your toolbar now and change its name to tbbInvisible. Change its Text property to Invisible and its Style to ToggleButton. Click OK to close the editor and the new button will appear on the toolbar. Take note that you didn't have to designate a picture for the toolbar item (but you usually should). Because you don't want the toolbar's height to be larger than necessary, change the TextAlign property of the Toolbar control to Right. Your toolbar should now look like the one in Figure 9.9.

Figure 9.9. Toolbar items can display a picture, text, or a combination of both.

Again, double-click the toolbar to access its ButtonClick event. Now that there are two buttons, the simple if statement is no longer suited to determining the button pushed . Change the code in your procedure to match the following:

 switch  (tbrMainToolbar.Buttons.IndexOf(e.Button)) {     case 0:         this.Close();         break;     case 1:         txtMyTextbox.Visible = (!tbbInvisible.Pushed);         break; } 

This code is a bit more complex than the previous code. The switch construct compares one value to many possible values, looking for a match. In this case, the IndexOf() method of the Buttons collection is used to determine the index of the clicked tool button (the first button is 0, the second is 1, and so forth). The index is then compared to values using the case statements, and when a match is found, the appropriate code executes. Again, don't worry too much about the details of the switch statement, because you'll learn everything you need to know about it in Hour 14, "Making Decisions in C# Code." The new statement that you're interested in at the moment is where the Visible property of the text box is set. Remember, the logical negation operator ( ! ) negates a value. Therefore, this statement sets the Visible property of the text box to the negation of the pushed state of the tbbInvisible button. In other words, when the button is pushed, the text box is hidden, and when the button is not pushed, the text box is visible.

Press F5 to run the project now and notice that the text box is visible. Click the Invisible button on the toolbar and note that its appearance changes to a pushed state and the text box becomes hidden (see Figure 9.10). Click the button again to return the button's state to normal, and the text box reappears. When you're finished, stop the project and save your work.

Figure 9.10. Toggle-style buttons appear "pressed" when clicked.

Creating Separators

As you add more and more buttons to a toolbar, it becomes evident that you need a way to logically group buttons. Placing related buttons next to one another is a great start toward building a good toolbar. However, a toolbar may be a bit difficult to use even if its buttons are placed in a logical order, unless the buttons are separated into groups. Placing a space between sets of related buttons creates button groups. You're now going to add a separator space to your toolbar.

Add a new button to your toolbar using the Buttons collection in the Properties window. Change its name to tbbSeparator1 and change its Style to Separator. When you change the Style property of the button to Separator, it disappears from the toolbar, or at least it seems to. When a button is designated as a separator, it's simply an empty placeholder used to create a space between two buttons. Because this separator is at the end row of buttons, you can't see it. Move it to the second position by selecting it in the ToolBarButton Collection Editor and clicking the up arrow that appears to the right of the Members list; this arrow and the one below it are used to move a button up or down in the list. Click OK to save your changes and your toolbar will now have a space between the two buttons (see Figure 9.11).

Figure 9.11. Separators are used to create spaces between groups of buttons.

Press F5 to run the project once more and click the Invisible button; the text box no longer becomes hidden. This is a common problem when working with toolbars. Remember how the switch statement looks at the index of the clicked button? The index is the ordinal position of a button in the Buttons collection. When you changed the order of the buttons by moving the separator button up in the list, you changed the index of the separator button and the button it displacedthe tbbInvisible button. The tbbInvisible button now has an index of two (because it's the third button). Change the case statement in the ButtonClick event that compares the case to 1 so that it compares it to 2, and your code will work again. As you fine-tune your toolbars, you need to be conscious of any code that's been written to work with the indexes of buttons in the Buttons collection.

Creating Drop-Down Menus for Toolbar Buttons

You need to be familiar with one last type of toolbar button. Create a new button using the Buttons collection in the Properties window. Change the name of the new button to tbbDropdown, clear the Text property, and set the button's Style property to DropDownButton. Finally, set the DropDownMenu property to ContextMenu1 and click OK to commit your changes. Notice how the button has a drop-down arrow on it. Press F5 to run the project and click the drop-down arrow; the menu that you designated in the DropDownMenu property appears (see Figure 9.12). As you can see, the DropDownMenu property makes it easy to integrate drop-down menus with your toolbars.

Figure 9.12. Toolbar buttons can be used to display drop-down menus.

---

Top