Отображать изображения в столбце DataGridView, используя объекты JSON в качестве источника данных

Question

Как мне отформатировать столбец DataGridView, чтобы отображать изображение из URL-адреса, а не сам URL-адрес в виде строки.

Пример того, как выглядит DataGridView:

В настоящее время у меня есть следующий код:

 DataGridView1.DataSource = Tesco.uk.ghs.products.results  

Здесь я связываю JSON, который мне нужен datagridview1.
Это работает (хотя, как вы можете видеть на скриншоте, кажется, что по какой-то причине пропущен столбец Description).

Я также пытался использовать класс DataGridViewImageColumn, однако я не могу заставить его фактически "преобразовать" столбец в столбец изображения.

JSON:

Public Class Totals
   Public Property all As Integer
   Public Property [new] As Integer
   Public Property offer As Integer
End Class

Public Class Result
   Public Property image As String
   Public Property superDepartment As String
   Public Property tpnb As Integer
   Public Property ContentsMeasureType As String
   Public Property name As String
   Public Property UnitOfSale As Integer
   Public Property description As String()
   Public Property AverageSellingUnitWeight As Double
   Public Property UnitQuantity As String
   Public Property id As Integer
   Public Property ContentsQuantity As Double
   Public Property department As String
   Public Property price As Double
   Public Property unitprice As Double
End Class

Public Class Products
   Public Property input_query As String
   Public Property output_query As String
   Public Property queryPhase As String
   Public Property totals As Totals
   Public Property config As String
   Public Property results As Result()
   Public Property suggestions As Object()
End Class

Public Class Ghs
   Public Property products As Products
End Class

Public Class Uk
   Public Property ghs As Ghs
End Class

Public Class JSON
   Public Property uk As Uk
End Class

Answer 1

Примечание: у этого вопроса есть продолжение здесь:
Копировать выбранные строки флажков из DGV в DGV2, включая столбец изображения

---

Вам необходимо загрузить изображения после десериализации JSON в объект вашего класса. Вы можете добавить новое открытое свойство Type Bitmap во внутренний класс Result, который будет использоваться для представления изображения, на которое ссылается URI, найденный в JSON.

Чтобы aquire Изображения, вам нужен метод, который берет URI ресурса и загружает его с удаленного компьютера. Я добавил открытый метод в класс Products, который ссылается на все объекты, содержащие ссылку на URI:
после успешного анализа JSON свойство Results будет ссылаться на все классы Result. Каждый класс Result будет ссылаться на битовый URI в свойстве ProductImage.

Используя класс WebClient, мы можем использовать эти ссылки для загрузки изображений и добавления их в свойство типа Bitmap.
Нам также нужно указать парсеру JSON игнорировать это свойство, поскольку оно не является частью объекта JSON.
Это можно сделать, добавив атрибут <JsonIgnore> к свойству.

Переименуйте RootObject (в вашем определении класса JSON) в Root:

Кроме того, все отображаемые здесь классы добавляются в родительский класс. с именем ProductsQuery, используется в качестве контейнера для всех объектов класса.

Public Class Root
   Public Property uk As Uk
End Class

Десериализовать JSON с помощью JsonConvert.DeserializeObject:

Dim JSONObject As String = File.ReadAllText("[Source Txt]")
Dim JsonPost As ProductsQuery.Root = JsonConvert.DeserializeObject(Of ProductsQuery.Root)(JSONObject)

Используйте недавно добавленный публичный метод для загрузки изображений:

JsonPost.uk.ghs.Products.LoadImages()

Подготовьте DataGridViewImageColumn , который покажет изображения:
Редактировать : также вставить DataGridViewCheckBoxColumn.

Dim DGVCheckBoxCol As DataGridViewCheckBoxColumn = New DataGridViewCheckBoxColumn(False) With {
    .AutoSizeMode = DataGridViewAutoSizeColumnMode.DisplayedCellsExceptHeader,
    .DisplayIndex = 0,
    .HeaderText = "",
    .Name = "Select"
}

Dim DGVImageCol As DataGridViewImageColumn = New DataGridViewImageColumn(False) With {
    .AutoSizeMode = DataGridViewAutoSizeColumnMode.DisplayedCellsExceptHeader,
    .DataPropertyName = "Image",
    .DisplayIndex = 1,
    .FillWeight = 1,
    .HeaderText = "Image",
    .ImageLayout = DataGridViewImageCellLayout.Normal,
    .Name = "Image",
    .ValuesAreIcons = False
}

