VB.NET DataGridView - Images In A Grid

July 8, 2017 Oclemy VB.NET DataGridView, VB.NET Image 1 minute, 56 seconds

Here we see how to display images in a grid with three columns.In fact its the datagridview we are playing with here.We use the datagridviewimagecolumn to show our images.When an image is clicked,we display its index in a message box.

Tools

These are the tools we used:

  • Platform : .NET
  • Language : VB.NET
  • IDE : Visual Studio 2013

Source Code

Lets have a look at the project's source code.

Form1.vb

Public Class Form1

    'POPULATE DGVIEW
    Private Sub Populate()
        'clear dgview
        DataGridView1.Rows.Clear()

        'CONSTRUCT IMG COLUMN
        Dim imgCol As DataGridViewImageColumn = New DataGridViewImageColumn()
        imgCol.HeaderText = "Photo"
        imgCol.Name = "Col 1"
        DataGridView1.Columns.Add(imgCol)

        'CONSTRUCT 2ND IMG COLUMN
        Dim imgCol1 As DataGridViewImageColumn = New DataGridViewImageColumn()
        imgCol1.HeaderText = "Photo"
        imgCol1.Name = "Col 2"
        DataGridView1.Columns.Add(imgCol1)

        ' CONSTRUCT 3RD IMG COLUMN
        Dim imgCol2 As DataGridViewImageColumn = New DataGridViewImageColumn()
        imgCol2.HeaderText = "Photo"
        imgCol2.Name = "Col 3"
        DataGridView1.Columns.Add(imgCol2)

        'CONSTRUCT ROWS
        'FIRST ROW
        Dim img As Image = Image.FromFile("C:/Imgs/herera.jpg")
        Dim img1 As Image = Image.FromFile("C:/Imgs/mata.jpg")
        Dim img2 As Image = Image.FromFile("C:/Imgs/oscar.jpg")
        Dim row As Object() = New Object() {img, img1, img2}
        DataGridView1.Rows.Add(row)

        'SECOND ROW
        img = Image.FromFile("C:/Imgs/vanpersie.jpg")
        img1 = Image.FromFile("C:/Imgs/rooney.jpg")
        img2 = Image.FromFile("C:/Imgs/sanchez.jpg")
        row = New Object() {img, img1, img2}
        DataGridView1.Rows.Add(row)

        'THIRD row
        img = Image.FromFile("C:/Imgs/hazard.jpg")
        img1 = Image.FromFile("C:/Imgs/thibaut.jpg")
        img2 = Image.FromFile("C:/Imgs/costa.jpg")
        row = New Object() {img, img1, img2}
        DataGridView1.Rows.Add(row)

        'FOURTH ROW
        img = Image.FromFile("C:/Imgs/ramsey.jpg")
        img1 = Image.FromFile("C:/Imgs/ozil.jpg")
        img2 = Image.FromFile("C:/Imgs/arteta.jpg")
        row = New Object() {img, img1, img2}
        DataGridView1.Rows.Add(row)

    End Sub

    Private Sub addBtn_Click(sender As Object, e As EventArgs) Handles addBtn.Click
        Populate()
    End Sub

    'CLEAR DATAGRIDVIEW
    Private Sub clearBtn_Click(sender As Object, e As EventArgs) Handles clearBtn.Click
        DataGridView1.Rows.Clear()
    End Sub

    'WHEN AN IMAGE IS CLICKED
    Private Sub DataGridView1_CellContentClick(sender As Object, e As DataGridViewCellEventArgs) Handles DataGridView1.CellContentClick
        MessageBox.Show("You Clicked Image At Col: " + e.ColumnIndex.ToString() + " Row: " + e.RowIndex.ToString())
    End Sub
End Class

More

YouTube

  • Visit our channel for more examples like these.

Facebook

Oclemy,Cheers.

Comments