Using Visual Basic 6

- 17 -
Adding Graphics to Your Programs

Adding Graphics to a Form
Changing a Picture at Runtime
Making a Custom Button
Adding Graphics to Forms with LoadPicture()
Making a Form Icon
Loading Files with a File List Box

Adding Graphics to a Form

Remember to experiment

Although the projects, forms, and so on, have specific names in this chapter, you can experiment with naming convention and with other parts of the code to fit your needs.

Add graphics to a form

: 1. Open a Standard EXE project and name it SmplGrfx. Name the default form frmMain. Set the form's Caption property to Simple Graphics.
: 2. Add a PictureBox to the form by double-clicking the PictureBox icon in the toolbox or by selecting the PictureBox and then drawing the control on the form. Name the PictureBox picMain.
: 3. Add an Image control to the form by using the same procedures as those described in step 2 for the PictureBox. Name the Image control imgMain.
: 4. Size and place the PictureBox and Image controls where you want them on the form, as shown in Figure 17.1.

FIGURE 17.1 The default value for the BorderStyle property of the PictureBox is 1 - Fixed Single. The default value for the BorderStyle property of the Image control is 0 - None.

: 5. Select the picMain PictureBox. Go to the Picture property in the Properties window and open the Load Picture dialog by clicking the ellipsis button (see Figure 17.2).

FIGURE 17.2 The Windows directory on your system ships with many different types of graphics files.

Many graphics files will work

Bubbles.bmp is a bitmap that ships with Windows. If for some reason this file isn't present in your Windows directory, choose another bitmap or choose any icon, metafile or enhanced metafile, JPEG, or GIF file. All these formats can be contained within a PictureBox.

: 6. Go to the Windows directory and select Bubbles.bmp. When you click the Open button, this bitmap will appear in the PictureBox.
: 7. Set the value of the AutoSize property of the picMain PictureBox to True. This enlarges the area of the PictureBox to accommodate the size of the bitmap Bubbles.bmp.
: 8. Select the Image control and set the value of the Picture property to the bitmap Triangles.bmp. (This file is also in the Windows directory.) Do this the same way you added a picture to the PictureBox. You can't set the AutoSize property, however, because it isn't supported by the Image control.
: 9. Save and run your code (see Figure 17.3).

FIGURE 17.3 The Image control doesn't support an AutoSize property. It automatically resizes itself to the dimensions of the assigned picture when the graphic is added.

Changing a Picture at Runtime

You can change the graphic assigned to the Picture property of a PictureBox or Image control at runtime by changing the value of the control's Picture property.

Download this project's code

The code for this example can be found at http://www. mcp.com/info. When prompted, enter 078971633x for the ISBN and click the Search button.

Change a control's Picture property at runtime

: 1. Reopen the SmplGrfx.vbp project that you created earlier.
: 2. Add a CommandButton to the form and name it cmdChange. Set the value of the Caption property to Change the graphic.
: 3. Add the following code to the cmdChange_Click() event procedure:

picMain.Picture = imgMain.Picture

: 4. Save and run the code (see Figure 17.4).

FIGURE 17.4 Setting the PictureBox control's AutoSize property to True resizes the control's area to the same size as the image.

Making a Custom Button

You can use the process of setting a Picture property at runtime to make a custom button that looks different but works the same as a CommandButton.

Make a custom button

