Set the version number of the MyPhotos application to 13.3.

ADD THE TOOLBAR BUTTONS FOR THE FILE MENU

Our ToolBar now contains three toolbar buttons. Visual Studio displays the images associated with each button in the designer window. If text is assigned to a button,

Visual Studio will display this as well, assuming the button provides room for the text to appear.

The next step is to link these to operations within our form. The ButtonClick event in the ToolBar class is used for this purpose. Event handlers for this event receive a ToolBarButtonClickEventArgs parameter that contains a Button property. This property retrieves the ToolBarButton instance clicked by the user.

One means for handling our button clicks uses a series of if statements. The code would look something like the following:

private void toolBarMain_ButtonClick(object sender, System.Windows.Forms.ToolBarButtonClickEventArgs e)

{

// Determine which button was clicked – not our approach if (e.Button == tbbNew)

{

menuNew.PerformClick();

}

else if (e.Button == tbbOpen)

{

menuOpen.PerformClick();

}

else if (e.Button == tbbSave)

{

menuSave.PerformClick();

}

}

This can get a bit unwieldy as the number of buttons increase. A more elegant approach takes advantage of the Tag property for ToolBarButton instances. This property holds an object instance, and in particular can hold a MenuItem object to associate with the button. Since we would like our buttons to perform the same action as the corresponding menu item, we will associate the proper menu item with each of our buttons. Continuing our prior steps:

SET THE TAG PROPERTY FOR THE TOOLBAR BUTTONS

Our implementation of the ButtonClick handler for our toolbar can now take advantage of these settings to simply invoke the Click event handler associated with the corresponding menu item.

HANDLE THE BUTTONCLICK EVENT FOR THE TOOLBAR

Note how the as keyword is used to ensure that the Tag property does, in fact, refer to a MenuItem object. If a new button is added without an associated menu, then this code is safely ignored.

We can also use this method for the Next and Previous toolbar buttons. The following steps also define a separator button to differentiate between these two sets of buttons.

ADD THE NEXT AND PREVIOUS TOOLBAR BUTTONS

Our ButtonClick event handler automatically handles these buttons based on their associated menu items, so no further changes are needed. Compile and run the program to make use of these buttons. Note how the tool tips pop up when the mouse hovers over these buttons.

TRY IT! Two things to try here. First, modify the Appearance property for the toolbar to be Flat. The buttons will no longer have a three-dimensional appearance, and the separator will be a line between the two sets of buttons.

Second, modify the Dock property for the toolbar to be Left. This places the control on the left side of the form. Run the program to verify that everything still works as expected.

There are two other types of toolbar buttons, namely the DropDownButton and ToggleButton styles. The next two sections take a look at these alternate button styles.

13.3.2ADDING A DROPDOWN BUTTON

To create a dropdown menu on our form, we will make use of our existing Images submenu displayed via the menuImages menu item created way back in chapter 3, and updated in chapter 6. The changes are detailed by the following steps, and discussed in the subsequent text.

ADD A DROPDOWN BUTTON

ADD A DROPDOWN BUTTON (continued)

Our new toolbar button requires a new context menu, which we use as the dropdown menu for our new button. Even though the DropDownMenu property for the ToolBarButton class is defined as a type of Menu object, a ContextMenu instance is required to properly display a dropdown menu beneath the button. We could have used the ctxtMenuView context menu, although we would then display the entire View menu beneath the toolbar button.

Compile, run, open, click, and otherwise make sure the new button works. The

.NET Framework does all the hard work here. When the button is clicked, the menu item collection associated with the ctxtMenuImage menu is displayed. This causes the Popup event associated with this menu to fire, invoking the menuImage_Popup event handler. Figure 13.2 shows the application with the popup menu displayed for our new button.

Figure 13.2

When the down arrow for a toolbar button is shown, as it is here, the user must click on this arrow to display the associated menu.

Of course, you don’t always have an existing menu in your menu bar to clone and use in your dropdown toolbar buttons. A custom ContextMenu object can be created and assigned to the button. If desired, you can also draw your own menu items similar to how we drew a custom status bar panel in chapter 4 and list box items in chapter 10.

Alternately, you may wish to forgo a menu entirely and create a custom window to associate with your button. This can be done as well. The ButtonDropDown event occurs for the parent ToolBar control whenever a dropdown menu on the control is clicked. Event handlers for this event receive a

class instance as the event parameter. This class contains a Button property to retrieve the dropdown ToolBarButton instance that was clicked. The Rectangle property for the button identifies the location of the button and can be used to properly place a small window or other graphical object at the proper location.

Our last style of button is a toggle button.

13.3.3ADDING A TOGGLE BUTTON

Our final toolbar button will illustrate the ToggleButton style to show and hide the pixel data dialog created in chapter 8. Toggle buttons, as you may recall from chapter 9, provide two different states: one when the button is pressed in, and one when it is not.

We will do something a little different here that seems appropriate for our example. If you are keeping track of the images available in our image list, you may realize there are two images left, while only one more button. We will use one image when the button is pushed in, and the other when it is not. Figure 13.3 shows our application with the button pressed in and the PixelDlg form displayed.

Figure 13.3

The toggle button on our toolbar displays a green light when the pixel dialog is shown, and a red light otherwise.

This will require some coordination with the rest of the application to make sure the button is never pressed when the pixel dialog is hidden. We’ll begin by creating the button and implementing the ButtonClick event support.