VB.NET DataGridView - Images In A Grid


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.

How do You Feel after reading this?

According to scientists, we humans have 8 primary innate emotions: joy, acceptance, fear, surprise, sadness, disgust, anger, and anticipation. Feel free to tell us how you feel about this article using these emotes or via the comment section. This feedback helps us gauge our progress.

Help me Grow.

I set myself some growth ambitions I desire to achieve by this year's end regarding this website and my youtube channel. Am halfway. Help me reach them by:




Recommendations


What do You Think


Previous Post Next Post