Devexpress Xtragrid TileView - devexpress

Question

I'm using Devexpress Xtragrid TileView module.
Basically I want my code works like this :
user input member ID on the upper left textbox and press load.
If they exists, then a Tile will be appeared.
A tile should contain : Name, Status, member ID and a photo.
If user press load again (either same ID or another ID) a Tile will be added also, and so on. Unless they press Clear & Load, It should be only 1 latest tile left.
So, I'm able to produce up to Step 3.
But I couldn't be able to load the picture.
The picture itself, It's not a byte array. It's a Image path.
e.q : D:/test/1.jpg
So, how do I load the picture?
Protected Overridable Sub InitData()
Try
Dim homesTable = ds.Tables(0)
homesTable.Columns.Add("ImageCol")
For Each row_Renamed As DataRow In homesTable.Rows
Dim img As Image = Image.FromFile(row_Renamed("memberPhoto")) 'I tried this, but didn't work
row_Renamed("ImageCol") = img
Next row_Renamed
GridControl1.DataSource = homesTable
Catch
End Try
End Sub
Private Sub setupTile()
'For i = 0 To j - 1
Try
TileView1.BeginUpdate()
'TileView1.DataSource = ds.Tables(0)
TileView1.OptionsTiles.RowCount = 3
TileView1.OptionsTiles.Padding = New Padding(20)
TileView1.OptionsTiles.ItemPadding = New Padding(10)
TileView1.OptionsTiles.IndentBetweenItems = 20
TileView1.OptionsTiles.ItemSize = New Size(320, 170)
TileView1.Appearance.ItemNormal.ForeColor = Color.White
TileView1.Appearance.ItemNormal.BorderColor = Color.Transparent
'Setup tiles template
Dim leftPanel As New TileViewItemElement()
Dim splitLine As New TileViewItemElement()
Dim nameCaption As New TileViewItemElement()
Dim nameValue As New TileViewItemElement()
Dim statusCaption As New TileViewItemElement()
Dim statusValue As New TileViewItemElement()
Dim RGPCaption As New TileViewItemElement()
Dim RGPvalue As New TileViewItemElement()
Dim imageTile As New TileViewItemElement()
TileView1.TileTemplate.Add(leftPanel)
TileView1.TileTemplate.Add(splitLine)
TileView1.TileTemplate.Add(nameCaption)
TileView1.TileTemplate.Add(nameValue)
TileView1.TileTemplate.Add(statusCaption)
TileView1.TileTemplate.Add(statusValue)
TileView1.TileTemplate.Add(RGPCaption)
TileView1.TileTemplate.Add(RGPvalue)
TileView1.TileTemplate.Add(imageTile)
'
'nameValue.Text = ""
'statusValue.Text = ""
'RGPvalue.Text = ""
'imageTile.Image = Nothing
'
leftPanel.StretchVertical = True
leftPanel.Width = 190
leftPanel.TextLocation = New Point(-10, 0)
leftPanel.Appearance.Normal.BackColor = Color.FromArgb(58, 166, 101)
'
splitLine.StretchVertical = True
splitLine.Width = 3
splitLine.TextAlignment = TileItemContentAlignment.Manual
splitLine.TextLocation = New Point(190, 0)
splitLine.Appearance.Normal.BackColor = Color.White
'
nameCaption.Text = "Name"
nameCaption.TextAlignment = TileItemContentAlignment.TopLeft
nameCaption.Appearance.Normal.FontSizeDelta = -1
'
nameValue.Column = TileView1.Columns("preferredName")
nameValue.AnchorElement = nameCaption
nameValue.AnchorIndent = 2
nameValue.MaxWidth = 200
nameValue.Appearance.Normal.FontStyleDelta = FontStyle.Bold
'nameValue.Text = ds.Tables(0).Rows(i)("preferredName").ToString
'
statusCaption.Text = "Status"
statusCaption.AnchorElement = nameValue
statusCaption.AnchorIndent = 14
statusCaption.Appearance.Normal.FontSizeDelta = -1
'
statusValue.Column = TileView1.Columns("memberStatus")
statusValue.AnchorElement = statusCaption
statusValue.AnchorIndent = 2
statusValue.Appearance.Normal.FontStyleDelta = FontStyle.Bold
'statusValue.Text = ds.Tables(0).Rows(i)("memberStatus").ToString
'
RGPCaption.Text = "RGP"
RGPCaption.AnchorElement = nameValue
RGPCaption.AnchorIndent = 65
'RGPCaption.TextLocation
'RGPCaption.Appearance.Normal.FontSizeDelta = -1
RGPCaption.Appearance.Normal.Font = New Font("Segoe UI Semibold", 12.0F, System.Drawing.FontStyle.Regular)
'
RGPvalue.Column = TileView1.Columns("code")
RGPvalue.AnchorElement = RGPCaption
RGPvalue.AnchorIndent = 1
RGPvalue.TextAlignment = TileItemContentAlignment.BottomLeft
RGPvalue.Appearance.Normal.Font = New Font("Segoe UI Semilight", 25.75F, System.Drawing.FontStyle.Regular)
'RGPvalue.Text = ds.Tables(0).Rows(i)("code").ToString
'
imageTile.Column = TileView1.Columns("ImageCol")
imageTile.ImageSize = New Size(120, 170)
imageTile.ImageAlignment = TileItemContentAlignment.MiddleRight
imageTile.ImageScaleMode = TileItemImageScaleMode.Stretch
imageTile.ImageLocation = New Point(12, 0)
Catch ex As Exception
XtraMessageBox.Show(ex.Message)
Finally
TileView1.EndUpdate()
End Try
'Next
End Sub
Private Sub loadBtn_Click(sender As Object, e As EventArgs) Handles loadBtn.Click
initData()
setupTile()
End Sub

Answer 1

Maybe it's too late but in my case only need to read file from disk and assign to a byte() column.
First of all, table column should be byte array so replace:
homesTable.Columns.Add("ImageCol")
for:
homesTable.Columns.Add(New DataColumn("ImageCol", GetType(Byte)))
Then I'd try to replace:
row_Renamed("ImageCol") = img
for:
row_Renamed("ImageCol") = IO.File.ReadAllBytes(row_Renamed("memberPhoto"))
That would load disk file to byte array and shown in tile. I'd check if file exists to avoid exceptions.
That's what I do to load image from disk.
Hope it helps.