Hello guys,
I’m starting a new project and in it I have a listbox that I add a small icon next to each line as in the example below using the code,
But instead of the icon I would like to put the thumbnail of the image that is in line with the list consists of pictures ( .jpg or .png ), someone could help me with this?
Thanks, all help is welcome.
You need to read the meta data of the image, this is best done via either QuickLook or CGImageSource. You can of course load the image via pure Xojo and generate a thumbnail, but this is far too slow.
Check out the MacOsLib or MBS for either of the above.
Lastly, I wouldn’t recommend using rowPicture as it’s not retina compatible. Instead use the cellTag property to store the retina ready picture and then in the celltextPaint event check to see if the cell has a tag and if so then check to see if it’s a picture, before you try to draw it at the correct size.
Hello Sam, how I do it, could you give me a general idea ?
Sure, you simple load up the picture “Dim p as picture = picture.open( )”
Then create a resized version “Dim thumbnail as new picture( 64, 64 )”
and draw the loaded picture into the thumbnail “thumbnail.graphics.drawpicture p, 0, 0, thumbnail.width, thumbnail.height, 0, 0, p.width, p.height”.
I’ll leave the proportional scaling to you 
However, like I say, this is very slow as it requires loading the full image into memory first. Whereas using the functions I mentioned in the first response as much quicker.
Tanks Sam,
I will start my testing there, even if it is slow is a starting point, since I’m starting this project and have time to draw it.
Reading the images from disc to generate a thumbnail is slow, but there will be a big hit if you do it in the CelltextPaint every time.
Sam’s idea is a good place to start.
[i]
Instead use the cellTag property to store the retina ready picture and then in the celltextPaint event check to see if the cell has a tag and if so then check to see if it’s a picture, before you try to draw it at the correct size.<<[/i]
I have used a slightly different method on some of my projects.
The list can be quickly filled with a list of files. Either you show the file name, or you can have it in an invisible column.
In the cellTextPaint event check the cell tag property: if it contains the thumbnail picture, display it, otherwise read the image, resize it, put it in the row tag property and then display it.
On first display, this means you get a hit for all visible rows.
Fire off a thread which checks the rowtag property of the whole listbox, and populate the row tag property with a thumbnail where it is missing.
That way, when the user scrolls the list to a new area, the thread may already have filled the row tag property and the list can scroll with little delay.
If the list of files is fixed / known in advance, you could use a thread to populate an array of thumbnail pictures at any time.
When your listbox is displayed, it can take its images from the array, which should already be full by that time.
Hi Jeff Tullin The idea seems pretty smart, do not know if I have all the necessary knowledge to implement it.
Anyway thank you very much for help.
Paulo:
do you want to display a finite number of different thumbnails: say one, the same for all jpg, another for all png, and so on OR create a thumbnail of the actual image file ?
if the one: create as many thumbnails you need, drop them in the project and call them using the example you have:
Listbox1.RowPicture(Listbox1.lastindex) = iconJPG
//
/
Listbox1.RowPicture(Listbox1.lastindex) = iconPNG
// and so on
Hello Emile Schwarz,
I need to create an REAL thumbnail of each image loaded in the listbox !
You can learn from here: https://drive.google.com/file/d/0B6w6JZen_vW2R28xNXhZcnc1OEU/edit?usp=sharing
Just a sample with 3 preloaded lines loading pictures/thumbnails at listbox.open()
For learning purposes only.
Good luck. 
Rick Araujo Thanks for the demo project that sent me helped a lot.
I’m grateful for your kindness.
I do not read the solution people gaves you, but in this case, you have to create a Method who loads the image, resize it to Thumbnails and display that for all images you fall into / needs a Thumbnail.
Watch Picture / Graphics (DrawPicture); how to resize a Picture in the documentation. Do not forget to resize keeping the width / Height ratio.
Tks Emile !
Be aware that not all images you may wish to use will have an embedded thumbnail… or they may not be the exact size you need.
Yes Dave, Tanks.
I saw so few files with Thumbnails on OS X that I forgot it is possible to find some ;-:).