Which Control?

I want to create a layout with large icons and text. I select an icon and then read the text to perform a task. Similar to the right hand pane on the below image:

IIRC, on Windows .NET this would be a ListBox control, set to “Large Icons”. Can the equivalent be achieved with Xojo, keeping in mind that if I have to write a custom control then it is a non-starter, although I am happy to use an free/open source add-on.

i found this thread in the forums: How display icons with labels into a Listbox ? - #16 by Emile_Schwarz

It mentions an example app in the IDE, giving this a try…

here is an old realbasic project, that still compiles under last xojo, and that can be a good start for you.


help! help! help!

I have spent hours trying to get my head around this with no joy. I have modified the code from the Xojo built in examples, and it does not work as expected. The below link is the example project I have put together.

In short, I am trying to add 5 rows (icon + text) to a listbox. The rows are added, as shown with the MessageBox that pops up, but they are not drawn on the screen. And I cannot work out why :frowning:

I looked at the project Jean-Yves linked to and it is not as close to what I want to achieve as what the Example project offers. Would someone be able to take a look at my code and spot what the issue is?


when i say “rows are added”, i am referring to the RowCount of the listbox has increased by 5 rows, but visually it is empty.

There is some pretty odd stuff in that icongrid code.
I found that it wont paint if the row count is greater than one, because a property called gridsize is hard coded to always be 1 in the computed property ‘Set’ part.

Try these changes to get you started:

Change the PaintCellBackground code to say this:

Const kIconOffset = 5
Const kTextBorder = 2

// Draw the icons in the available cells

Var icon As Picture
Var text As String

icon = Icons(row)
text = IconText(row)

If row <= me.rowcount  Then
  If Me.RowSelectedAt(row) Then
    // Hide default selection highlight
    g.DrawingColor = &cFFFFFF00
    g.FillRectangle(0, 0, g.Width, g.Height)
  End If
  // Add a selection for just the cell
  If mCurrentRow = row Then //And mCurrentColumn = column Then
    g.DrawingColor = Color.RGB(192, 192, 192)
    g.FillRoundRectangle(0, 0, g.Width, g.Height, 10, 10)
  End If
  if icon <> nil then
    // Draw the icon
    g.DrawPicture(icon, (g.Width - icon.Width) \ 2, (g.Height - icon.Height) \ 2 - kIconOffset)
  end if
  Var sWidth As Integer
  sWidth = g.TextWidth(text)
  g.DrawingColor = &c000000
  g.DrawText(text, (g.Width - sWidth) \ 2, g.Height - kTextBorder - kIconOffset)
End If

Return True

and change the AddDriveIcon method to say this:

Var d as integer = folderitem.DriveCount

For i as Integer = 0 to d-1
  listDrivesGrid.Icons(i) =  USB
  listDrivesGrid.IconText(i) = folderitem.DriveAt(i).Name

Next i

This isn’t a ‘full fix for everything you want to do’, but hopefully it will get you started.

(As with most code examples, my first reaction is ‘I wouldn’t do it like this myself, but…’)

Do not use MessageBox "String Report" for that; use System.DebugLog "String" instead…

this is perfect, thank you SO MUCH!!!