Using the ToolBar Control

Using the ToolBar Control

Navigating a menu with a stylus can soon become tedious , especially if the user is selecting the same menu item over and over again. The ToolBar control can reduce the number of clicks that a user must perform in order to execute menu options. Because the ToolBar control consists of images, adding a ToolBar can make your application more visually appealing.

The ToolBar is a graphical bar that consists of images that represent buttons. These buttons are usually shortcuts to commonly used application functionality. On the .NET Compact Framework, the ToolBar control cannot contain text. You must use an ImageList control to populate the ToolBar control.

The ToolBar control can appear in different locations, depending on whether the application is built for the Pocket PC or Windows CE. If it is a Windows CE application, then the ToolBar will appear along the top of the application form and to the right of any menu options (see Figure 3.15). For Pocket PC applications the ToolBar appears along the bottom of the form and to the right of any menu options (see Figure 3.16).

Figure 3.15. An application that showcases the ToolBar control running on the Windows CE .NET emulator.

Figure 3.16. An application that showcases the ToolBar control running on the Pocket PC 2002 emulator.

Adding a ToolBar Control to an Application

Adding a ToolBar control to an application can be done using the Visual Studio .NET Form Designer. Follow this list of steps to create a ToolBar control in your application:

1. Drag an ImageList onto the application form. This will create an ImageList icon at the bottom of the Form Designer.

2. In the Properties window for the ImageList , click the ellipsis button next to the Images property. This will bring up the Image Collection Editor (see Figure 3.17).

   Figure 3.17. The Image Collection Editor.

   

3. Use the Image Collection Editor to add the ToolBar images to the ImageList . It is important to note that the images will be resized to 16 x 16 pixels, which is the size of all ToolBar images. These images also get imported into the resource file for the application. You do not need to deploy the images along with your application.

4. Drag a ToolBar control onto the application form.

5. Set the ToolBar control's ImageList property to the name of the ImageList control that was created in step 1.

6. Bring up the ToolBarButton Collection Editor (see Figure 3.18) by clicking the ellipsis next to the ToolBar control's Button property in the Properties window.

   Figure 3.18. The ToolBarButton Collection Editor.

   

7. Add all of the buttons that will appear on the ToolBar control, setting the ImageIndex property of each button. The ImageIndex is a zero-based index that corresponds to the index of an image in the ImageList control.

8. Change the button's Style property if you do not want the button to have the default PushButton style. Table 3.5 lists all of the possible Style values and a brief description.

Table 3.5. ToolBarButtonStyle Members and Their Descriptions

MEMBER NAME	DESCRIPTION
DropDownButton	When the button is clicked, a menu or other window is displayed.
PushButton	The regular, three-dimensional button (default).
Separator	A space or graphic between toolbar buttons.
ToggleButton	A button that appears pressed when clicked and remains pressed until it is clicked again.

Handling a ToolBar 's ButtonClick Event

When a user clicks a button on the ToolBar control, a ButtonClick event is fired . You can handle this event to execute the action assigned to the button that was clicked. The event handler for the ButtonClick event receives a ToolBarButtonClickEventArgs object. The ToolBarButtonClickEventArgs.Button property is a reference to the ToolBar button that was clicked. The following example demonstrates how bring up the OpenFileDialog control when the correct ToolBar button is clicked:

 C# private void toolBar1_ButtonClick(object sender,         System.Windows.Forms.ToolBarButtonClickEventArgs e) {   if(e.Button == this.toolBarButton1) {     OpenFileDialog dlg = new OpenFileDialog();     if(dlg.ShowDialog() == DialogResult.OK) {       this.lblOpenFile.Text = dlg.FileName;     }   }   else if(e.Button == this.toolBarButton2) {     SaveFileDialog dlg = new SaveFileDialog();     if(dlg.ShowDialog() == DialogResult.OK ) {       this.lblSaveFile.Text = dlg.FileName;     }   } } VB Private Sub toolBar1_ButtonClick(ByVal sender As System.Object,         ByVal e As System.Windows.Forms.ToolBarButtonClickEventArgs)         Handles toolBar1.ButtonClick   If e.Button Is toolBarButton1 Then     Dim dlg As OpenFileDialog     dlg = New OpenFileDialog     Dim res As DialogResult     res = dlg.ShowDialog()     If res = DialogResult.OK Then       label3.Text = dlg.FileName     End If   ElseIf e.Button Is toolBarButton2 Then     Dim dlg As SaveFileDialog     dlg = New SaveFileDialog     Dim res As DialogResult     res = dlg.ShowDialog()     If res = DialogResult.OK Then       label4.Text = dlg.FileName     End If   End If End Sub