Home > Articles > Programming > User Interface (UI)

This chapter is from the book

Using the PictureBox Control

The PictureBox control is a used to display an image. The PictureBox control has very limited functionality. The control always displays the image in the upper-left corner of the control. The PictureBox control does not provide any way to resize the image so that it can stretch to fill the control.

The PictureBox control exposes the Image property, which represents the current image the control will display. Let's discuss three ways to load an image into the PictureBox control.

An image can be loaded into the PictureBox by loading the image from a file. The following code demonstrates how this is done:

C#
pictureBox1.Image = 
 new Bitmap(@"\Program Files\PictureBoxControl\tinyemulator_content.jpg");
VB
pictureBox1.Image = _
 new Bitmap("\Program Files\PictureBoxControl\tinyemulator_content.jpg")

When loading an image this way, you should add the image to your Visual Studio .NET project and set the Build Action property in the Properties window to Content. When your application is deployed or when a CAB file is built, the image will be included.

An image can also be loaded from your application's resource file. First add the image to your Visual Studio .NET project and set the Build Action to Embedded Resource. This will load the image into the application's resource file. You do not need to deploy the image file with the application. The following code demonstrates how to add a PictureBox control with an image located in the resource file:

C#
pictureBox1.Image = 
 new Bitmap(Assembly.GetExecutingAssembly().
 GetManifestResourceStream("PictureBoxControl.tinyemulator_res.jpg"));
VB
pictureBox1.Image = _
 new Bitmap(Assembly.GetExecutingAssembly(). _
 GetManifestResourceStream("PictureBoxControl.tinyemulator_res.jpg"))

Finally, you can load a PictureBox control with an image located in ImageList control. See the "Using the ImageList Control" section for details on how to load an image into an ImageList. The advantage of using an ImageList control is that you can use the ImageList control to resize the image before loading it into a PictureBox control. By default all images loaded in to an ImageList are resized to 16 x 16. You can change this by setting the ImageList.ImageSize property to the desired size. Changing the ImageSize property will affect all images in the ImageList. When using the ImageList, you get the added benefit of the image's being loaded in the application's resource file. The following code demonstrates how to load a PictureBox control through the ImageBox control:

C#
// resize the image
imageList1.ImageSize = new System.Drawing.Size(92, 156);
// load the resized image
pictureBox1.Image = imageList1.Images[0];
VB
' resize the image
imageList1.ImageSize = new System.Drawing.Size(92, 156)
' load the resized image
pictureBox1.Image = imageList1.Images(0)

Figure 3.22 shows an application running in the Pocket PC 2002 emulator that allows the user to load a PictureBox from a file on the file system, the application's resource file, or an ImageList.

Figure 3.22Figure 3.22 This application showcases the PictureBox control running on the Pocket PC 2002 emulator.

  • + Share This
  • 🔖 Save To Your Account