## 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.

Table 22.1. The line control properties.

Property | Description
BorderColor | Specifies a hexadecimal Windows color value that determines the color of the line.
BorderStyle | Contains one of seven values that specifies the pattern of the drawn line. See Table 22.2 for available BorderStyle values. The default value is 1-Solid. The BorderStyle has no effect on lines with a BorderWidth greater than one twip.
BorderWidth | Specifies the size, in twips, that the line takes.
DrawMode | An advanced style that determines how the bit patterns of the line interact with the surrounding form's bit appearance. The default value, 13 - Copy Pen, works well for virtually all Visual Basic applications.
Index | Specifies the subscript of the line control if the line control is part of a control array.
Name | Contains the name of the line control. Visual Basic names the line controls Line1, Line2, and so on, unless you rename the line controls.
Tag | Unused by Visual Basic. This is for the programmer's use for an identifying comment applied to the line control.
Visible | Holds True or False, indicating whether the user can see the line control.
X1 | Contains the number of twips from the left of the Form window to the start of the line.
X2 | Contains the number of twips from the left of the Form window to the end of the line.
Y1 | Contains the number of twips from the top of the Form window to the left starting point of the line.
Y2 | Contains the number of twips from the top of the Form window to the lower ending point of the line.

Table 22.2. The line control's BorderStyle values.

Value | CONSTANT.TXT Name | Description
0-Transparent | TRANSPARENT | Background comes through the line
1-Solid | SOLID | The line is a solid line
2-Dash | DASH | The line is comprised of dashes
3-Dot | DOT | The line is comprised of dots
4-Dash-Dot | DASH_DOT | The line is comprised of a series of dashes followed by dots
5-Dash-Dot-Dot | DASH_DOT_DOT | The line is comprised of a series of one dash followed by two dots
6-Inside Solid | INSIDE_SOLID | Same as 1-Solid for lines

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.3. The shape control properties.

Property | Description
BackColor | Specifies a hexadecimal Windows color value that determines the background color of the shape.
BackStyle | Contains either 0-Transparent (the default) or 1-Opaque that determines whether the background of the form appears through the shape or if the shape hides whatever it covers.
BorderColor | Specifies a hexadecimal Windows color value that determines the color of the shape's bordering edges.
BorderStyle | Contains one of seven values that specifies the pattern of the shape's border. Table 22.2's line control's BorderStyle values provide the shape's BorderStyle possible values as well. The default value is 1-Solid. The BorderStyle has no effect on shapes with a BorderWidth greater than one twip.
BorderWidth | Specifies the size, in twips, that the shape's outline takes.
DrawMode | An advanced style that determines how the bit patterns of the shape interact with the surrounding form's bit appearance. The default value, 13 - Copy Pen, works well for virtually all Visual Basic applications.
FillColor | Specifies a hexadecimal Windows color value that determines the color of the shape's interior lines.
FillStyle | Contains one of eight values that specifies the pattern of lines with which Visual Basic paints the interior of the shape. Table 22.4 contains the possible values for the shape's FillStyle. The default FillStyle value is 0-Solid.
Height | Specifies the number of twips high that the shape takes (from the highest point to the lowest point in the shape).
Index | Specifies the subscript of the shape control if the shape control is part of a control array.
Left | Specifies the number of twips from the form's left edge to the shape's leftmost edge.
Name | Contains the name of the shape control. Visual Basic names the line controls Shape1, Shape2, and so on, unless you rename the shape controls.
Shape | Contains one of six values that specifies the type of shape that the shape control takes on. Table 22.5 contains the possible values for the shape's Shape property. The default Shape property is 0-Rectangle.
Tag | Unused by Visual Basic This is for the programmer's use for an identifying comment applied to the shape control.
Top | Specifies the number of twips from the form's top edge to the shape's highest edge.
Visible | Holds True or False, indicating whether the user can see the shape control.
Width | Specifies the number of twips wide that the shape takes (at the widest axis).

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.4. The shape control's FillStyle values.

Value | CONSTANT.TXT Name | Description
0-Solid | SOLID | Solid color fill with no pattern
1-Transparent | TRANSPARENT | The shape appears as an outline only
2-Horizontal Line | HORIZONTAL_LINE | Horizontal lines fill the shape
3-Vertical Line | VERTICAL_LINE | Vertical lines fill the shape
4-Upward Diagonal | UPWARD_DIAGONAL | Upward diagonal lines fill the shape
5-Downward Diagonal | DOWNWARD_DIAGONAL | Downward diagonal lines fill the shape
6-Cross | CROSS | Crosshairs fill the shape
7-Diagonal Cross | DIAGONAL_CROSS | Diagonal crosshairs fill the shape

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.

Table 22.5. The shape control's Shape properties.

Value | CONSTANT.TXT Name | Description
0-Rectangle | SHAPE_RECTANGLE | A rectangle
1-Square | SHAPE_SQUARE | A square
2-Oval | SHAPE_OVAL | An oval
3-Circle | SHAPE_CIRCLE | A circle
4-Rounded Rectangle | SHAPE_ROUNDED_RECTANGLE | A rectangle with rounded corners
5-Rounded Square | SHAPE_ROUNDED_SQUARE | A square with rounded corners

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.

Table 22.6. The picture box and image controls' properties.

Property | Description
BorderStyle | Describes the style of the border around the image. If set to 0-None (the default), no border appears around the image. If 1-Fixed Single, a dark border line appears around the image.
Height | Contains the height, in twips, of the image. (See Stretch.)
Left | Holds the number of twips from the left edge of the Form window to the left edge of the image.
Name | Contains the name of the picture box or image. Visual Basic names the picture box controls Picture1, Picture2, and so on, and Visual Basic names the image control Image1, Image2, and so on unless you rename the controls.
Picture | Contains a complete path and filename to the image that Visual Basic will display in the control at runtime. No image appears inside the control until the user runs the program.
Stretch | (For image controls only.) If set to False, (the default) the control resizes automatically to fit the size of the graphic image. No matter what size you specify for the image control, the control will resize to the exact size of the disk file's graphic image as if to shrinkwrap around the image. If set to True, the image resizes to fit the shape of the control.
Width | The width, in twips, of the control. (See Stretch.)

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.