Home

Help

Search

Toolbar and tooltips

Helen Bradley shows you how to create a toolbar with buttons and tooltips for your VB forms.


Figure 3a: This month's project is a toolbar with buttons and tooltips that will work in Win 3.1 as well as Win 95.
We've designed this toolbar using the basic VB tools, not the specialist Windows 95 tools, so you can follow this using Windows 3.1 as well.

Figure 4a shows the project with its toolbar and buttons with one of the tooltips visible.

Open a new project and add the Sheridan 3D custom controls using Tools, Custom Controls, select the Sheridan 3D Controls check box and click OK.

On a new form, add these controls and set these properties:

Object Property Setting
Form Name Form1
Caption Toolbar buttons and tips
PictureBox Name Picture1
Picture select a suitable .WMF or .BMP graphic
Visible False
SSPanel1 Align 1 - Align Top
BevelInner 1 - Inset
BevelOuter 1 - Inset
BevelWidth 1
BorderWidth 1
Caption <blank>
Label Name lblDisplayText
Alignment 2 Center
BackStyle 0 Transparent
Caption Welcome
Label Name lblToolTip
Alignment 2 Center
BackColor &H00c0ffff&
Visible False
Caption <blank>

Figure 3b: Once you've got the label positioned over the graphic you can remove the graphic from the form's load event.
The placement and size of the lblToolTip and the PictureBox don't matter too much as they are invisible on the form when it is run.

Add these controls inside the SSPanel control and make sure you've got the panel control selected before you add them:

SSCommand Name buttonQuit
Tag Quit program
Caption &Quit
Cancel True
SSRibbon Name buttonPicture
Tag Background graphic
GroupNumber 1
PictureUp palette.bmp (on the CD)
SSRibbon Name ssButton
Index 0
Tag Bold message
GroupNumber 2
PictureUp bold.bmp (on the CD)
SSRibbon Name ssButton
Index 1
Tag Italic message
GroupNumber 3
PictureUp italic.bmp (on the CD)
SSRibbon Name ssButton
Index 2
Tag Underline message
GroupNumber 4
PictureUp underlin.bmp (on the CD)

Now select each of the palette, italic, bold and underline buttons by selecting one and holding down the Shift key while you select the others, and set these properties as a group:

Top 90
AutoSize 1 - Adjust Picture Size to button
Height 450
Width 450
PictureDnChange 1 - Dither 'PictureUp' bitmap
The Code

Getting it all in position
For the best effect choose a graphic that allows you to place a message over the top of it. Anything which resembles a billboard, scroll or a whiteboard screen etc., will be appropriate. You should find something suitable in your own clipart collection.

If you find a file that isn't a WMF or BMP format file, open it in a graphics program such as Paint Shop Pro and save it as one of these formats so you can use it. While in Paint Shop Pro we added a band to the top of the graphic so that this band would be the part covered by the toolbar and not the image itself.

Use the size of the graphic to test the size you need to make your form. Load the graphic as the form picture (use the Form1 picture property to do this) and size the form to best display it.

For the Welcome message, select the label lblDisplayText and, using its Font property, select a font and increase its size until the word 'Welcome!' is sized appropriately to display in the graphic (leave it a little undersize as it will appear a little bigger in the bold and italic versions). Make sure you use the regular or normal version of a font -- not italics or bold. Now position the label over the graphic so the text appears in the right place, Figure 3b. Finally, remove the graphic from the form picture property as it isn't needed there yet.

The code
Type the code from the code box into this form. Save your project calling it toolbar.vbp and test it by selecting Run, Start.

How it works
This project makes use of the MouseMove event which is generated continually as the mouse pointer moves across objects on the screen. Using each object's MouseMove event allows you to display the tooltips when the mouse is over the buttons and hide them when it is elsewhere on the screen.

The tooltips themselves are created by positioning the invisible label lblToolTip, adding the text to it and then making it visible. The text for a tooltip is contained in each button's Tag property. As the mouse passes over a button, the ShowToolTips procedure is called and the value of the button's left and tag properties are sent to it. The tag value is used as the tooltips label and the left value has 400 twips added to it to give the left position of the label (this places the tooltip horizontally 400 twips to the right of the left edge of the button).

The buttonPicture button toggles the display of a background graphic. It tests the button's value property to see if the button is pressed; if it is pressed its value is true, if it isn't pressed then its value is false. Depending on the state of the button it loads the graphic from the Picture box (which is being used only to store the graphic) or loads no graphic at all; ie, turns off the graphic.

The ssButton buttons have been created as an array of buttons as they're far easier to process as an array than individually. If any of the buttons in the array is pressed, the index variable will contain the index number of that button. Depending on which button has been pressed the ssButton click event toggles the current font attribute represented by that button whether it be bold, underline or italic. For example, the code line:

lblDisplayText.FontBold = Not(lblDisplayText.FontBold)

toggles bold on and off. You don't need to check the state of bold type as it can only be on or off, you simply switch it using the NOT operator.

Likewise, if the mouse is moved over any of the buttons in the array, the Index number of the button it moves over is used to pass the right variables (the button's tag and left value) to the ShowToolTips function.

The tooltips are turned off simply by moving the mouse over some part of the form other than the buttons themselves. The ssPanel and the Form's MouseMove events make the label lblToolTip invisible, which effectively turns the tooltips off.

You'll notice that each button was allocated a different group number; this is to allow more than one button to be selected at any one time. If the buttons weren't in separate groups, you'd only be able to select one and the others would automatically be deselected. You would place buttons in the same group if you wanted to allow options that are mutually exclusive, like in Word where a piece of text can be left, right, centre or fully justified but only one at any time.

You can learn more about the 3D buttons used in this project by looking up SSRibbon SSCommand and SSPanel in Visual Basic Help. You'll find there are other Sheridan 3D controls there too that you can use in your projects.

You will find the files reffered to in this article in the \interact\tooltips\ folder on the CD. Web stuff
Looking for more Visual Basic Information? Try these VB web sites:

The Development Exchange
http://www.windx.com/scripts/homepage.epl

VB Power Source Free Edition
http://www.mcp.com/samsbeta/monthly-third/vbpsfree/index.htm

VB Online Magazine
http://206.171.105.131:80/vb-mag/

VB Tips and Tricks:
http://www.apexsc.com/vb/davem/vbtt.html

Microsoft's Visual Basic Site:
http://www.microsoft.com/VBASIC

Carl and Gary's Visual Basic Home Page
http://www.apexsc.com/vb/


Top of page
|What's New | Net Guides | Web Workshop | Net Sites | About PC User |
| Games | Education | General & Business | Online Tools | Utilities |
| Patches & Support files | PC User Interactive |

All text © 1997 Australian Consolidated Press - PC User Magazine