Image Gallery in Vb.net

Introduction

This article demonstrates how we can create a simple image gallery in vb.net. In this article we create a usercontrol for doing it, our control will create thumbnails of the images from the specified directory or folder.

[wpfilebase tag=file id=8]

Image Gallery in vb.net
Figure- 1 (Image Gallery in vb.net)

 

Description

Steps:
1. Start a new windows application from File–>New Project…, in your Visual Studio.
2. Add a usercontrol in your project and give the name AuthorCodeImageGalleryVB.
3. Add a windows form named Form1.
4. Add PictureBox control and give the name PictureBox1, textbox and button control (See the Figure 1).
5. Add another Tooltip control ( by double click on ToolTip in toolbox or you can add by drag and drop)
6. use the following code in your usercontrol class.

Code:

Public Class AuthorCodeImageGalleryVB
    Dim CtrlWidth As Integer
    Dim CtrlHeight As Integer
    Dim PicWidth As Integer
    Dim PicHeight As Integer
    Dim XLocation As Integer
    Dim YLocation As Integer
 
Private Sub AuthorCodeImageGalleryVB_Resize(ByVal sender As System.Object, ByVal e As System.EventArgs) Handles MyBase.Resize
        CtrlHeight = Me.Height
        CtrlWidth = Me.Width
    End Sub
    Private _Directory_Path As String
    Public Property Directorypath() As String
        Get
            Return _Directory_Path
        End Get
        Set(ByVal value As String)
 
            _Directory_Path = value
            XLocation = 25
            YLocation = 25
            PicWidth = 117
            PicHeight = 109
            CreateGallery()
        End Set
    End Property
    Dim i As Integer = 0
    Private Sub DrawPictureBox(ByVal _filename As String, ByVal _displayname As String)
        Dim Pic1 As New PictureBox
        Pic1.Location = New System.Drawing.Point(XLocation, YLocation)
        XLocation = XLocation + PicWidth + 20
        If XLocation + PicWidth >= CtrlWidth Then
            XLocation = 25
            YLocation = YLocation + PicHeight + 20
        End If
        Pic1.Name = "PictureBox" & i
        i += 1
        Pic1.Size = New System.Drawing.Size(PicWidth, PicHeight)
        Pic1.TabIndex = 0
        Pic1.TabStop = False
        Pic1.BorderStyle = BorderStyle.Fixed3D
        Me.ToolTip1.SetToolTip(Pic1, _displayname)
        AddHandler Pic1.MouseEnter, AddressOf Pic1_MouseEnter
        AddHandler Pic1.MouseLeave, AddressOf Pic1_MouseLeave
        Me.Controls.Add(Pic1)
        Pic1.Image = Image.FromFile(_filename)
        Pic1.SizeMode = System.Windows.Forms.PictureBoxSizeMode.StretchImage
    End Sub
    Private Sub CreateGallery()
        i = 0
        RemoveControls()
        If Directorypath IsNot Nothing Then
            Dim di As New IO.DirectoryInfo(Directorypath)
            Dim diar1 As IO.FileInfo() = di.GetFiles("*.jpg").Concat(di.GetFiles("*.bmp")).Concat(di.GetFiles("*.png")).Concat(di.GetFiles("*.gif")).ToArray
            Dim dra As IO.FileInfo
            For Each dra In diar1
                DrawPictureBox(dra.FullName, dra.Name)
            Next
        End If
    End Sub
 
    Private Sub Pic1_MouseEnter(ByVal sender As System.Object, ByVal e As System.EventArgs)
        Dim Pic As PictureBox
        Pic = sender
        Pic.BorderStyle = BorderStyle.FixedSingle
    End Sub
    Private Sub Pic1_MouseLeave(ByVal sender As System.Object, ByVal e As System.EventArgs)
        Dim Pic As PictureBox
        Pic = sender
        Pic.BorderStyle = BorderStyle.Fixed3D
    End Sub
    Private Sub RemoveControls()
