locked
[HELP] load images from folder to DataGridView RRS feed

  • Question

  • hi guys..

    i have 60 images in folder ( the images name is 1.jpg to 60.jpg) i need make loop and display this images in DataGridView 

    Sunday, June 21, 2020 1:18 PM

Answers

  • You need to have each image the same size then work with RowTemplate.Height and the column width for the image e.g.

    Imports System.IO
    
    Public Class Form2
        Public Function ImageToByteArray(pImage As Image) As Byte()
            Dim ms As New MemoryStream()
            pImage.Save(ms, Imaging.ImageFormat.Png)
            Return ms.ToArray()
        End Function
    
        Private Sub Button1_Click(sender As Object, e As EventArgs) Handles Button1.Click
            DataGridView1.DataSource = Nothing
    
            Dim files = Directory.GetFiles(
                AppDomain.CurrentDomain.BaseDirectory,
                "*.png")
    
            Dim dt As New DataTable()
            dt.Columns.Add("ImageColumn", GetType(Byte()))
            dt.Columns.Add("NameColumn", GetType(String))
    
            For Each file As String In files
                Dim img As Image = Image.FromFile(file)
    
                dt.Rows.Add(New Object() {ImageToByteArray(img), Path.GetFileName(file)})
    
                img.Dispose()
            Next
    
            DataGridView1.RowTemplate.Height = 250
    
            DataGridView1.DataSource = dt
            DataGridView1.Columns("ImageColumn").Width = 250
    
            CType(DataGridView1.Columns("ImageColumn"),
                  DataGridViewImageColumn).ImageLayout = DataGridViewImageCellLayout.Stretch
    
        End Sub
    End Class
    See https://docs.microsoft.com/en-us/dotnet/api/system.windows.forms.datagridviewimagecelllayout?view=netcore-3.1


    Please remember to mark the replies as answers if they help and unmarked them if they provide no help, this will help others who are looking for solutions to the same or similar problem. Contact via my Twitter (Karen Payne) or Facebook (Karen Payne) via my MSDN profile but will not answer coding question on either.

    NuGet BaseConnectionLibrary for database connections.

    StackOverFlow
    profile for Karen Payne on Stack Exchange


    Sunday, June 21, 2020 2:09 PM

