Displaying Images: Using the PictureBox Control

  • Article

In this lesson, you will learn how to use a PictureBox control to display images and also how to display a picture as a background image on a form.

It is said that a picture is worth a thousand words, and, in fact, many programs use pictures to communicate information. There are several ways to display pictures in Visual Basic—the most common way is to use a PictureBox control.

The PictureBox control acts as a container for pictures; you choose the picture to be displayed by setting the Image property. The Image property can be set in the Properties window, or you can write code to tell the program which picture to display.

Some other useful properties for the PictureBox control are the AutoSize property, which determines whether the PictureBox will stretch to fit the picture, and the SizeMode property, which can be used to stretch, center, or zoom the image in the PictureBox control.

Before you add a picture to a PictureBox control, you will typically add the picture file to your project as a resource. Once you add a resource to your project, you can reuse it as many times as you want—for example, you might want to display the same picture in several locations.

Try It!

To add a picture as a resource

  1. On the File menu, click New Project.

  2. In the New Project dialog box, in the Templates pane, click Windows Application.

  3. In the Name box, type Pictures and then click OK.

    A new Windows Forms project opens.

  4. In the Solution Explorer window, double-click the My Project node to open the Project Designer.

  5. In the Project Designer, click the Resources tab.

  6. Click Add Resource, and then select Add Existing File from the drop-down list.

    The Add existing file to resources dialog box opens. If you don't see any picture files, browse to a folder that does contain pictures.

  7. Select an image file (a file that has a .bmp, .gif, or .jpg file name extension), and then click Open. For this example, it is best to pick a small picture.

    The picture is added to your project and will appear in the Resource Manager window.

  8. Repeat the previous two steps to add a second picture to your project.

  9. On the File menu, click Close. If asked to save changes, click Yes.

To display pictures using a PictureBox control

  1. In Solution Explorer, select Form1.vb, and then on the View menu, click Designer.

  2. From the Toolbox, drag a PictureBox control onto the form.

  3. In the Properties window, click the … button next to the Image property to open the Select Resource dialog box.

  4. From the Entry list, select one of the pictures that you added, and then click OK.

  5. Select the SizeMode property, and set it to AutoSize.

    Notice how the PictureBox control automatically resizes to fit the picture.

  6. In the form, double-click the PictureBox control to open the PictureBox1_Click event handler in the Code Editor.

  7. Add the following code to the PictureBox1_Click event handler.

    Note

    You will have to replace "MyPictureName2" with the actual name of the second picture that you added earlier.

    PictureBox1.Image = My.Resources.MyPictureName2

  8. Press F5 to run your program. When the form appears, click the picture to make the second picture appear.

Displaying a Background Image on a Form

In addition to displaying a picture in a PictureBox control, you can also display a picture as the background for the form. The BackgroundImage property of a form is used to display a picture that will appear behind any other controls on the form, much the same as wallpaper on the Windows desktop.

Just as Windows enables you to choose whether wallpaper is centered, tiled, or stretched to fill the screen, the BackgroundImageLayout property can be used to do the same for a form.

Tip

Many of the other controls, such as the Panel, GroupBox, and even the Button control also have a BackgroundImage property. Try them and see!

Try It!

To display a background image on a form

  1. In Solution Explorer, select Form1.vb, and then on the View menu, click Designer.

  2. Select the form by clicking it anywhere outside the PictureBox.

  3. In the Properties window, click the … button next to the BackgroundImage property to open the Select Resource dialog box.

  4. From the Entry list, select one of the pictures that you added earlier, and then click OK.

    Notice that the picture is displayed on the form behind the PictureBox and is tiled by default.

    Note

    If the picture in the PictureBox control is too large, you may not be able to see the background picture. In this case, select the PictureBox control, and drag it to the bottom of the form to move it out of the way.

  5. Select the BackgroundImageLayout property, and set it to Stretch.

    Notice how the picture stretches to fill the whole form.

  6. Double-click the form to open the Code Editor.

  7. Make certain that Form1 Events is selected in the left-hand drop-down box, and then click Click in the right-hand drop-down box.

  8. Add the following code to the Form1_Click event handler

    If Me.BackgroundImageLayout = ImageLayout.Stretch Then
  Me.BackgroundImageLayout = ImageLayout.Center
Else
  Me.BackgroundImageLayout = ImageLayout.Stretch
End If

  9. Press F5 to run your program. When the form appears, click it to change the layout.

Next Steps

In this lesson, you learned how to use the PictureBox control to display images, and also how to use the BackgroundImage property of a form. In the next lesson, you will learn how to create menus to present choices to users.

Next Lesson: Giving Users Choices: Creating Menus at Design Time

See Also

Tasks

How to: Set the Background of a Windows Forms Panel

Reference

PictureBox Control Overview (Windows Forms)