The PictureBox Control

You can display images on your form by using the Picture Box control. It is a simple control which has a main purpose of displaying images. All you have to do is browse for the desired image and Visual Studio/VCE will import it to your project. You can use several image formats such as JPEG, GIF, PNG, and BMP.

PictureBox
PictureBox

The following are the useful properties of the Picture Box control:

Properties Description
ErrorImage The image that will be displayed when the loading of the actual image failed or is canceled.
Image The image that will be displayed by the control.
ImageLocation The path of the image to be displayed by the PictureBox.
InitialImage The image that is initially displayed while the main image is loading.
SizeMode Tells how the image will be displayed. Accepts values from the System.Windows.Forms.PictureBoxSizeMode
WaitOnLoad If set to true, blocks all interaction to the form while the image is being loaded.

Figure 1 – PictureBox Properties

To display an image using the Picture Box control, there are multiple ways you can use. You can go to the Properties Window and find the Image property. Click the button to the right of it to bring out the Select Resource Dialog.

picturebox
picturebox

You have to choices, to import the image to the control’s resource file (Local resource) or to the project’s resource file. Research files are used to store resources that the application will use. Both choices have an Import button that will allow you to browse your desired image. Once you have picked the image, VS/VCE will import that image to the control or project’s resource file. Your image will now display inside the PictureBox. Note that you can use the ImageLocation property instead which requires the path of your image inside your hard drive. You can even use an image URL which is located in the web.

Once the image is displayed, it may not look like you want it to. If the loaded image is larger the size of the PictureBox, then the image will be clipped. You can use the SizeMode property to change the way the image is positioned or resized inside the control. The property uses values from the System.Windows.Forms.PictureBoxSizeMode enumeration which are presented below.

PictureBoxSizeMode Description
Normal The image will be positioned in the upper-left corner of the Picture Box and if the image is larger than the PictureBox, the image will be clipped.
StretchImage Resizes the image to match the size of the PictureBox.
AutoSize Resizes the PictureBox to match the size of the image.
CenterImage The image is centered inside the PictureBox. If the image is larger than the Picture Box, the image will be clipped.
Zoom Fits the whole image inside the Picture Box w while maintaining the image’s size ratio.

Figure 2 – System.Windows.Forms.PictureBoxSideMode Values

The most common and default event of the Picture Box control is the Click event which is called when the image is clicked.