Visual Basic in 12 Easy Lessons vel22.htm

• What You'll Learn
• The Line and Shape Controls
• Mastering the Line Control
• Mastering the Shape Control
• If You Have Graphics Files...
• Homework
  • General Knowledge
  • Find the Bug
  • What's the Output?
  • Write Code That...
  • Extra Credit

Lesson 11, Unit 22

Glitzy Graphics

What You'll Learn

• The line and shape controls
  
  
• Mastering the line control
  
  
• Mastering the shape control
  
  
• If you have graphics files...
  
  

Most Visual Basic programmers enjoy learning and using the material presented in this lesson. This lesson searches for that artist deep within every programmer! This lesson explores the graphics controls available to you as a Visual Basic programmer.

Perhaps you won't be drawing pretty pictures on every application's form that you design, but knowing how to draw lines and circles often allows you to spruce up a form by separating controls and enclosing labels within colored ovals to highlight important information.

The Line and Shape Controls

Concept: The line and shape controls work together to draw lines, boxes, and all kinds of circular figures on the form. By placing the controls and setting appropriate properties, you'll be adding flair to applications.

Figure 22.1 shows the location of the line and shape controls on the Toolbox window. The properties of each control that you place on your form determine exactly what kind of image the control becomes.

Figure 22.1. The line and shape controls provide Visual Basic's artistic tools.

Here are the primary graphic images that you can draw with the line and shape controls:

• Lines
  
  
• Rectangles
  
  
• Squares
  
  
• Ovals
  
  
• Circles
  
  
• Rounded rectangles
  
  
• Rounded squares
  
  

Figure 22.2 shows each of these seven primary images. By combining these fundamental geometric images and setting appropriate color and size properties, you can draw virtually anything you need to draw on the form.

Figure 22.2. The seven fundamental images that you can draw.

Use the line control for drawing lines of various widths, lengths, and patterns. The shape control handles the drawing for all the other fundamental shapes.

Review: The line and shape controls are the primary drawing controls. There are seven fundamental geometric shapes that you can draw. By specifying various properties, you can control how those shapes appear on the form.

Mastering the Line Control

Concept: The line control contains properties that specify the width and length of lines that you draw. In addition, you can change the pattern of each line that you draw.

Table 22.1 lists the property values for the line control. The BorderStyle property requires its own table for explanation. Table 22.2 contains the values that you can specify for the BorderStyle. The BorderStyle property determines the pattern that Visual Basic uses to draw the line. By specifying various BorderStyle values, you can vary the line pattern. If you assign a BorderStyle property at runtime, you either can specify a number that represents the BorderStyle, or use one of the constants defined in the CONSTANT.TXT file.

Figure 22.3 shows how various BorderStyle settings affect the lines that you draw. The BorderStyle determines how a series of dashes and dots comprise the line's pattern. (Is this Morse code we're speaking here?)

Figure 22.3. Affects of the BorderStyle properties.

To draw a line, double-click the line control on the toolbox. A line appears in the center of the form with two handles on each end. To move the line to a different location, drag the center of the line with the mouse. To lengthen or shorten the line, drag either handle on the line. You can raise and lower either end of the line by dragging either end's handle with the mouse.

Tip: After you position the line with the mouse in the approximate location you need the line to appear, you can fine-tune the line's size and location by setting the various property values. If you're a patient programmer, you can even animate the lines by changing the X1, X2, Y1, and Y2 property settings repeatedly through code.

Stop and Type: Figure 22.4 contains the Form window that might be used by a local hardware store for its regular program screen. The entire house was drawn using a series of lines. You can find this form inside the MOMPOP.MAK application on this book's disk.

---

Note: The only function connected to this form is the End statement inside the cmdExit_Click() command button's event procedure.

---

Figure 22.4. Lines add eye-catching glamour to a dull form.

Review: By using the line control and specifying various property values, you can draw shapes on the form's background.

Mastering the Shape Control

Concept: The shape control gives you the ability to draw six different kinds of figures on the form. The various shading and color properties help you distinguish one shape from another.

Table 22.3 contains the properties available for the shape control. The most important property is the Shape property. The Shape property gives a shape one of the six fundamental shapes.

Table 22.4 contains the possible values for the shape control's FillStyle property. Figure 22.5 shows you the various fill patterns that a shape can contain.

Figure 22.5. The FillStyle determines how the shapes' interiors appear.

Table 22.5 contains the possible values for the shape control's Shape property. Figure 22.2 showed you the various shapes that the shape controls can take on. Therefore, when you want to place a square on a form, you'll place the shape control on the form and set the Shape property to 1-Square.

Stop and Type: Figure 22.6 provides a simple shape application that changes the shape as the user presses the command button. You can load and run the SHAPECH.MAK application on this book's disk if you want to study the application.

