Lesson 7: Working with PictureBox in VB2019

Master image display and manipulation to create visually rich applications

Key Takeaway

The PictureBox control is essential for displaying images in Visual Basic applications. Mastering its properties and methods allows you to create dynamic image viewers and enhance your application's visual appeal.

In Visual Basic 2019, the PictureBox control is used to display images in various formats. This lesson explores how to effectively implement and manipulate images using the PictureBox control at both design time and runtime.

7.1 Loading Images in PictureBox

The PictureBox control provides versatile options for displaying images. You can load images at design time for static content or load them dynamically at runtime for interactive applications.

Design Time Loading

Add images directly in the Visual Studio designer

Runtime Loading

Programmatically load images during execution

File Dialog Integration

Let users browse and select images

Size Modes

Control how images fit in the PictureBox

7.1.1 Loading an Image at Design Time

To load an image at design time, follow these steps:

1 Insert PictureBox

Add a PictureBox control to your form. Set its border to FixedSingle and background color to white.

2 Configure Properties

Set the SizeMode property to StretchImage to ensure images fit properly within the control.

3 Select Image

In the Properties window, click the Image property and browse for your image file.

4 Apply Image

Select your image and click Open to display it in the PictureBox.

PictureBox Properties
Figure 7.1: PictureBox Properties window
Image selection
Figure 7.2: Selecting an image source

Important Notes

SizeMode Property: Determines how the image is displayed (Normal, StretchImage, AutoSize, CenterImage, Zoom).

Supported Formats: PictureBox supports JPG, PNG, BMP, GIF, and other common image formats.

Resource Management: Images added at design time are embedded in your application resources.

7.1.2 Loading an Image at Runtime

You can load images dynamically using the Image.FromFile method:

Form1.vb
Private Sub Form1_Load(sender As Object, e As EventArgs) Handles MyBase.Load
    ' Load an image from a file path
    MyPicBox.Image = Image.FromFile("C:\Users\Documents\vb2019\vb2019images\fish.jpg")
End Sub

Output:

> Image loaded successfully from file path

Important Considerations

File Paths: Use absolute paths for development, but consider relative paths for deployment.

Error Handling: Always implement error handling for missing files or invalid paths.

Resource Management: Dispose of previous images to prevent memory leaks.

7.2 Using OpenFileDialog with PictureBox

To let users browse and select images, use the OpenFileDialog control:

1 Add OpenFileDialog

Drag the OpenFileDialog control from the toolbox to your form.

2 Configure Filter

Set the Filter property to display only image files:

JPEG Files|*.JPG|GIF Files|*.GIF|Windows Bitmaps|*.BMP|PNG Files|*.PNG

3 Add Browse Button

Create a button that triggers the file dialog when clicked.

4 Load Selected Image

Use the selected file path to load the image into the PictureBox.

OpenFileDialog properties
Figure 7.3: OpenFileDialog Properties
File selection dialog
Figure 7.4: Image selection dialog

Code to implement image browsing:

Form1.vb
Private Sub BtnBrowse_Click(sender As Object, e As EventArgs) Handles BtnBrowse.Click
    ' Configure and show the OpenFileDialog
    If OFDSelectImage.ShowDialog() = DialogResult.OK Then
        ' Load the selected image
        Try
            ' Dispose of previous image to prevent memory leaks
            If MyPicBox.Image IsNot Nothing Then MyPicBox.Image.Dispose()
            
            ' Load the new image
            MyPicBox.Image = Image.FromFile(OFDSelectImage.FileName)
        Catch ex As Exception
            ' Handle errors (e.g., invalid image format)
            MessageBox.Show("Error loading image: " & ex.Message)
        End Try
    End If
End Sub

Output:

> File dialog opened successfully
> Image loaded from selected path

PictureBox Demo

Try loading different images to see how they appear in the PictureBox control.

Demo Image

No image loaded

Lesson Summary

In this lesson, you've learned how to effectively work with the PictureBox control:

Design Time Loading

Add images directly through the Visual Studio properties window

Runtime Loading

Programmatically load images using the Image.FromFile method

File Dialog Integration

Implement the OpenFileDialog control for user image selection

Practical Applications

Create image viewers, photo galleries, and visually rich applications

You've learned how to work with the PictureBox control to display and manage images in your applications. In the next lesson, we'll explore Visual Basic data types and how to use them effectively.

Next Lesson

Ready to learn about data types? Continue to Lesson 8: Data Types.

Related Resources

VB6 Tutorial

Mastering VB6 Programming

Explore Tutorials

Visual Basic Examples

Practical VB code samples for real-world applications

View Examples

Excel VBA Tutorial

Learn how to automate Excel by creating VBA macros

Learn More

VB2019 Paperback

Comprehensive guide to Visual Basic 2019

Get on Amazon