Getting a User Control to fill its container

Question

I've created a user control which contains a label and a progress bar. I've also created another user control which contains only a flow layout panel with the flow direction set to top down. When I add the former to the flow layout panel of the latter, I would like it to use the maximum amount of horizontal space available and the minimum amount of vertical space such that the default heights of the label and progress bar are honoured. Is there a way to do this?

I've uploaded a screenshot to help illustrate the problem. The user control containing the label and progress bar is in red and the user control containing the flow layout panel is in green.

Answer 1

Just set the Dock property of the User Control to 'Top'...

UserControl.Dock = System.Windows.Forms.DockStyle.Top;

Answer 2

Positioning and layering of controls can be tricky at times. Make sure the green flow control's Dock property is set to Fill. After that, start placing your label controls in and begin positioning. You can set the Dock property to Top if you want, but I am not a big fan of it in most situations. I'd say one of the most important things to remember in setting the position of controls, especially when using the Dock property, is that order matters. If you can't see a control (ie... it seems hidden behind other controls) then try reordering the way they are added to the parent (in this case the flow control panel). If you are using the designer in VS you can do this by right-click and using the "Send to top / bottom" commands (very useful when using the Dock property, furthermore you can also see which controls are layered in the spot you click).

Also, in my opinion an often overlooked option is the proper use of Control.Anchor. I would suggest looking at it.

Answer 3

I think the issue is because you don't actually want the controls to "Flow", you just want them to consume the top-most position in your host control. You can get the results you need by just using a regular Panel control instead. Just add the child user controls to the container control's Controls collection and set the added user control's Dock to "Top" afterwards.

        ChildDisplay dsp1 = new ChildDisplay();
        pnlHost.Controls.Add(dsp1);
        dsp1.Dock = DockStyle.Top;

        ChildDisplay dsp2 = new ChildDisplay();
        pnlHost.Controls.Add(dsp2);
        dsp2.Dock = DockStyle.Top;

        ChildDisplay dsp3 = new ChildDisplay();
        pnlHost.Controls.Add(dsp3);
        dsp3.Dock = DockStyle.Top;

Note: Replace [ChildDisplay] with whatever is the name of the UserControl you are using.