Figure 22.6. Changing the shape with the click of a button.

Review: The shape control provides six of the seven fundamental geometric shapes that you can place on a form. The Shape property determines the outline of the shape.

If You Have Graphics Files...

Concept: Visual Basic supports two additional graphics controls that don't draw graphics but with which you can place icons and graphic bitmap images that you may have on the disk.

Figure 22.7 shows the location of two additional graphics-related controls called the picture box control and the image control. These two controls are virtually identical and enable you to load disk images onto your application's form.

---

Note: The picture box control provides a few advanced features that you can tap into if you ever write MDI (multiple document interface) applications. The image box control is more efficient and displays images faster than the picture box.

---

Figure 22.7. The picture box and image control on the toolbox.

Here are the three kinds of graphics files that these controls can load from the disk and display on a form:

• Bitmap files that end with the .BMP or .DIB filename extensions
  
  
• Icon files that end with the .ICO filename extension
  
  
• Metafiles that end with the .WMF filename extension
  
  

Where do you get these graphic files? None come with the Visual Basic Primer system (graphic images consume lots of disk space). There are several sources available. If you use the Microsoft Paintbrush program supplied with Windows, you can create bitmap files. Icon files are compact graphics files that contain the picture icons that you see in a Windows Program Manager group. Several various Windows applications store graphic images in the metafile format.

Table 22.6 contains the vital and common properties available for both the picture box and image controls. The most important value is the Picture property that contains the complete filename and pathname to the picture displayed inside the control.

When you want to put a graphic image on your form, you only need to place an image (or picture box) control on the form and specify a filename for the image that you want the control to display. Open a new form and follow these steps to create an application with an image:

1. Double-click the image control to place the control in the middle of the form.
   
   
2. Press F4 to display the Property window.
   
   
3. Click the Picture property. You'll see an ellipsis appear where you normally enter property values.
   
   
4. If you click the ellipsis, Visual Basic opens a Load Picture dialog box like the one shown in Figure 22.8. In the dialog box, you specify any file, including the path, that holds the image you want to display on your form.
   The Picture property continues to hold the pathname and filename of the image that you place on the form. At runtime, Visual Basic will display the image in the place of the control.
   
   

Figure 22.8. The Load Picture dialog box for filling in the Picture property.

You also can change a graphic file that appears in an image or picture box control using Visual Basic code. The LoadPicture function loads specific graphic files into graphic controls to display those graphics on the form. The following statement changes the picture file used for an image control named imgFace:

imgFace.Picture = LoadPicture("D:\FIGS\FACE.BMP")

You can replace pictures during runtime by loading different files using the LoadPicture() function.

Tip: By using a null string, "", for the LoadPicture() argument, you can erase a picture from a picture box or image control.

Review: This section wraps up the discussion on combining graphics with Visual Basic programs. Not only does Visual Basic provide the tools needed to draw your own pictures, but Visual Basic also enables you to load images from disk files onto your own forms.

Homework

General Knowledge

1. What two controls enable you to draw geometric shapes on a form?
   
   
2. How many different shapes does the shape control produce?
   
   
3. Which property value determines the pattern of drawn lines?
   
   
4. Which property value determines the shape of objects drawn with the shape control?
   
   
5. What two controls enable you to load graphic file images onto a form?
   
   
6. Which graphic image control is the most efficient of the two controls?
   
   
7. What three kinds of graphics files can Visual Basic display on a form?
   
   
8. Which property forces a graphic image to shrinkwrap around the picture box or image control?
   
   
9. Which control property determines the path and filename of the graphic image to display?
   
   
10. What is the name of the Visual Basic function that loads graphic file images at runtime?
    
    

Find the Bug

1. Jean has drawn a thick line that measures 15 twips. Jean wants to use the line to separate a large form message from the rest of the controls on her form. The trouble that Jean can't seem to overcome is that she wants the thick line to appear as a series of dashes. Visual Basic refuses to honor her BorderStyle request and always displays a solid line. Explain to Jean what her problem is.
   
   
2. Can you think of a roundabout way to accomplish Jean's thick, dashed line?
   
   

What's the Output?

1. Gordon wrote a program that contains the following statement:
   imgPainting.Picture = LoadPicture("")
   What appears on the image control when Gordon's application calls the LoadPicture() function?
   
   

Write Code That...

1. Suppose that you want to draw a rectangle with a blue border, red diagonal lines, and a green interior. Describe the shape control's properties that you would have to set to a blue, red, and green color.
   
   

Extra Credit

Write a program that draws a large green happy face in the center of the form. Add a command button that the user can click to blink one of the happy face's eyes.