: 1. Open a Standard EXE project and name it CustBut.vbp. Change the name of the default form to frmCust and set the form's Caption property to Custom Button.
: 2. Add three Image controls to the form. Set the Name property of one to imgMain, another to imgUp, and the last to imgDown.
: 3. Assign the icon file cbUp.ico to imgUp and assign cbDown.ico to imgDown. (You can find these files at http://www.mcp.com/info.) Don't assign a picture to imgMain.
: 4. Arrange the Image controls on the form as shown in Figure 17.5.
: 5. Add the event procedure code shown in Listing 17.1 for the Form_Load(), imgMain_MouseDown(), and imgMain_MouseUp() event procedures to the General section of frmCust.

FIGURE 17.5 Creating a custom button requires three Image controls. When you don't add an image to an Image control, it appears as a dashed box on your form.

LISTING 17.1 17LIST01.TXT--Settings for the Custom Button Image Control

01 Private Sub Form_Load()

02 imgMain.Picture = imgUp.Picture

03 End Sub

05 Private Sub imgMain_MouseDown(Button As Integer, _

06 Shift As Integer, X As Single, Y As Single)

07 imgMain.Picture = imgDown.Picture

08 End Sub

10 Private Sub imgMain_MouseUp(Button As Integer, _

11 Shift As Integer, X As Single, Y As Single)

12 imgMain.Picture = imgUp.Picture

13 End Sub

: 6. Set the value of the Visible property for the Image controls imgDown and imgUp to False.
: 7. Set the following code in the Click event procedure of the Image control imgMain:

MsgBox "I am a custom button!"

: 8. Save and run the code (see Figure 17.6).

FIGURE 17.6 The custom button, imgMain, can still reference the Picture property of the imgDown and imgUp controls, even though the Visible property of these buttons is set to False.

When you run the code in the project CustBut.vbp, the Image control imgMain becomes a custom button with an associated Click event procedure. The key to the construction of the custom button is to have the Image control's MouseDown and MouseUp behavior resemble general button down and button up graphical behaviors of a CommandButton. For example, when you click a CommandButton, notice that it shows a slightly different picture when the mouse button is down compared to when the mouse button is up. The custom button you just made does the same thing (see Figure 17.7). You can program the Click event procedure of the Image control custom button without interfering with other mouse behaviors because the imaging behavior of that control is relegated only to the MouseDown and MouseUp event procedures.

FIGURE 17.7 MouseDown and MouseUp images vary slightly to indicate state changes.

Adding Graphics to Forms with LoadPicture()

If you want to load a graphic file into a PictureBox or Image control from your hard disk, you use the LoadPicture() function:

MyPicture = LoadPicture(strFilePath)

In this syntax,

MyPicture is a picture for a PictureBox or Image control.
LoadPicture is the function name.
strFilePath is a string that references the exact location on the hard disk of the graphics file that you want to load. This string must be in quotation marks.

You can download this example

The code for this example can be found at http://www.mcp.com/info. When prompted, enter 078971633x for the ISBN and click the Search button.

Load a file from disk

: 1. Open a standard EXE project and name it LoadPrj.vbp. Rename the default form frmLoad. Set the form's Caption property to Load File.
: 2. Add a PictureBox to the form and name it picLoad. Set the value of the AutoSize property of the PictureBox to True.
: 3. Add a CommandButton to the form and name it cmdLoad. Set the Caption property of cmdLoad to Load from File.
: 4. Size and place the controls on the form as shown in Figure 17.8.

FIGURE 17.8 When you set the AutoSize property of a PictureBox to True, be sure to leave enough expansion room for the PictureBox to accommodate a large picture.

: 5. Add the following code to the Click event procedure of the CommandButton cmdLoad. (If you want to use a bitmap from a different folder or if circles.bmp is in a different folder on your system, use that path instead.)

picLoad.Picture = LoadPicture("c:\windows\circles.bmp")

: 6. Save and run the code. Figure 17.9 shows the program in run mode.

FIGURE 17.9 To clear a PictureBox or Image control, call LoadPicture without any arguments: picLoad.Picture = LoadPicture.

Making a Form Icon

Windows programs commonly have an icon embedded within the executable file (.exe) to graphically represent the given program. When you create a program, Visual Basic automatically assigns one of your form's icons to your executable. Unless you change it, Visual Basic will use the default form icon (see Figure 17.10).

FIGURE 17.10 You set the unique properties of your program within the Project Properties dialog.

You can embed a custom icon into your program's executable file, however, by assigning an icon to the Icon property of a form in your project. Visual Basic contains many icons for you to use in the \VB\Graphics\Icons folder within the Visual Basic folder on your hard drive.

Change a form's icon

: 1. Select the Icon property of the form.
: 2. Click the ellipsis button to display the Load Icon dialog and browse for your custom icon (see Figure 17.11).
: 3. Click the Open button to add the icon to the form.

FIGURE 17.11 In Windows, icon files show their image in all views.

If your project has only one form, adding a custom icon to the Icon property of the form will automatically assign the same icon to the program. If your project has multiple forms, you must set the application icon from the Project Properties dialog.

Creating a new icon

You can't create an icon within Visual Basic or with the MS Paint program that ships with Windows. However, the Visual Basic 6 CD-ROM does contain a program for making icons. It's called the Microsoft Image Editor (imagedit.exe), located in the directory \Tools\Imagedit. If you can't find this program on your system, it probably wasn't installed; run Visual Basic setup again to install it.

Set the icon for your application

: 1. Set the icon for each form in your application.
: 2. Open the Project Properties dialog and select the Make tab.
: 3. From the Icon drop-down list, select the form that has the icon you want to use as your program's icon (see Figure 17.12).
Figure 17.12 You can set many of your project's properties in the Project Properties dialog.

Loading Files with a File List Box

Look at the project MoreGrfx.vbp (from http://www.mcp.com/info). This program sums up the techniques you've learned thus far to display graphics (see Figure 17.13). It enables you to display icon or bitmap images embedded in the form and to select a file from disk to display in the main PictureBox control picDisplay.

FIGURE 17.13 The application More Graphics uses OptionButtons to determine which technique the program should use to display images.

MoreGrfx uses a FileListBox (similar to a ListBox) to display the available graphic files. However, whereas the ListBox must be programmed to load string values to display, the FileListBox automatically displays strings that reflect the files of a specific folder. All you need to do is tell the FileListBox which folder by setting the value of the Path property of the FileListBox to the exact location of the folder containing the files you want to display.

Listing 17.2 shows the Form_Load() event procedure for the project MoreGrfx.vbp. This event procedure is where the value of the Path property for the FileListBox File1 is set.

LISTING 17.2 17LIST02.TXT--Using the Pattern Property of the FileListBox

01 Private Sub Form_Load()

02 `Set the path of the FileListbox to be the

03 `directory in which the application resides.

04 File1.Path = App.Path

06 `Make it so the FileListbox only displays

07 `bitmap and icon files.

08 File1.Pattern = "*.bmp;*.ico"

09 End Sub

Notice that the value of the FileListBox's Path property is set to the value of the Path property of the App object, which holds information about your application. The value of the App object's Path property reports the directory in which the application executable file resides. Thus, the FileListBox displays the files in the folder from which the application was started.

After a file is selected in the FileListBox File1, the user clicks the CommandButton cmdAssign. Listing 17.3 shows the Click event procedure for this CommandButton.

Study this code closely

Many of this program's nuances can be understood only by working directly with the program and looking at the entire code.

LISTING 17.3 17LIST03.TXT--The Click() Event Procedure of the
CommandButton

01 Private Sub cmdAssign_Click()

02 Dim strFilePath As String

04 `Query the option buttons to see which one

05 `has been checked.

06 If optBitmap.Value = True Then

07 `Show the bitmap graphic

08 picDisplay.Picture = picBitmap.Picture

09 ElseIf optIcon.Value = True Then

10 `Show the icon graphic

11 picDisplay.Picture = picIcon.Picture

12 ElseIf optList.Value = True Then

13 `Assign the exact path of the graphic in the file

14 `list box to the strFilePath string variable.

15 `Don't forget, to get the string in a list box

16 `you must identify the Listindex selected within

17 `a List Control's List array.

18 strFilePath = File1.Path & "\" _

& File1.List(File1.ListIndex)

19 `Load the picture from disk and assign it to the

20 `picture property of the Picture control.

21 picDisplay.Picture = LoadPicture(strFilePath)

23 End If

24 End Sub

As shown in Listing 17.3, if the OptionButton optList is checked (line 12), the application loads the selected file from disk into the PictureBox picDisplay by using the LoadPicture() function.

Creating Special Graphic Effects

In the project MoreGrfx.vbp, after users assign a picture to the PictureBox picDisplay, they can decide to distort the picture by clicking the CommandButton cmdDistort. When this button is clicked, the picture in the PictureBox is assigned to the Picture property of the Image control imgDistort with the following statements:

imgDistort.Width = picDisplay.Width * 1.5
imgDistort.Picture = picDisplay.Picture

The Image control distorts the picture because the value of the Stretch property of imgDistort is set to True and the value of the Width property of the Image control is modified to be irregular relative to the PictureBox picDisplay. The PictureBox must have the value of its AutoSize property set to True to resize itself and accommodate the area of pictures assigned to it. The Image control resizes itself by default to accommodate the area of assigned pictures. However, when the value of the Image control's Stretch property is set to True, Visual Basic resizes the assigned picture to the dimensions of the Image control, regardless of the size of the Image control. This can make for some unusual distortions (see Figure 17.14).

However, you can use the Stretch property to enlarge a picture within an Image control. Listing 17.4 shows the code for the cmdEnlarge_Click() event procedure. The cmdEnlarge CommandButton allows users to enlarge the picture displayed in the smaller PictureBox picDisplay. The trick to enlarging a picture is to maintain the width-to-height (aspect) ratio of the picture when sizing the Image control to which the picture will be stretched. The code in Listing 17.4 determines the ratio of the PictureBox picDisplay by calculating the control's width over its height (line 4). Then the code applies that ratio to the Height of the Image control imgDistort (line 8). As a result, the value of imgDistort.Width is reset, and the aspect ratio is maintained.

FIGURE 17.14 You can use the Stretch property of the Image control to distort pictures. To enlarge a picture, size the Image control to the same ratio as the original picture.

LISTING 17.4 17LIST04.TXT--The Code to Enlarge a Picture

01 Private Sub cmdEnlarge_Click()

02 Dim dSizeRatio As Double

03 `Figure out the ratio

04 dSizeRatio = picDisplay.Width / picDisplay.Height

06 `Apply the ratio to Image control's Height to

07 `get the new Width

08 imgDistort.Width = imgDistort.Height * dSizeRatio

09 End Sub