I am adding to my main Form a UserControl with Dock Property set to Fill. The UserControl has a FlowLayoutPanel that is also docked (Fill) and the AutoScroll property is set to True.
The FlowLayoutPanel contains 5 groupboxs, each on has its own size. When the Form (or UserControl) is in his normal size (716x520), the groupboxs go from top to bottom, all good.
But when I maximize the Form (or just make it bigger), the groupboxs get re-arranged, and a strange space appears after the 2 first groupboxs. It's like there are rows and if another groupbox from the same row is bigger, then a space will appear to complete the height difference.
Obviously you specify LeftToRight
for the FlowDirection
instead of TopDown
. So when that layout panel is wide enough, there will be room for other group boxes in the first row...
That layout is somewhat similar to word wrapping for text where you get as many words as possible of the first line depending on the available width.
So if you change the direction, you will have a single column if you have enough height.
There are other possible solutions for that problem. Assuming that group boxes are all fixed sizes, then you might set the flow layout panel docking to None
so that the panel won't be resized to the available width (and then prevent having multiple columns by giving an appropriate size to that panel.
Another possibility would be to use a layout based on a table. Given that all your group boxes have the same width, this is not necessary (it is a bit simpler to use flow layout when it works).
In practice however, you might prefer to show all group boxes on screen if there is enough room and avoid a scroll bar. This can be done using flow layout. In your case, you might want to use TopDown
flow, top docking, layout panel auto sizing (and probably put the auto scroll on the user control).