C# – How to use PictureBox control?

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 for the loaded images, and it provides the necessary properties & methods to load the images. Through this article, we are going to discuss the usage of PictureBox control.

Properties of the PictureBox control

Add Image to the PictureBox control

The control, the name tells us, deals with the images. So, it provides the 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 images 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 write 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 method 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, a high-resolution image set to the control will be loaded.

During the image load, if any error is 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 is encountered, to indicate to the user that the image load was failed.

How to resize the image?

Another important, frequently used property is its SizeMode property. This property controls the way the image is displayed on the PictureBox control. It is of PictureBoxSizeMode enum type. Depending on the value we give, this control will control the display of the image. Here are the valid values and their meaning;

• Normal – The image will display as it is, from the top-left corner of the control. If the size of the image is bigger than the control display size, the control will clip the image; we see only the portion of the image.
• StretchImage – This has elastic nature. When set, the control stretches 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 stretches or shrinks the image to fit into the boundaries of the control.
• AutoSize – When setting this, the image will be displayed as Normal; but, when the image size is different than the PictureBox control size, the control size will adjust accordingly. Got it? With other size mode values, an image within the control will be adjusted; whereas with this AutoSize value, the control size will be adjusted depending on the size of the image.
• CenterImage – Image center is in the center of the control. Image center? That’s correct. The Center of the image will be displayed in the center of the control. If the image size is bigger than the size of the control; the 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, compared to the image displayed with the value StretchImage.

Let’s look at some frequently used methods.

Methods of PictureBox control

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 the internet, by specifying the complete path of the image;

picBox.Load(url);

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;

picBox.LoadAsync(@"c:\sample.png");

CancelAsync() method is used to cancel the asynchronous load of the image to the control.

Like other Windows Forms controls, this control also triggers the events. Here are the few commonly used ones;

PictureBox control Events

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;

Here is the screenshot of the Application;

(Raju)