Visual Basic 2008 Programming: Business Applications with a Design Perspective
Chapter 1 Chapter 2 Chapter 3 Chapter 4 Chapter 5 Chapter 6 Chapter 7 Chapter 8 Chapter 9
Chapter 10 Chapter 11 Chapter 12 Chapter 13 Chapter 14 Appendix A Appendix B Appendix C Home
Loading
Last change: February 13 2016 18:48:19.

 Chapter in PDF

Table of Contents

Chapter 3: User Interface Design: Visual Basic Controls and Events
Last change: February 13 2016 18:47:26.
<<PreviousNext>>

The Picture Box

The picture box has an image property that you can use to load pictures at either design time or run time. Its icon and appearance are shown in Figure 3-16.

Figure 3-16
The picture box: icon and appearance

Setting the Image Property

How do you bring a picture into the picture box? At design time, you can set its Image property. Click that property in its Properties window and then click the button in the property box. An Open (file) dialog box appears for you to specify a file containing a picture. This control supports files with various formats such as bitmap (bmp), icon (ico), metafile (wmf), JPEG (jpg), and GIF (gif). If you decide to remove the picture, you can right-click the Image property box and then select the Reset option. At run time, you can use the Image.FromFile method to load a picture. For example, you can code the following:

picFamily.Imgage = Image.FromFile _ (“C:\Program Files\Microsoft Visual Studio.NET\Common7\Graphics\icons\Elements\CLOUD.ico”)

You can remove the picture by assigning Nothing to the control’s Image property:

picFamily.Image = Nothing

The SizeMode Property

Depending on the setting of the SizeMode property of the control, the picture image and the picture box can behave different. When the property is set to Normal (default), the size of the picture box drawn into the form sets the boundary for the picture brought into the picture box. If the picture is smaller than the box, it shows in the upper left corner of the box. On the other hand, if the picture is larger than the picture box, only its upper left portion will be shown in the box. When the property is set to StrechImage, the size of the image is adjusted to fit in the picture box. When the property is set to AutoSize, the picture box’s size is adjusted to the size of the image. Finally, when the property is set to Center Image, the image will appear in the center of the picture box. The size of neither the picture box nor the image is adjusted.

Images for Actions

The picture box has a Click event, too. So you can use a picture box in place of a button for the user to click and initiate actions. Note, however, that the button also has an Image property, which you can use to set images. Both the image and the text can appear. You can properly align both by setting the ImageAlign and TextAlign properties. One of the Explore and Discover exercise in this chapter gives you a hands-on practice.

Last change: February 13 2016 18:47:28.
<<PreviousNext>>