Nested Container Controls?

General
1

This may have been covered (like ad nauseum) in the past, but I can’t find references to this specific issue in the forums. Hoping someone can point me in the right direction:

For a new product I’m building the client wants to be able to have multiple layers of highly customized UI. Here’s an example of what they are after:

The icons across the top are completely custom and should not have any border or box around them. Each will load a different set of content below the black line. I’ve selected the basic layout for Icon 1 as a demonstration for this UI mockup.

Icon 1 will show several sections that look and act a little like tabs, but need to also be completely custom in that they need a specific font, background color, border around the content, etc.

Each section will have very different content that shows up in the content area, always bordered by the same color as the selected section, as in the mockup.

When I first saw this, I thought - no problem… I’ll use a container control for each Icon’s content, and a nested container control for each section content. So when Icon1 is selected, the container control with its sections appears below the black line. When section 1 in that container control is selected, a container control with the content that belongs in Section 1 appears in the center area of the section. This is what I built today, in generic fashion.

This works PERFECTLY on the mac.

It is completely unusable on windows. It appears that layering container controls on other container controls is totally impossible on Windows. I believe I’ve tried every combination of Erase Background and Transparent that there is on all the various container controls.

So, it looks like I either simply cannot use the paradigm I first designed, or I’m doing something very wrong.

Here is my code so far. This works exactly as I want it to on OS X. Can anyone offer any insight into how to accomplish what I want cross-platform?

Thanks!

– Kimball

2

Sounds a lot like the IDE :stuck_out_tongue:
But the IDE is not done at design time its all managed at run time by embedding & closing at run time as tabs are switched

3

Not gonna work on Windows. I would separate the tabs from the content. Make the tabs a canvas that is TAB_HEIGHT - CORNER_ARC high. That will clip the lower portion of the tab the way you want. Then put each container onto a page of a PagePanel. Set the panel index when you change tabs.

Or embed everything dynamically at runtime.

4

That’s what I was afraid of, @Tim Hare. Is there any scenario where it is possible to nest container controls on windows? Or is that always going to cause me headaches?

5

nesting containers isn’t the problem here though the entire inspector is container in containers and there are several piece of the ice that are nested containers in other containers

however, we don’t try & embed them at design time and we never try to embed several at once as you’ve done in the editor

that won’t work well
a page panel where you add a panel per tab then embed the container on the new panel works fine though

then switching tabs is just a matter of switching to the specific page of the page panel

hiding & showing & refreshing won’t work well if it works at all - its the reality of the Windows & linux compositing not being the same as it is on OS X (hence why it works on OS X & not on Windows & Linux - we’ve had the same experience)