Docking a Control inside a Docked FlowLayoutPanel

Question

We added the property \"Dock = Dockstyle.Fill\" to our FlowLayoutPanel so that it resizes and fills its parent control. Now we added two GroupBoxes to the FlowLayoutPanel. T

Answer 1

In the case that you described, when you only want top-down flow, you can simply use Panel instead of FlowLayoutPanel. Set the panel AutoScroll to true, and its Dock to Fill and then add group boxes to panel and set Dock property of them to Top.

Note:
For future uses of FlowLayoutPanel you may find this helpful:

How to: Anchor and Dock Child Controls in a FlowLayoutPanel Control

This is the general rule for anchoring and docking in the FlowLayoutPanel control:

For vertical flow directions, the FlowLayoutPanel control calculates the width of an implied column from the widest child control in the column. All other controls in this column with Anchor or Dock properties are aligned or stretched to fit this implied column. The behavior works in a similar way for horizontal flow directions. The FlowLayoutPanel control calculates the height of an implied row from the tallest child control in the row, and all docked or anchored child controls in this row are aligned or sized to fit the implied row.

Example:

For example following, if you run following code:

for (int i = 0; i < 5; i++)
{
    var control = new GroupBox()
    {
        Text = i.ToString(),
        Dock = DockStyle.Top,
        Height = 40
    };

    this.panel1.Controls.Add(control);
    //To reverse the order, uncomment following line
    //control.BringToFront();
}

The result will be:

4
3
2 
1
0

You can reverse the order of items, by uncommenting the comment code.