Create Image Viewer in UserForm with Excel VBA

Step 1: Set up the UserForm

1. Create a new UserForm:
   • In the VBA editor, go to Insert > UserForm to add a new UserForm to your project.
   • Rename the UserForm to ImageViewerForm (optional but recommended for clarity).
2. Add Controls to the UserForm:
   • Open the Toolbox (if it’s not visible, go to View > Toolbox).
   • From the toolbox, you will need:
     • Image Control: To display the image.
     • CommandButton: To load the image.
     • TextBox: (optional) To display the file path of the selected image.
     • Label: To display a caption or additional info (optional).

Here’s how to arrange them:

1. • Add a CommandButton and rename it to cmdLoadImage (for loading the image).
   • Add an Image control and rename it to imgDisplay (this will be used to display the image).
   • Optionally, add a TextBox and Label for displaying the image path.

Step 2: Write the VBA Code

Now, let’s write the VBA code to make this Image Viewer work.

1. Load the Image: The first thing you’ll do is create an event to load the image into the Image control when you click the Load Image button.

Private Sub cmdLoadImage_Click()
    Dim imgPath As String
    ' Open file dialog to select an image
    With Application.FileDialog(msoFileDialogFilePicker)
        .Title = "Select an Image"
        .Filters.Clear
        .Filters.Add "Image Files", "*.jpg;*.jpeg;*.png;*.gif;*.bmp;*.tiff"
        If .Show = -1 Then ' If a file is selected
            imgPath = .SelectedItems(1) ' Get the image path
            ' Set the image to the Image control
            imgDisplay.Picture = LoadPicture(imgPath)
            ' Optionally, display the path in the TextBox
            TextBox1.Value = imgPath
        End If
    End With
End Sub

Explanation:

• • The FileDialog allows the user to select an image file. It filters to show only common image formats.
  • Once an image is selected, the path is passed to LoadPicture, which loads the image into the imgDisplay control.
  • The TextBox1 displays the path of the selected image, so users can see where the image is located.

2. Resize the Image (optional): You may want to resize the image to fit within the Image control. You can use the following code to resize the image to the size of the control:

Private Sub imgDisplay_AfterUpdate()
    ' Ensure the image fits within the Image control
    With imgDisplay
        .ShapeRange.LockAspectRatio = msoFalse ' Unlock aspect ratio for resizing
        .ShapeRange.Width = imgDisplay.Width
        .ShapeRange.Height = imgDisplay.Height
    End With
End Sub

Step 3: Additional Features (Optional)

• Adding a Caption: You can add a Label control to display a caption or additional info about the image.

Private Sub cmdLoadImage_Click()
    ' After selecting the image
    Label1.Caption = "Displaying: " & imgPath ' Show image file name
End Sub

• Clear the Image: Add a button to clear the displayed image.

Private Sub cmdClearImage_Click()
    imgDisplay.Picture = Nothing ' Clear the picture from the Image control
    TextBox1.Value = "" ' Clear the path from the TextBox
    Label1.Caption = "" ' Clear the label
End Sub

Final UserForm Code

Here’s the complete code for the UserForm:

Private Sub cmdLoadImage_Click()
    Dim imgPath As String
    ' Open file dialog to select an image
    With Application.FileDialog(msoFileDialogFilePicker)
        .Title = "Select an Image"
        .Filters.Clear
        .Filters.Add "Image Files", "*.jpg;*.jpeg;*.png;*.gif;*.bmp;*.tiff"
        If .Show = -1 Then
            imgPath = .SelectedItems(1) ' Get the image path
            imgDisplay.Picture = LoadPicture(imgPath) ' Display the image
            TextBox1.Value = imgPath ' Display path in TextBox
            Label1.Caption = "Displaying: " & Dir(imgPath) ' Show image file name in label
        End If
    End With
End Sub

Private Sub cmdClearImage_Click()
    imgDisplay.Picture = Nothing ' Clear image
    TextBox1.Value = "" ' Clear path
    Label1.Caption = "" ' Clear label
End Sub

Private Sub imgDisplay_AfterUpdate()
    ' Resize image to fit control
    With imgDisplay
        .ShapeRange.LockAspectRatio = msoFalse
        .ShapeRange.Width = imgDisplay.Width
        .ShapeRange.Height = imgDisplay.Height
    End With
End Sub

Explanation of Code:

1. cmdLoadImage_Click: This subroutine opens a file dialog for the user to select an image file. Once selected, the image is displayed in the imgDisplay control, and the file path is displayed in the TextBox1. The Label1 caption shows the image’s file name.
2. cmdClearImage_Click: This subroutine clears the image from the Image control, as well as the path in the TextBox1 and the caption in Label1.
3. imgDisplay_AfterUpdate: This event ensures the image is resized to fit the Image control, though this part may be adjusted based on specific needs for image handling.

Output:

• The UserForm will display an image viewer with an image control that can show images.
• A button will allow users to load an image, and another button can clear the image.
• The image file path and file name will be shown in a TextBox and Label.

This approach gives you a flexible and dynamic image viewer inside an Excel UserForm, where the user can load and clear images easily.