• Chapter 19
  • Toolbars and More Graphics
    • Preparing for the Toolbar
      • Figure 19.1.
      • Figure 19.2.
    • The Image List Control
      • Figure 19.3.
      • Figure 19.4.
      • Figure 19.5.
    • Finalizing the Toolbar
      • Figure 19.6.
      • Figure 19.7.
    • The Line and Shape Controls
      • Figure 19.8.
    • The Line Control
      • Mastering the Line Control
        • Figure 19.9.
        • Figure 19.10.
      • Mastering the Shape Control
        • Figure 19.11.
    • Summary
    • Q&A
    • Workshop
      • Quiz
      • Exercises

Chapter 19

Toolbars and More Graphics

In Hour 17, "Menus in VB Applications," you learned how to add menus to your applications. Many applications use toolbars with buttons that mimic menu options. Toolbars are part of most major Windows applications, and they can be part of yours as well.

In addition, with toolbars you can draw your own graphics on the form. Although VB's graphic-drawing tools are fairly primitive, you can draw lines and circles and other basic shapes to accent and highlight areas of your form.

The highlights of this hour include

• What the Image List control does

• How to add the Toolbar control to the Toolbox window

• Why you must connect the image list to the toolbar

• How to respond to toolbar events

• When to use the Line and Shape controls

• How to accent forms with line-based graphics

Preparing for the Toolbar

Preparing for the Toolbar

The tools that appear on your Toolbox window are called intrinsic controls. You can add additional controls to the toolbar. As a matter of fact, you can obtain controls from sources other than Microsoft because many people create controls for Visual Basic.

---

TIP: In Hour 21, "Visual Basic and ActiveX," you will learn more about how developers create new controls for Visual Basic. This guide's CD-ROM comes with a complete control-building application called the Visual Basic Custom Control Edition.

---

Visual Basic's Professional and Enterprise Edition users can take advantage of an extra control that comes with Visual Basic, called the Toolbar control. It comes in a collection of other controls named the Microsoft Windows Common Controls 5.0. To add this set of controls to your toolbar, select Project | Components (Ctrl+T) to display Figure 19.1's Components dialog box.

Figure 19.1. Adding more tools to the toolbox with the Components dialog box.

Scroll the box down to the Microsoft Windows Common Controls 5.0 entry and select it. Click OK. When you look at the Toolbox window once again, you'll see new controls on the toolbox. Figure 19.2 labels these tools.

Figure 19.2. The Common Controls package of tools gives you additional power.

---

NOTE: You'll probably recognize the purpose of most of these new tools. With these additional tools you can add a status bar to your form, you can display a progress bar during a long sort or calculation, and the Tab Strip control gives you the ability to display a multiple-page dialog box (called a properties sheet or a properties page).

---

New Term: A properties sheet or properties page is a dialog box that contains several tabbed pages. Entering property values in the dialog box is often easier than entering them one by one in the Properties window.

The Image List Control

As you know, a toolbar is a row of buttons with icons on them. The Toolbar control has one slight limitation: It cannot keep track of each image that you place on a toolbar button. Instead, the Toolbar control only works with a special control called an Image List control. Fortunately, the Image List control appears on the toolbox when you add the Microsoft Windows Common Controls 5.0 control set, as you did in the previous section.

Therefore, you might want to practice adding a toolbar to a Form window by opening a new project and then placing an Image List control on the Form window. Expand the Form window slightly so that the Form window is wide enough for a toolbar (approximately 6,645 twips wide).

The Image List control does not look like much. Just like the Image control, the Picture Box control, the Timer control, and the Common Dialog Box control, the Image List control's placed size and location do not matter much because the user will never directly see the Image List control on the form. The user will, instead, see images that the Image List control keeps track of. The Image List control works a lot like a graphic image array. The Image List control holds images from files, and when you're using the Image List control for toolbars, the Image List control holds toolbar icons such as the ones in VB's Graphics\Icons folder.

New Term: An image list is a list of images in an array-like control called the Image List control. The easiest way to add images to the Image List control is by clicking the Image List control's Custom property to display Figure 19.3's custom property pages. This dialog box organizes the Image List control's figures and lets you manage each figure's property separately.

Figure 19.3. Specifying Image List control properties in the Property Pages dialog box.

---