Затем установите DataGridView DataSource и скройте столбец, содержащий URI-код изображения, который здесь не очень полезен. Кроме того, вызовите метод AutoResizeRows , чтобы установить размер строк для лучшего представления изображения:

DataGridView1.DataSource = Nothing 
DataGridView1.Columns.Clear()

DataGridView1.Columns.Insert(0, DGVCheckBoxCol)
DataGridView1.Columns.Insert(1, DGVImageCol)
DataGridView1.DataSource = JsonPost.uk.ghs.Products.Results
DataGridView1.Columns(2).Visible = False
DataGridView1.AutoResizeRows()

---

Результат :

Модифицированные классы :

Примечание :
Свойство description представляет собой массив строк, которые DGV отказывается показывать как есть. Я назвал его RawDescription и добавил новое свойство (Description) типа String - с атрибутом <JsonIgnore> - в Result класс, который будет содержать сплющенную строку.

Imports System.IO
Imports System.Net
Imports Newtonsoft.Json

Public Class ProductsQuery

    Public Class Root
        Public Property uk As Uk
    End Class

    Public Class Uk
        Public Property ghs As Ghs
    End Class

    Public Class Ghs
        Public Property products As Products
    End Class

    Public Class Products
        Public Property input_query As String
        Public Property output_query As String
        Public Property filters As Filters
        Public Property queryPhase As String
        Public Property totals As Totals
        Public Property config As String

        <JsonProperty("results")>
        Public Property Results As Result()
        Public Property suggestions As Object()

        Public Sub LoadImages()
            Using client As WebClient = New WebClient()
                For Each result As Result In Results
                    Dim bitmapBytes = client.DownloadData(result.ProductImage)
                    Using ms As MemoryStream = New MemoryStream(bitmapBytes)
                        ms.Position = 0
                        result.Image = CType(Image.FromStream(ms).Clone(), Bitmap)
                    End Using
                    result.ProductDescription = result.RawDescription(0)
                Next
            End Using
        End Sub
    End Class

    Public Class Filters
    End Class

    Public Class Totals
        Public Property all As Integer
        <JsonProperty("new")>
        Public Property NewProducts As Integer
        Public Property offer As Integer
    End Class

    Public Class Result

        <JsonIgnore>
        Public Property Image As Bitmap

        <JsonProperty("image")>
        Public Property ProductImage As String

        <JsonProperty("superDepartment")>
        Public Property SuperDepartment As String
        Public Property tpnb As Integer
        Public Property ContentsMeasureType As String

        <JsonProperty("name")>
        Public Property Name As String
        Public Property UnitOfSale As Integer

        <JsonIgnore>
        Public Property Description As String

        <JsonProperty("description")>
        Public Property RawDescription As String()
        Public Property AverageSellingUnitWeight As Double
        Public Property UnitQuantity As String
        Public Property id As Integer
        Public Property ContentsQuantity As Double

        <JsonProperty("department")>
        Public Property Department As String

        <JsonProperty("price")>
        Public Property Price As Double

        <JsonProperty("unitprice")>
        Public Property Unitprice As Double
    End Class
End Class

Answer 2

Вы должны сначала преобразовать столбец, где вы хотите изображения как столбец изображения.

Вы можете сделать это в свойствах этого представления данных ИЛИ программно, когда вы создаете представление данных и добавляете в него столбцы:

 Dim imgColumn as new DataGridViewImageColumn
 DataGridView1.Columns.Add(imgColumn)

После добавления столбца / изменения типа столбца вы можете затем преобразовать каждую ячейку в этом столбце в растровое изображение:

Это может выглядеть примерно так (замените colindex на индексный номер вашего столбца изображения, например, на imgColumn, который мы объявили выше):

 Dim currRow as Int = 0
 For Each row As DataGridViewRow In DataGridView1.Rows

            Dim img = new Bitmap(DataGridView1.Item(colindex, currRow).value);

            DataGridView1.Item(colindex, currRow).value = img

            currRow = currRow + 1


  Next

Ссылка здесь