Again:  For Each ctrl As Control In Me.Controls
            If TypeOf (ctrl) Is PictureBox Then
                Me.Controls.Remove(ctrl)
            End If
        Next
        If Me.Controls.Count > 0 Then
            GoTo Again
        End If
    End Sub
End Class

 

For making this usercontrol we use the picture box control, In above control we create dynamic Picturebox controls for each image. We find all image type files with .bmp, .jpg, .gif and .png in the given directory with the help of GetFiles method of IO.DirectoryInfo class

How to use this control
1. Build your project.
2. After building your project, you can see the user control in your project’s toolbox.
3. Just drag and drop in your form.
4. Set its property Directorypath.

Suppose you place this control on the form named Form1, then you can set its property Directorypath with the help of folderbrowserDialoog( i am using textbox and button control to set the value of the Directorypath property with the help of FolderBrowserDialog control.You can use another method for setting the Directorypath property value):

Imports System.IO
 
Public Class Form1
    Private Sub Button1_Click(ByVal sender As System.Object, ByVal e As System.EventArgs) Handles Button1.Click
        Dim dlg As New FolderBrowserDialog
        If dlg.ShowDialog = DialogResult.OK Then
            AuthorCodeImageGalleryVB1.Directorypath = dlg.SelectedPath
            TextBox1.Text = dlg.SelectedPath
        End If
    End Sub
End Class

34 thoughts on “Image Gallery in Vb.net”

  1. how to preview image from Image Gallery to picturesbox1?
    event click image.

  2. is there a way I can double click on an image and open that image in a separate picturebox ?

    1. You can use the Double click event of the Picture Box. You need to create a window form object and add new picture box object into it and set the image. I have written the following code on notepad(not tested) You can get some idea from here:

      Private Sub Pic1_DoubleClick(ByVal sender As System.Object, ByVal e As System.EventArgs)
      Dim frm as new Windows.Forms.Form
      Dim Pic As PictureBox
      Pic = sender
      frm.Width = Pic.Image.Width
      frm.Height = Pic.Image.Height
      Dim copyPic As new PictureBox
      copyPic.Width = Pic.Image.Width
      copyPicrm.Height = Pic.Image.Height
      copyPic.Image= Pic.Image
      frm.Controls.add(copyPic)
      Pic.BorderStyle = BorderStyle.Fixed3D
      frm.ShowDialog()
      End Sub

      Thanks

  3. I want to extend this application to next level where the pictures can be selected via checkbox with each thumbnail. And add three different buttons for three different actions with the selected images. A slideshow, copy the selected pictures to a new location, generate a CSV file with the file names. I am using VB 2008 express edition. I am a newbie and need some guideline on the coding mention above. Please Help!

        1. When I change the window size gallery thumbnails are not rearranging themselves according to the window size. I try to anchor Top,Bottom,Left,Right and reload the AuthorCodeIamgeGalleryVB user control. It worked but when I choose a folder with many images it get busy. Is there any solution of it? My code is as follows:

          Private Sub Form1_SizeChanged(ByVal sender As System.Object, ByVal e As System.EventArgs) Handles MyBase.SizeChanged

          If TextBox1.Text “” Then

          AuthorCodeImageGalleryVB1.Directorypath = TextBox1.Text

          End If

          End Sub

  4. When I change the window size gallery thumbnails are not rearranging themselves according to the window size. I try to anchor Top,Bottom,Left,Right and reload the AuthorCodeIamgeGalleryVB user control. It worked but when I choose a folder with many images it get busy. Is there any solution of it? My code is as follows:

    Private Sub Form1_SizeChanged(ByVal sender As System.Object, ByVal e As System.EventArgs) Handles MyBase.SizeChanged
    If TextBox1.Text “” Then
    AuthorCodeImageGalleryVB1.Directorypath = TextBox1.Text
    End If
    End Sub

  5. Let’s say I wanted to use this gallery as a means to start a video. Example – a picture of a batman movie poster. Click on that picture and it opens batman.mkv

    Would anyone be kind enough to show us how to do that?

    Thank you in advance.

    Matt

Comments are closed.