Groupbox with a flowlayout panel inside and autosize = true shrinks like it is empty

Question

I have a groupbox that holds a flowlayout panel and the flowlayout panel holds a bunch of controls. I set the flowlayout panel to dock with the parent. Since I don't know how many controls will be in the panel, I set the group box autosize to true and autosizemode to grow and shrink. When I do this the groupbox shrinks as if it is empty. I need the caption so I can't remove the groupbox. Anyone know why this is happening?

Solution 1

There's nothing that stops the FlowLayoutPanel from shrinking to nothing. You'll at least have to set its AutoSize property to True as well.

Solution 2

I was trying to do the same thing today. Below is the solution i came up with, which is to dock the FlowLayoutPanel inside of the GroupBox and then use the Resize and ControlAdded events of the FlowLayoutPanel to trigger resizing the parent GroupBox.

The resize handler finds the bottom of the last controls in the FlowLayoutPanel, and resizes the GroupBox with enough space to hold the bottom-most control(s) in the FlowLayoutPanel.

I tried using the AutoSize=true on the FlowLayoutPanel and the GroupPanel. But unfortunately this allows the FlowLayoutPanel to grow horizontally.

public partial class UserControl1 : UserControl
{
    public UserControl1()
    {
        InitializeComponent();

        int numGroupBoxes = 4;

        for (int groupBoxIndex=0; groupBoxIndex<numGroupBoxes; groupBoxIndex++ )
        {
            GroupBox groupBox = new GroupBox();
            groupBox.Text = "Group " + groupBoxIndex;
            groupBox.Size = new Size(this.Width, 0);
            groupBox.Dock = DockStyle.Top;
            this.Controls.Add(groupBox);

            FlowLayoutPanel groupBoxFlowLayout = new FlowLayoutPanel();
            groupBoxFlowLayout.Dock = DockStyle.Fill;
            groupBox.Controls.Add(groupBoxFlowLayout);

            int extraSpace = 25; // the difference in height between the groupbox and the contents inside of it

            MethodInvoker resizeGroupBox = (() =>
            {
                int numControls = groupBoxFlowLayout.Controls.Count;
                if ( numControls > 0 )
                {
                    Control lastControl = groupBoxFlowLayout.Controls[numControls - 1];
                    int bottom = lastControl.Bounds.Bottom;
                    groupBox.Size = new Size(groupBox.Width, bottom + extraSpace);
                    groupBoxFlowLayout.Size = new Size(groupBoxFlowLayout.Width, bottom);
                }
            });

            groupBoxFlowLayout.Resize += ((s, e) => resizeGroupBox());
            groupBoxFlowLayout.ControlAdded += ((s, e) => resizeGroupBox());

            // Populate each flow panel with a different number of buttons
            int numButtonsInGroupBox = 3 * (groupBoxIndex+1);
            for (int buttonIndex = 0; buttonIndex < numButtonsInGroupBox; buttonIndex++)
            {
                Button button = new Button();
                button.Margin = new Padding(0, 0, 0, 0);
                string buttonText = buttonIndex.ToString();
                button.Text = buttonText;
                button.Size = new Size(0,0);
                button.AutoSize = true;
                groupBoxFlowLayout.Controls.Add(button);
            }

        }


    }

}

Here are three screenshots of the control resized to various different widths:

Comments

[scott]

Yes I have controls in it at design time. Once i get everything working with a know number of controls. this code will be autogenerated based on an xml file. At which point I will not know how many controls there will be.

[scott]

thanks. that stopped the shrinking, but caused another problem. It grows horizonally causing the need to scroll side to side in the groupboxes parent container. previously scrolling was only vertical.

[user1703401]

You can set the MaximumSize.Width on the FLP to avoid that.

[Jerry]

this works nicely, but its a good idea to resize the usercontrol itself when you resize the groupbox.