NOTE: Although the first page of the Image List control's property pages lets you specify an image's size, you don't need to worry about the size if the graphics files are exactly the size you need to display, just as icon files (with the .ICO extension) are. If you use the Image List control to group graphic images of other kinds of files, you will need to specify each image's size if the file's size does not match the size you want to store the image as.

---

Click the Images tab to display the Images page. Here you will build a list of images that will ultimately end up on your application's toolbar. To add some images for this lesson's sample toolbar, perform these steps:

1. Click the Insert Picture button and select the icon file named Disk04 located in the Graphics\Icons\Computer folder. The image will appear in the image list, and its index value will be set to 1, as Figure 19.4 shows.

Figure 19.4. The Image List control now has one image.

Keep inserting images in the following order (from the same folder to keep things simple): Key04, Mouse02, Trash01, and W95mbx01. As you insert the images one at a time, you'll notice that Visual Basic automatically updates the image's Index text box value. After you add the final image, your image list should look like Figure 19.5's list of icons.

Figure 19.5. The image list contains five icon images.

---

TIP: If you want to change the toolbar's colors from the standard color scheme (typically a gray background just like Visual Basic's toolbars), click the Color tab and select a different color scheme.

---

Name the Image List control imlToolBar so the Toolbar control can reference the images you just stored in the list.

Finalizing the Toolbar

Double-click the Toolbar control to add a toolbar to the top of the form. The toolbar will first appear at the top of the form, which is where most toolbars reside. You can change the Align property if you want to place the toolbar against another edge of the form. Change the toolbar's Name property to tlbNew.

---

TIP: If you want to give your user a menu choice to place the toolbar elsewhere, the menu selection can change the Align property value so the toolbar moves to another location on the Form window.

---

Click the toolbar's Custom property to display the toolbar's Property Pages dialog box, which is shown in Figure 19.6. Although you can set most of the dialog box's properties from the Properties window, you'll find that the Property Pages dialog box makes setting up the toolbox simpler.

Figure 19.6. The Toolbar control's Property Pages dialog box.

To connect the image list to the toolbar, open the ImageList drop-down list box and select imlToolBar (if other image lists appeared on the form, they would all appear and you could select the one that goes with the toolbar). Select the 1-ccFixedSingle BorderStyle property to help distinguish the toolbar from the rest of the form's controls.

To add the toolbar button, click the Buttons tab to display the Buttons page. For each button, click the Insert Button command button and change the Image value to 1 (the first image's Index property value). Also type Save for the Key value. When you click Apply (to apply the property values), the first toolbar button will appear with the disk icon that first appears in the image list.

Continue clicking the Insert Button command button and updating the Image text box. Use the following values for the last five Key values: Save, Button, Mouse, Trash, and Stop. When you finish the toolbar buttons, close the dialog box, and the five toolbar buttons with their corresponding icons from the Image List control will appear, as shown in Figure 19.7.

---

NOTE: You will use the Key values inside code to determine exactly which toolbar button the user clicks.

---

---

TIP: Many programmers like to add the same Key values to the ToolTips property as well so the toolbar supports tooltip-based help.

---

Figure 19.7. The toolbar is now complete.

Run the application and try the new toolbar. When you click a button, you'll see the button clicking. You've now got to hook up the commands to the buttons. Stop the running application to add the event procedure.

The toolbar acts like a control array. To add code that responds to a toolbar's button click, double-click the Toolbar control to open a new event procedure. The first and last lines appear here:

Private Sub tlbNew_ButtonClick(ByVal Button As ComctlLib.Button)



End Sub

Private Sub tlbNew_ButtonClick(ByVal Button As ComctlLib.Button)

   ` Respond to button clicks

   Dim msgPress As Integer

   ` Display a message box depending

   ` on which toolbar button the user clicks

   Select Case Button.Key

      Case Is = "Save":

         msgPress = MsgBox("You pressed Save", , "Save")

      Case Is = "Button":

         msgPress = MsgBox("You pressed Button", , "Button")

      Case Is = "Mouse":

         msgPress = MsgBox("You pressed Mouse", , "Mouse")

      Case Is = "Trash":

         msgPress = MsgBox("You pressed Trash", , "Trash")

      Case Is = "Stop":

         Unload Me

         End

   End Select

End Sub