Our programs might not be very elaborate yet, but at least we can make them look good!

Labels and pictures on your forms not only make your program look good, but they can also make it easier to use and understand.  For example a clothing shop might want pictures of items for sale on a user interface from which the customer makes selections.

Adding Labels

Start a new project.

Click on the label tool  and then click and drag out the label on your form. 

Change the following properties of your new label:

Some other useful Label Properties:

Borderstyle 0 = no border
1 = Single line border
Autosize True = label will automatically get wider to fit text
False = if text doesn't fit, it will be chopped off
Wordwrap True = label will automatically get more lines to fit text
False = text may be chopped off at the bottom if there is a lot of text
When creating labels that adjust to the size of the caption, (Autosize or Wordwrap true), take care that the label does not grow and cover up other parts of your user interface.

Adding Pictures

We will add two pictures using image boxes   

Note: You can also add pictures using picture boxes, but if you do, you can NEVER change the size of bitmap or icon graphics.

First we will need images to use:

Choose two of the following, right click on them and save each to your home drive (or you can use images you have already saved):

Draw an image box on your form

Set the following properties:

You can adjust the background colour of your form to make your image look like it belongs, or alternatively you can use a gif image with a transparent background. 

Write a program that works like this: Click here for video

Set up your interface as follows (Put the two images on top of each other):

Clicking on the buttons should make the images appear or disappear.

Make sure that the visible property for both images is false. We will change it when the user clicks on the button.

Double click the Dog button and attach the following code:

Private Sub cmdDog_Click()
       imgDog.Visible = True
       imgDolphin.Visible = False
End Sub

This means that when the dog button is clicked, the dog picture will appear and the dolphin picture will disappear.

Now write your own code for when the Dolphin button is clicked.
Create a simple program to help someone learn a foreign language:
  • Find 4 images and the names for them in a foreign language.
  • Create buttons with the foreign words on them.
  • When a button is clicked by the user, its matching image should appear.

Adding Lines and Other Shapes

Adding lines and shapes can add visual appeal to your interface and make your program more attractive to the user.

To add a line:

To add a shape:

To set a shape's shape property from within the code:

So shape1.shape = 3 would change the shape to a circle, 
shape1.shape = 1 would change the shape to a square etc

Young children need lots of practice learning about shapes and sizes.  In this activity, you will design a new program that will work like this:  Click here for video

The form contains a single shape.  It's properties are altered by clicking on the buttons. 

eg When the big button is clicked, the following line of code runs:

Shape1.width=4000 

When the small button is clicked this line of code is used:

Shape1.width = 1000

When the circle button is clicked, this line is used:

Shape1.shape=3