PictureBox control is used to display the picture. Once we place the control on Windows Form, we need to set the right properties to load & display the image on the PictureBox control. We use this control, when we need to deal with the images. It acts as a container to the loaded images; and it provides necessary properties & methods to load the images. Through this article, we are going to discuss the usage of PictureBox control.
Add Image to the PictureBox control
The control, name tells us, it deals with the images. So, it provides required properties to load the images to the control. Few of the frequently used properties, we will discuss here.
Image property is used to assign the image to this control. We can load image to PictureBox control, during Design time or through the code.
Image property is of Image class type. Hence, in the code, we can not directly assign the image path, to this property. We have to written the code, which should load the image first, from the given location, and then assign the Image object to this property, to display the image on the control. For this, Image class provides, FromFile method to us. This methods takes a single argument, path or url of the image and returns the Image object. Here is the code snippet to map the image to the control;
picBox.Image = Image.FromFile(@"c:\sample.png");
It is simple right? But, if you want the image to be part of the Project; you can import the image into the project, and then assign it to the control in design mode.
ImageLocation is another property, which we can use to give the path of the image (or URL of the image); then, the control loads it & display the image. Below is an example;
picBox.ImageLocation = @"c:\sample.png";
InitialImage property is used to set an alternate image, when the main image is loading to display. Usually, we set the low resolution image to this property; so, that it will be quickly displayed on the control. Meanwhile, high resolution image set to the control will be loaded.
During the image load, if any error encountered, the image will fail to load. We can use ErrorImage property to set the error image and this will be displayed when an error encountered, to indicate to the user that image load was failed.
How to resize the image?
Another important, frequently used property is it’s SizeMode property. This property controls the way image displayed on the PictureBox control. It is of PictureBoxSizeMode enum type. Depending on the value we give, this control will controls the display of the image. Here are the valid values and their meaning;
Normal – The image will display as it is, from top-left corner of the control. If the size of the image is bigger than the control display size, control will clip the image; we see only the portion of the image.
StretchImage – This has elastic capability. When set, the control stretch the image to fit into the size of the control. Remember that, this option, doesn’t maintain the size ratio (or aspect ratio); it simply stretch or shrunk the image to fit into the boundaries of the control.
AutoSize – When set this, the image will be displayed as Normal; but, when the image size if different than the PictureBox control size, the control size will adjust accordingly. Got it? With other size mode values, image within the control will be adjusted; whereas with this AutoSize value, control size will be adjusted depending on the size of the image.
CenterImage – Image center will be displayed in center of the control. Image center? That’s correct. Center of the image will be displayed in the center of the control. If image size is bigger than the size of the control; outer edges of the image will be clipped.
Zoom – This option will resize the image in the control. Unlike StretchImage, this maintains the aspect or size ratio. Hence, the image looks good, compare to the image displayed with the value StretchImage.
Let’s look at some frequently used methods.
Loading image to the control
Load method is used to load the image from the specified path or URL. For example, we can load the image from internet, by specifying the complete path of the image;
LoadAsync is an important method we use, to load the image asynchronously to allow other statements to continue to execute during the image load. You can use this, when the image size is too big and takes time to load. Above code, we can write it as below;
CancelAsync() method is used to cancel the asynchronous load of the image to the control.
Like other Windows Forms controls, this control also trigger the events. Here are the few commonly used ones;
LoadCompleted event will be triggered, when the asynchronous image load is completed. We can use LoadProgressChanged event to show the progress of the asynchronous image load to the user. These two events will be triggered, when we use, LoadAsync method(s) to load the images.
Click event will be triggered when we click on the control.
Let’s put all together, what we have learned so far about this control; and prepare the simple application. Here is the working code;