Background color for content inside CollapsingHeader

[IgorAherne]

I am implementing a mini neural-net framework, and displaying each neural-layer under a CollapsingHeader.
Usually, it has 3 columns with some data, and a graph from ImPlot. (like on screenshot below)

I know I can change the color of the CollapsingHeader, using PushStyleColor() but how can I have a background for the frame that it renders, when the header is open?

None of the ImGuiCol_ seem to work :/
The only solution I can think of, is to somehow render the UI section in two passes:

• one to compute the total size
• and another pass to render a frame with appropriate color, then re-draw the ui on top of it.

Is there a simpler solution? ...I can't find it in demo, sorry if I missed it

I want background color for this part, under CollapsingHeader:

[ocornut]

Hello,

CollapsingHeader doesn't know anything of its "contents", since it's not even a bounded widget (it doesn't have an pop/end call).

The only solution I can think of, is to somehow render the UI section in two passes:

• one to compute the total size
• and another pass to render a frame with appropriate color, then re-draw the ui on top of it.
  Is there a simpler solution? ...I can't find it in demo, sorry if I missed it

The simplest solution currently would be:

• a) BeginGroup() after CollapsingHeader()
• b) Use a persistent instance of ImDrawListSplitter with Split(2), or draw_list->ChannelsSplit(2), set yourself in channel 1, submit your content.
• c) EndGroup(), then query GetItemRectMin(), GetItemRectMax(). Maybe overwrite max.x with GetContentRegionMax().x + window->Pos.x or depending on your needs.
• d) Set yourself in channel 0, draw your rectangle given those two positions.
• e) Call ChannelsMerge()

From my pov this is a little unefficient for very frequent use but at that the sort of granularity you are showing, the cost should be negligible. To be able to provide a BeginSelectable/EndSelectable thing down the line we would need to implement a more optimal a variation of that, which to avoid changing ImDrawList renderer specs would be something like:

• a) allocate vertices ahead
• b) draw contents
• c) write our shapes to pre-allocated vertices

This only requires us to know ahead of the vertices count which is something we can solve.

Also see some tangential ideas: #1496, #2920

[ocornut]

Note that the solution is much easier to implement if you use a non-filled shape and just an outline, since you can totally remove using the splitter and out-of-order rendering.

[IgorAherne]

@ocornut Thank you! Could you please give me a basic code example? as I feel a bit overwhelmed :(

[frink]

Easiest way I can think of would be setting the child background color and used a child window.