All replies

  • Here is a basic pattern. The method ImageToByteArray could be in a code module for reuse.

    Imports System.IO
    
    Public Class Form2
        Public Function ImageToByteArray(pImage As Image) As Byte()
            Dim ms As New MemoryStream()
            pImage.Save(ms, Imaging.ImageFormat.Png)
            Return ms.ToArray()
        End Function
    
        Private Sub Button1_Click(sender As Object, e As EventArgs) Handles Button1.Click
            DataGridView1.DataSource = Nothing
    
            Dim files = Directory.GetFiles(
                AppDomain.CurrentDomain.BaseDirectory,
                "*.png")
    
            Dim dt As New DataTable()
            dt.Columns.Add("ImageColumn", GetType(Byte()))
    
            For Each file As String In files
                Dim img As Image = Image.FromFile(file)
                dt.Rows.Add(New Object() {ImageToByteArray(img)})
                img.Dispose()
            Next
    
            DataGridView1.DataSource = dt
    
        End Sub
    End Class


    Please remember to mark the replies as answers if they help and unmarked them if they provide no help, this will help others who are looking for solutions to the same or similar problem. Contact via my Twitter (Karen Payne) or Facebook (Karen Payne) via my MSDN profile but will not answer coding question on either.

    NuGet BaseConnectionLibrary for database connections.

    StackOverFlow
    profile for Karen Payne on Stack Exchange

    Sunday, June 21, 2020 1:33 PM
  • bro how can i resize image to small size in datagridview ?

    i need make like this image

    Sunday, June 21, 2020 1:45 PM
  • Hi

    Wish you would provide all the details in the original question instead of waiting until someone wastes their time answering only to find you move the goal posts.

    Here is my (hurridly amended) code that may help.

    ' Form1 with BLANK DataGridView1
    Option Strict On
    Option Explicit On
    Public Class Form1
      ' set image folder path
      Dim path As String = IO.Path.Combine(My.Computer.FileSystem.SpecialDirectories.Desktop, "TestImages")
    
      ' set image size required
      Dim ImageSize As New Size(128, 128)
    
      Dim images As New List(Of Bitmap)
    
      Private Sub Form1_Load(sender As Object, e As EventArgs) Handles MyBase.Load
        With DataGridView1
          .Columns.Add("Dummy1", "Dummy1")
          .Columns.Add("Dummy2", "Dummy2")
          .Columns.Add("Dummy3", "Dummy3")
          .Columns.Add(New DataGridViewImageColumn With {.Name = "Images", .HeaderText = "Images"})
          .RowHeadersVisible = False
          .AutoSizeColumnsMode = DataGridViewAutoSizeColumnsMode.DisplayedCells
          .AutoSizeRowsMode = DataGridViewAutoSizeRowsMode.DisplayedCells
          .SelectionMode = DataGridViewSelectionMode.CellSelect
          .Dock = DockStyle.Fill
        End With
        Dim im() As String = IO.Directory.GetFiles(path, "*.jpg")
        For Each s As String In im
          images.Add(New Bitmap(Image.FromFile(s)))
          DataGridView1.Rows.Add("Dummy1", "Dummy2", "Dummy3", New Bitmap(Image.FromFile(s), ImageSize))
        Next
      End Sub
    End Class


    Regards Les, Livingston, Scotland

    Sunday, June 21, 2020 2:09 PM
  • You need to have each image the same size then work with RowTemplate.Height and the column width for the image e.g.

    Imports System.IO
    
    Public Class Form2
        Public Function ImageToByteArray(pImage As Image) As Byte()
            Dim ms As New MemoryStream()
            pImage.Save(ms, Imaging.ImageFormat.Png)
            Return ms.ToArray()
        End Function
    
        Private Sub Button1_Click(sender As Object, e As EventArgs) Handles Button1.Click
            DataGridView1.DataSource = Nothing
    
            Dim files = Directory.GetFiles(
                AppDomain.CurrentDomain.BaseDirectory,
                "*.png")
    
            Dim dt As New DataTable()
            dt.Columns.Add("ImageColumn", GetType(Byte()))
            dt.Columns.Add("NameColumn", GetType(String))
    
            For Each file As String In files
                Dim img As Image = Image.FromFile(file)
    
                dt.Rows.Add(New Object() {ImageToByteArray(img), Path.GetFileName(file)})
    
                img.Dispose()
            Next
    
            DataGridView1.RowTemplate.Height = 250
    
            DataGridView1.DataSource = dt
            DataGridView1.Columns("ImageColumn").Width = 250
    
            CType(DataGridView1.Columns("ImageColumn"),
                  DataGridViewImageColumn).ImageLayout = DataGridViewImageCellLayout.Stretch
    
        End Sub
    End Class
    See https://docs.microsoft.com/en-us/dotnet/api/system.windows.forms.datagridviewimagecelllayout?view=netcore-3.1


    Please remember to mark the replies as answers if they help and unmarked them if they provide no help, this will help others who are looking for solutions to the same or similar problem. Contact via my Twitter (Karen Payne) or Facebook (Karen Payne) via my MSDN profile but will not answer coding question on either.

    NuGet BaseConnectionLibrary for database connections.

    StackOverFlow
    profile for Karen Payne on Stack Exchange


    Sunday, June 21, 2020 2:09 PM
  • Kareninstructor

    thank you bro your code worked 100%

    Sunday, June 21, 2020 2:23 PM
  • it's work but the code of

    Kareninstructor

    Summary more

    and your code have problem last row is show me error ( Red X )

    and the row before last show me wrong size

    Sunday, June 21, 2020 2:25 PM
  • it's work but the code of

    Kareninstructor

    Summary more

    and your code have problem last row is show me error ( Red X )

    and the row before last show me wrong size

    I assume you are referring to my offering.

    I must apologize profusely that I didn't provide a complete copy/paste solution. I made the incorrect assumption that you, as the only one who has the original code, would be able to handle the inclusion/exclusion of the 'NewRow' of a DataGridView.  In any case, you managed to get a suitable answer from Karen so you are good to go about copy.pasting to your hearts content. You will of course include a comment in your code that attributes the section to Karen (and probably many other sections likewise)



    Regards Les, Livingston, Scotland

    Sunday, June 21, 2020 2:43 PM
  • Imports System.IO
    ''' <summary>
    ''' In this case DataGridView columns are created
    ''' in the designer and DataPropertyName is set there too
    ''' </summary>
    Public Class Form2
        Public Function ImageToByteArray(pImage As Image) As Byte()
            Dim ms As New MemoryStream()
            pImage.Save(ms, Imaging.ImageFormat.Png)
            Return ms.ToArray()
        End Function
        Private Sub Form2_Load(sender As Object, e As EventArgs) Handles MyBase.Load
            Dim blankImage As New Bitmap(125, 125)
    
            newRowImage = blankImage
    
            DataGridView1.AutoGenerateColumns = False
    
            Dim files = Directory.GetFiles(
                AppDomain.CurrentDomain.BaseDirectory,
                "*.png")
    
            Dim dt As New DataTable()
            dt.Columns.Add("ImageColumn", GetType(Byte()))
            dt.Columns.Add("NameColumn", GetType(String))
    
            For Each file As String In files
                Dim img As Image = Image.FromFile(file)
    
                dt.Rows.Add(New Object() {ImageToByteArray(img), Path.GetFileName(file)})
    
                img.Dispose()
            Next
    
            DataGridView1.RowTemplate.Height = 125
    
    
            DataGridView1.DataSource = dt
            DataGridView1.Columns("ImageColumn").Width = 125
    
            CType(DataGridView1.Columns("ImageColumn"), DataGridViewImageColumn).ImageLayout = DataGridViewImageCellLayout.Normal
    
        End Sub
        Private newRowImage As Bitmap
    
        Private Sub DataGridView1_CellFormatting(sender As Object, e As DataGridViewCellFormattingEventArgs) Handles DataGridView1.CellFormatting
    
            If DataGridView1.Rows(e.RowIndex).IsNewRow AndAlso e.ColumnIndex = 0 Then
                e.Value = newRowImage
            End If
    
        End Sub
    End Class


    Please remember to mark the replies as answers if they help and unmarked them if they provide no help, this will help others who are looking for solutions to the same or similar problem. Contact via my Twitter (Karen Payne) or Facebook (Karen Payne) via my MSDN profile but will not answer coding question on either.

    NuGet BaseConnectionLibrary for database connections.

    StackOverFlow
    profile for Karen Payne on Stack Exchange

    Sunday, June 21, 2020 3:10 PM