What do they call this feature?

General
1

Hello,

I have noticed that a lot of applications use a “grid” of clickable icons, as demonstrated on the right side of the following image:

Does Xojo provide the ability to create a panel of icons like this? Which component is it? Or, is it a plugin?

Thank you!

Byron

2

Yes can accomplish this in Xojo natively a few different ways.

(In its simplest form)

  1. You could use an Image well (icon picture) and then a label underneath this and then use a segmented control or a canvas to create your top navigation menu

  2. You could use 1 canvas (create a canvas subclass) to handle all of this - Its more work, but you have full control of your destiny.

  3. Graffiti Suites (native Xojo Code) to accomplish the top menu and image display

  4. Use Plugins (MBS, Etc.)

HTH,
Mike

3

Thank you, Mike! Yes, that does help… I appreciate it! :slight_smile:

4

Hello,
for the individual items you can use a ContainerControl (let’s name it „CC_Icon") where you put a Canvas and a Label underneath. You can also add methods to the ContainerControl so that it changes the background color when clicked etc.
Create an empty array of type CC_Icon, then create as many CC_Icon you need (dim c as new CC_Icon) and append them to the array.
You can use an other ContainerControl to display the array of CC_Icon: Loop through the array of CC_Icon and use ContainerControl.EmbedWithin to position and show them.

5

You can use also a Listbox storing the image in CellTag and the label in cell value.

In the CellTextPaint event you can draw both the image and the label, making on the fly some size calculations to equalise image dimensions, add some margin, center the text, highlight the selected one, etc.

While this technique requires some work in graphics calculation, you have the advantage that if you have to play whit variable number of icons then the scroll/pagination is driven by the ListBox class itself.

6

Hi Byron,

I am the Developer of that App.

I used this open source code at first and modified it for my needs: FGThumbnailCanvas

It’s pretty old, so you may need to make some small adjustments to the code in the latest version of Xojo.

Hope that helps!

7

Also take a look at these example that are included with Xojo:

Examples/Desktop/Controls/ListBox/

I don’t have the name in front of me at the moment, but one of them shows how to do a selectable grid of icons.

8

And the author of FGThumbnailCanvas is an active member of this forum.