14.8 PictureBoxes

A PictureBox displays an image. The image can be one of several formats, such as bitmap, PNG (Portable Network Graphics), GIF (Graphics Interchange Format) and JPEG (Joint Photographic Experts Group). A PictureBox’s Image property specifies the image that’s displayed, and the SizeMode property indicates how the image is displayed (Normal, StretchImage, Autosize, CenterImage or Zoom). Figure 14.29 describes common PictureBox properties and a common event.

Fig. 14.29 PictureBox properties and an event.

PictureBox properties and an event Description
Common Properties
Image Sets the image to display in the PictureBox.
SizeMode Controls image sizing and positioning. Values are Normal (default), StretchImage, AutoSize, CenterImage and Zoom. Normal places the image in the PictureBox’s top-left corner, and CenterImage puts the image in the middle. Both truncate the image if it’s too large. StretchImage fits the image in the PictureBox. AutoSize resizes the PictureBox to fit the image. Zoom resizes the image to to fit the PictureBox but maintains the original aspect ratio.
Common Event
Click Occurs when the user clicks a control. When you double click this control in the designer, an event handler is generated for this event.

Figure 14.30 uses a PictureBox named imagePictureBox to display one of three bitmap images—image0.bmp, image1.bmp or image2.bmp. These images are provided in the Images subdirectory of this chapter’s examples directory. Whenever a user clicks the Next Image Button, the image changes to the next image in sequence. When the last image is displayed and the user clicks the Next Image Button, the first image is displayed again.

Fig. 14.30 Using a PictureBox to display images.

Alternate View 

  1    // Fig. 14.30: PictureBoxTestForm.cs
  2    // Using a PictureBox to display images.
  3    using System;
  4    using System.Drawing;
  5    using System.Windows.Forms;
  6
  7    namespace PictureBoxTest
  8    {
  9       // Form to display different images when Button is clicked
 10       public partial class PictureBoxTestForm : Form
 11       {
 12          private int ImageNumber { get; set; } = -1; // image to display
 13
 14          // default constructor
 15          public PictureBoxTestForm()
 16          {
 17             InitializeComponent();
 18          }
 19
 20          // change image whenever Next Button is clicked
 21          private void nextButton_Click(object sender, EventArgs e)
 22          {
 23             ImageNumber = (ImageNumber + 1) % 3; // cycles from 0 to 2
 24
 25             // retrieve image from resources and load into PictureBox
 26             imagePictureBox.Image =
 27                (Image) (Properties.Resources.ResourceManager.GetObject(
 28                $"image{ImageNumber}"));
 29          }
 30       }
 31    }

Using Resources Programmatically

In this example, we added the images to the project as resources. This causes the IDE to to copy the images into the app’s executable file and enables the app to access the images through the project’s Properties namespace. When you do this, you don’t need to worry about wrapping the images with the app when you move it to another location or computer.

If you’re creating a new project, use the following steps to add images to the project as resources:

  1. After creating your project, right click the project’s Properties node in the Solution Explorer and select Open to display the project’s properties.

  2. From the tabs on the left, click the Resources tab.

  3. At the top of the Resources tab, click the down arrow next to Add Resource and select Add Existing File… to display the Add existing file to resources dialog.

  4. Locate the image files you wish to add as resources and click the Open button. We provided three sample images in the Images folder with this chapter’s examples.

  5. Save your project.

The files now appear in a folder named Resources in the Solution Explorer. We’ll use this technique in most examples that use images going forward.

A project’s resources are accessible to the app via its Resources class (of the project’s Properties namespace). The Resources class contains a ResourceManager object for interacting with the resources programmatically. To access an image, you can use the method GetObject, which takes as an argument the resource name as it appears in the Resources tab (e.g., "image0") and returns the resource as an Object. Lines 27–28 invoke GetObject with the result of the string-interpolation expression


$"image{ImageNumber}"

which builds the name of the resource by placing the index of the next picture (ImageNumber, which was obtained earlier in line 23) at the end of the word "image". You must convert this Object to type Image (namespace System.Drawing) to assign it to the PictureBox’s Image property (lines 26–28).

The Resources class also provides direct access to the resources you define with expressions of the form Resources.resourceName, where resourceName is the name you provided to the resource when you created it. When using such an expression, the resource returned already has the appropriate type. For example, Properties.Resources.image0 is an Image object representing the first image.

..................Content has been hidden....................

You can't read the all page of ebook, please click here login for view all page.
Reset