How to make a Control Array of Compound Controls

We wish to present a graphical display of nodes in a tree structured grid and need some guidance regarding the node item. In particular, what can and cannot be achieved in Xojo?

Each display node has 5 other embedded controls (or zones), namely …
. a single central square (Canvas assumed) to display colours, text, pictures,
. 4 x surrounding (North, South, East, West) Canvases to respond visually to MouseEnter, MouseExit and MouseDown events, and
. some sort of “containing” control.

Having placed one node on the window we wish to clone an array of them. Have tried the following strategies which all seem a bit clunky. I was hoping to create a Node class with embedded Canvasses and key properties.

a. A single Canvas can be a member of a control set but MouseEnter fires upon overall Canvas1 Enter and does not know which of the 5 zones it’s in. MouseMove may traverse any of the 5 zones, firing continuously and setting an index to guide the eventual Canvas1(index).Paint event. This sort of works but involves a lot of algebra to track points and rectangles.

b. We put 5 Canvasses in a Container Control but then couldn’t work out how to create a Control Set of Container Controls. Don’t think this is possible.

c. We put 5 Canvasses in a Canvas1 control but only the “containing” Canvas1 participates in the control set. Perhaps they all have to be cloned individually and positioned individually.

d. We sub-classed the generic Canvas Class to make a Node Class but couldn’t figure out how to store and display the 5 parts …

I’m sure there’s a cool way to do this and hopefully in Xojo.

I think a ContainerControl is the way to do what you want. Although a ContainerControl cannot be in a Control Set you can add a private property on the window to track your ContainerControl instances.

Interesting … Can you expand a little, perhaps with a few lines of (pseudo) code regarding instantiation and tracking of these ContainerControl instances.

We would end up with a set of Container controls called ContainerControl1, ContainerControl2 … ContainerControlN. We don’t know N as the user will add and delete these nodes. So each container would have to decode its Index in this set somehow as per a control array. Would that be parsing its own name?

The ideal answer would of course be a control set of container controls.

Take a look at this example that is included with Xojo:


It shows how to have a ContainerControl consisting of multiple controls. Multiple copies of the container can be added and removed at runtime in a scrollable list.


Thanks for this guidance. Seem to have got it all working.

However, there may be a glitch in the .EmbedWithin method. I’m embedding the set of Containers (and their own sub-canvasses) in a larger window-wide canvas. In debug, upon executing the .EmbedWithin method (with all options) I noticed that the new .Left and .Top values were reset form zero to various values. The values were passed back into the Container object. This caused the initial Paint of the Container to be out of place and, since it had just painted I couldn’t then force a refresh. I couldn’t find any meaning or relevance in these spurious values.

Bit of a kluge, but by resizing the Window by a pixel I am able to force a proper rePaint and all the bits land in the right place.

Appreciate any thoughts on this. The workaround works, but I’m still curious …

Tough to say without a specific example although it sounds like it could be related to <>. If you can isolate it to a small example, please add it to this case or create a new one.