How display icons with labels into a Listbox ?


What is the simplest solution for display icons with labels in a Listbox component (as PrefPanes) ?
Where store my icons ?
Do i draw the icons into the Canvas ? or is it simplest ?


Do you mean like the app icons here:

These are calculated for each app and then drawn in column 1 in the CellTextPaint event:

g.DrawPicture(app_icon, 0, 0, me.RowHeight, me.RowHeight)

Thank you but not exactly , as macOS System preferences dialogue with icons 32x32 pixels and labels.
When i click into an icon, i go to the PagePanel.

PagePanel1.value = me.listindex


If you’re talking about System Preferences, that is not a listbox.

It could be done with a listbox, though.

Then, with which Xojo components I can do this ?

I’m not sure it’d be worth the effort. You’d have to take over so much drawing at that point I would just use a canvas.

A canvas control and draw it yourself.

I hope you don’t have as many items as the System Preferences :slight_smile: A listbox really is easier for the user.

Denis, how many items do you have in your Prefs ?

You make it sound so terrible.

Other people’s code is terrible. :wink:

I just think that in this instance for the amount of work to get the desired effect, it would be easier and more flexible to start from scratch with Canvas.

Sorry, here I would agree with Michel… Why?
Tim. you say use a canvas, which is a very viable alternative… but if you think about it … what is a Listbox?
It is an “array” of canvas… in that each cell (row and/or column) has a “paint” event… meaning the code that you would have to draw each icon/title combo would be almost the same in both cases, but the listbox adds the ability to manage the scrolling (if necessary) as well as track the mouse clicks for you, where with a normal canvas you would have to write all that yourself.

plus a Listbox based alternative would be scalable just by adding a new row/cell, where with a canvas it “might” be a bit more involved depending on how you designed it in the first place.

So my opinion, in this case a Listbox reduces the amount of effort required by a significant amount.
A canvas could be used, as could a container with a boatload of buttons,

Because when you start with an existing control when you should draw it yourself, you get something that looks like this:

I guess having complete control over the code is just a thing I like.

[quote=315518:@Tim Parnell]Because when you start with an existing control when you should draw it yourself, you get something that looks like this:

I guess having complete control over the code is just a thing I like.[/quote]
Looks great, works great too… Thanks for pointing out how leveraging existing controls can reduce the work to create a custom control… :slight_smile:

Oh and if you posted that to be an insult…

  • you failed
  • and please note in my above post … MY OPINION… .which last I looked was a right that TRUMP had not made illegal

a pagepanel in the back, then an icon for each pref as a canvas with a backdrop picture, and a label below the canvas
each clic on the canvas gets to the right pagepanel page with the details.
not an evolutive work, but the easiest to implement.
if you want to make the thing evolutive, then some containercontrols displayed inside a custom window.

Well, we are discussing angels gender, when the OP needs actual assistance.

Denis, voil un example :

Based on Jean-Yves idea in

I used separate canvases in a control set, because it is easier to do for a beginner.

I would use an array of Canvases.

The System Preferences window is not resizeable.

A Listbox using only xyzPaint Events may do the trick.

Denis original question talks about a Listbox, so using Listbox CellBackgroundPaint to draw the Icon and CellTextPaint to draw the Label… will do the drawing :wink:

Then MouseDown for the click, or CellClick or… hides the Listbox and display whatever user interface you want, …

It’s up to you Denis.

Xojo includes a sample project that does something similar to this using a ListBox:


And Paul has an excellent video on getting this working:

Thank you all for your participation !

Merci Michel pour le code source, je vais voir a de prs.