CS252 - Programs

CS252. User Interface Design

Creating and Managing Toolbars

To make the Toolbar control available to you, choose Project->Components and put a check beside Microsoft Windows Common Controls 6.0. Note that this adds several control icons to the toolbar on the left of the screen.

Creating a Toolbar

Adding Buttons and Separators

Adding Images to Toolbar Buttons

Enabling and Disabling Menu Items

Adding Code to Toolbar Buttons

Making Toolbar Buttons Toggle

Making "Radio Groups" of Toolbar Buttons

Adding Tooltips to Toolbars

Connecting Toolbar Buttons to Menu Items

Creating a Toolbar

Double-click on the Toolbar icon. It will be added to the top of the form, just below the Menubar. The Align property controls that location.

Naming Conventions: Names of toolbars should begin with "tbr".

Click the "(Custom)" entry in the properties window, or select View->Property Pages to bring up the properties page. This has three tabs for managing toolbars. We wil use "General" to set properties shared by all the buttons, such as size and label alignment, and "Buttons" to add and remove buttons, assign their Captions, etc.

Adding Buttons and Separators

On the Buttons page, click Insert Button. Assign a Caption to the button; the defaults will handle everything else. Add more buttons in the same way. Note that the button width automatically grows as needed to accommodate the longest Caption.

To group buttons by using a separator, use the arrow buttons to move to the button just before where you want the separator. Click Insert Button and set the Style property to tbrSeparator. Unlike menus, you do not need to give the Separator a name.

Adding Images to Toolbar Buttons

Toolbars typically use icons rather than text. Here's how to do it:

Add an ImageList control to the form by double-clicking on its icon (this was added to the Controls toolbar when you added to Toolbar control). Its name should begin with "iml".
Double-click on "(Custom)" in the Properties window to open the properties pages for the ImageList.
On the General page, choose one of the three standard icon sizes (16x16, 32x32 or 48x48).
Use the Images page to add the icons. These will typically be .bmp, .ico. or .dib files, but VB also support .gif, jpg, and .cur files. (C:\Windows is usually a good place to start looking for icon files.)
Give each icon a Key value, which is a unique word indicating what the image is (e.g., "CDplayer").

To display the icons on the Toolbar, first set the ImageList Property on the General Page of the Toolbar's property pages. Now that you've defined an ImageList, it will appear on the selection list on that page.

Next, go to the Buttons page. Use the arrow buttons to visit the buttons one by one, and assign a number (corresponding to the index of the icon in the ImageList) in the Image field. Note that if there are a Caption and an Image assigned to a button, both will show. To display only the icon, you must delete the Caption.

Enabling and Disabling Menu Items

To start the program off with a toolbar button disabled, just use the Enabled checkbox on the Buttons page. To disable or enable it as the program runs, use the Enabled property as you do for menu items.

Adding Code to Toolbar Buttons

Just as for menu items, you will need to add code to the ButtonClick event handler. However, since toolbar buttons are considered part of a single Control (the Toolbar), there is only one event handler for the whole set of buttons. It's necessary to look at the argument being passed to the event handler, in order to determine which button was pressed. For example, the following code

    MsgBox "You clicked button " & Button.Index
    Button.Enabled = False

displays a message with the number of the button, then disables it. You can also refer to the Toolbar's array of buttons to access the caption associated with it. This example

    MsgBox "You clicked button " & tbrImages.Buttons(Button.Index)

prints the caption of the button that was pressed.

Making "Radio Groups" of Toolbar Buttons

Setting the Style property of the buttons to tbrButtonGroup makes them function like a "radio group", or option list. That is, only one can be selected at a time. This button will appear to be pushed in; clicking on a different button will appear to pop the previous selection back out again.

Adding Tooltips to Toolbars

To display tooltips for the buttons on a toolbar, check the Show Tips property on the General page. Then add ToolTip Text for each button on the Buttons page. VB manages the text automatically for you.

Connecting Toolbar Buttons to Menu Items

Toolbar buttons normally represent shortcuts for the most popular menu items. Therefore, the Toolbar's Click event handler usually invokes a menu event handler, just as though the user had selected the menu item directly. Do this by explicitly calling the appropriate event handler (e.g., If Button.Index=1 Then Call mnuEditCut).