SEPTEMBER, 1996
I am not sure if this style of toolbar will become standard, but nevertheless, they can be easily implemented into your Visual Basic programs, with only a few simple steps.
First, we need to decide what buttons we need for the toolbar. Then, the graphics for each button can be created. We need two graphics for each button, one monochrome and one colored.
For the MDINote program, we need five buttons:
I recommend that this style of toolbar not be used in applications that require many buttons and or toolbars, such as a word processor. This is mainly due to the fact that these toolbars use much more screen real estate than conventional toolbars.
Each button graphic should be 40x50x16. This means the graphic should be 40 pixels high and 50 wide, and consist of only 16 colors. Remember to save it as 16 colors, also. The easiest way to make the monochrome bitmap is, to modify the existing color one, after it has been saved. Replace color with shades of gray. Save it also, as 16 colors. Do not save it as monochrome. See the diagram below for the graphic specifications. The bitmaps used in the sample are included in the download package.
For each button, you need three controls, one picture box, and two image controls. The picture box is the actual button, while the two image controls contain each different bitmap. Please note that MDINote sample used an image control for the button. It had to be replaced with a picture box, because the image control does not repaint properly.
Start out by placing a large picture box on your form. This will serve as base for the toolbar. Inside that, place a number of smaller picture boxes. These will be the buttons. For each of these, set the AutoSize and AutoRedraw properties to True, then load the respective monochrome bitmap into its respective button (picture box). You must then create two image controls, for each button, to store each bitmap. Give them all descriptive names so that they will not confuse you later. Set the Visible property of the image controls to false.
Global PreviousHighlight As Integer
The next bit of code should go into the MouseMove event of the picture box. The code below is for the New File button, but is it basicly the same for the other four buttons.
Call DeleteHighlight PreviousHighlight = 1 If X <= 0 Or X > imgFileNewButton.Width Or Y < 0 Or Y > _ imgFileNewButton.Height Then imgFileNewButton.Picture = imgFileNewButtonUp.Picture Else imgFileNewButton.Picture = imgFileNewButtonDn.Picture End If |
First, we call DeleteHighlight, that is explained below. The next chunk of code flips between the two graphics, depending on the location of the mouse. When the user moves the mouse over the button, the colored graphic (stored in imgFileNewButtonDn) replaces the monochrome one. When user moves off it, the monochrome graphic (stored in imgFileNewButtonUp) replaces the colored one.
That was the hard part. Now we need to make the button become recessed, when the user clicks it. Place the following in the MouseDown event:
imgFileNewButton.Picture = imgFileNewButtonDn.Picture imgFileNewButton.BorderStyle = 1 |
By simply setting the BorderStyle of the button to 1, we can make illusion of a recessed button, however, if the user moves off the button (while holding the mouse button down) we need to get rid of the recession. This is done in the MouseUp event:
imgFileNewButton.Picture = imgFileNewButtonUp.Picture imgFileNewButton.BorderStyle = 0 |
We now need to write code that will "un-highlight" the button when the mouse cursor is moved off the button. This is done with DeleteHighlight.
Sub DeleteHighlight() Select Case PreviousHighlight Case 1 imgFileNewButton.Picture = imgFileNewButtonUp.Picture Case 2 imgFileOpenButton.Picture = imgFileOpenButtonUp.Picture Case 3 imgcutbutton.Picture = imgCutButtonUp.Picture Case 4 imgcopybutton.Picture = imgCopyButtonUp.Picture Case 5 imgPasteButton.Picture = imgPasteButtonUp.Picture End Select PerviousHighlight = 0 End Sub |
This sub needs to be modified to suit each individual application. It may look complicated, but really is not. Internally, each button is numbered, starting with one on the left, and so on. When the MouseMove event is fired, PreviousHighlight is set to the number of it's respective button. When the user moves off the button, DeleteHighlight is called. That uses the value in PreviousHighlight to replace the color bitmap with that of the monochrome bitmap.
I suggest that you download the sample code, and explore it, before adding this style of toolbar to your own programs. If you still encounter problems, feel free to contact me. My e-mail address is rheldt@netins.net. Good luck!
[About Ryan Heldt: Ryan is an MIS major at Iowa State University. In addition to writing for Visual Basic Online, he also maintains The Toolbox Visual Basic Home Page. Ryan can be reached at rheldt@netins.net]
Click here to go back to the September '96 Article Index
Copyright © 1996 VB Online. All rights reserved.