If you have the Visual Basic 2005 Express Edition, your tutorials are
here: Add a Toolbar
The toolbar is a very popular and much-used addition to a programme.
It's difficult to think of a piece of software that doesn't make use
of them. VB.NET lets you add toolbars to your forms, and the process
is quite straightforward. Let's see how it's done.
Adding a Toolbar
Either start a new Windows project, if your prefer (or have just joined
us), or keep the one you currently have from the previous section. To
add a toolbar to the top of your form, expand the Toolbox and locate
the Toolbar control (you may have to scroll down to see it.) Double
click the Toolbar control, and it will be added to the top of your form.
However, there's not much to see, at the moment.
Toolbars work by adding buttons and images to them. The button is then
clicked, and an action performed.
Click on your Toolbar to select it. In the property box for the Toolbar,
you'll notice that it has the default Name of ToolBar1. We'll
keep this Name. But locate the Buttons (Collection) property,
and click the button with the three dots in it. This brings up the ToolBarButton
Collection Editor.
To add a new button to your toolbar, click the Add button:
Each button on the toolbar has it's own properties and
methods. The button you have just added has a default Name of ToolBarButton1.
This is not terribly descriptive. What we're going to do is add three
toolbar buttons: one to create a new file, one to open a file, and one
to save a file. So,
Click the Name property and change it
to tbrFileNew
Click Add to create a second button
Change the Name of this to tbrFileOpen
Add a third button and change the Name
property to tbrFileSave
Then click OK
Your toolbar will look like this:
The buttons, however, might look a bit small. You can
change the height and width of them by clicking the Toolbar control
to select it. Then locate the ButtonSize property in the properties
box.
When you've located the ButtonSize property, change the height and
width of your buttons to 32:
Adding Images to your Toolbar Buttons
But your toolbar buttons are not much good as they are. Toolbar buttons
usually have a picture on them. Ours are all blank.
The toolbar buttons get their pictures from the Image List control.
You add pictures to the Image List, then point your toolbar at this
control. The toolbar will then recognise the images in the list.
So expand the Toolbox, and scroll down until you find the ImageList
control. Double click it to add one to your project. The ImageList
is another control that doesn't appear on the form, but in the area
below it:
The shaded area around the control means it is selected.
Once you have selected the ImageList control, locate the Images
property in the properties box. Click the button with the three dots
on it to bring up the Image Collection Editor.
Again, you click the Add button to add images to
the Collection. There are a few 16 by 16 pixel bitmap images to try
out. Download, and save them to your hard drive.
When you click the Add button, navigate to this folder
where your Bitmaps are, and select the image called fileNew.bmp.
The image will be added to this list, and your dialogue box will look
like this:
Add the images called fileNew.bmp and fileSave.bmp
to the Images Collection, then click OK.
You now need to point the toolbar at these images. So
click on your Toolbar to select it. In the properties box, locate the
ImageList property. Click the arrow, and select your ImageList
from the drop down box:
To add an image to a button, scroll up to the Buttons property
and bring up the ToolbarButtons Collection Editor again. With
the first button selected, locate the ImageIndex property, and
click the arrow. You'll see a list of the images you added to the Image
List:
Select the first one. This image will then be used as
the icon for toolbar button 0. Click on your next button under Members,
and add image 1 from the ImageIndex list. Click on your third button,
and select the final image, number 2. Then click OK. Your toolbar will
then look like this:
The images look a bit small, though. To increase the size
of the image, click on your Image List at the bottom to select it. Locate
the ImageSize property, and change the Height and Width property to
32 pixels.
(Note: We could have also changed the ButtonSize Height
and Width properties of the toolbar to 16 by 16. But let's make them
nice and big!)
Run your programme and see what your new toolbar looks like. Of course,
if you click on the buttons nothing will happen. We need to write the
code that gets them to work.
Coding for your Toolbar Buttons
Return to the Design environment. Double click your toolbar to bring
up the coding window. It should look like this:
Note the second line above (it's only the second line because we used
the underscore character to spread the line out a bit, so that it would
fit on this page). There's a variable called e, and the Click
Event Arguments of the toolbar are being assigned to it. What this means
to you is that the code you have to write is fairly straightforward.
Add the following code in between Private Sub … and End Sub:
If e.Button Is tbrFileNew
Then MsgBox("File New Button Clicked") End If
As soon as your type the letter e and a full stop, you get a
list of available arguments. One of these is Button. In the If statement,
we're just checking if the Button that was clicked Is the button
called tbrFileNew. If it is, we'll just display a message box.
But in reality, you'll probably want to call a Sub or function that
executes some code here. Or just add the code itself.
You can add more If Statements to check for the other buttons. In the
image below, we've used If .. ElseIf Statement.
In the next section, we'll move on and have a look at how to create
more than one form in your project.
home
