Search code examples
c#winformsuser-interfacedockingflowlayoutpanel

Variable height FlowLayoutPanel with right anchored static panel


Take a good look at this figure

I've got a Top Panel which is docked to the Top of my form (AutoSize == True, AutoSizeMode == GrowOnly). Inside of that I have a FlowLayoutPanel docked to Fill (AutoSize == True, AutoSizeMode == GrowOnly), and a plain Static Panel docked to the Right (AutoSize == False). The Static Panel has a fixed width, but its height can be stretched. The FlowLayoutPanel contains a number of child elements that align to the right.

I want it so when the user resizes the form to where all of the FlowLayout children can't fit on the same "line" that the FlowLayoutPanel, Top Panel and Static Panel all grow in height to fit the cut off children on a second "line", and possibly third, fourth and so on.

As it stands (in this example), the would-be overlapped children get knocked to the second "line" but none of the heights stretch to show them. I've fiddled in all sorts of ways with various docking and autosize parameters in these various panels.

I figured this wouldn't be too difficult but I can't get it to work using just the features available in design time. Maybe It's not possible or I'm missing something. Thank ya!


Solution

  • I tried multiple things. Here is what worked for me:

    Replace your Top Panel with a TableLayoutPanel(Anchor= Top, Left, Right, ColumnCount=2 RowCount=1, Autosize = True, AutosizeMode = GrowAndShrink) and give the Right Column a fixed Width of x pixel(Left Column will adjust to 100%)

    In the Left Column put your FlowLayoutPanel (Autosize = True, AutosizeMode = GrowAndShrink, Anchor= Top, Left, Right)

    In the Right Column put a Panel (Autosize = False, Anchor= Top, Bottom, Left, Right)

    Here is what it look:Blue= FlowLayoutPanel, Green=Panel

    Before Resize
    enter image description here After Resize
    enter image description here

    Don't forget to set a min Width to your form. Or it could look like this
    enter image description here