'; zhtm += ''; zhtm += '

' + pPage + ''; zhtm += ''; window.popUpWin.document.write(zhtm); window.popUpWin.document.close(); // Johnny Jackson 4/28/98 } //--> Using Visual Basic 6 -- Ch 17 -- Adding Graphics to Your Programs


Using Visual Basic 6

Previous chapterNext chapterContents

- 17 -
Adding Graphics to Your Programs

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


04


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


09


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,








	



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


05


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


03


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)


22


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


05


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


07 `get the new Width


08 imgDistort.Width = imgDistort.Height * dSizeRatio


09 End Sub









Previous chapterNext chapterContents 





© Copyright, Macmillan Computer Publishing. All
rights reserved.