Panel.Dock Fill ignoring other Panel.Dock setting

If you create a panel on a form and set it to Dock=Top and drop another panel and set its Dock=Fill, it may fill the entire form, ignoring the first panel. Changing the tab order does nothing.

Solution 1:

Docking layout depends on the order of sibling controls. Controls are docked "button up", so the last control in the collection is docked first. A docked control only take the layout of previously docked siblings into account. Hence the control with Dock=Fill should be first (top) in the sibling order, if you want it to take the other docked controls into account. If it is not the first control, earlier controls will overlap it.

This can be confusing because the sibling-order is not necessarily the same as the visual order, and the sibling order is not always apparent from the design view.

The Document outline window (View -> Other Windows -> Document outline) gives a useful tree-view over the control hierarchy and order, and allows you to change the sibling order of controls.

You can also change sibling order directly in the designer by context menu -> Bring to front / Send to back, which moves the control to be first or last of the siblings. These menu labels may be somewhat confusing since the actual effect depends on the layout model.

With fixed positioned controls, the 2D position is independent of the sibling order, but when controls are overlapping, the control earliest in the order will be "on top", hiding part of siblings later in the order. In this context Bring to front / Send to back makes sense.

Inside flow- or table-layout panels, the creation order determines the visual order of the controls. There is no overlapping controls. So bring to front/send to back really means make first or last in the order of controls.

With docked layout, the bring to front / send to back may be even more confusing since it determines in which order the docking is calculated, so "bring to front" on a fill-docked control will place the control in the middle of the parent, taking all edge-docked controls into account.

Solution 2:

Right click on the panel with Dock=Fill and click 'Bring to Front'.

This makes this control be created last, which takes into account the Dock settings on other controls in the same container.

Solution 3:

I've had the same problem and I managed to solve it.
If you have a container with DockStyle.Fill the others should also have DockStyle but Top or whatever you want.
The important thing is to add the control with DockStyle.Fill first in Controls then the others.

Example:

ComboBox cb = new ComboBox();
cb.Dock =  DockStyle.Top;

GridView gv = new GridView();
gv.Dock =  DockStyle.Fill;

Controls.Add(gv); // this is okay
Controls.Add(cb);

but if we put cb first

Controls.Add(cb);
Controls.Add(gv); // gv will overlap the combo box.

Solution 4:

Another, potentially cleaner option is to use the TableLayout control. Set up one row of the desired height for your top dock, and another row to fill 100% for your bottom. Set both panels inside to Fill, and you're done.

(TableLayout does take some getting used to, though.)

Solution 5:

If you don't want to change the order of the elements inside the code, you can use the method Container.Controls.SetChildIndex() with Container being the e.g. Form, Panel etc. you want do add your controls to.

Example:

     //Container ------------------------------------
     Panel Container = new Panel();

     //Top-Docked Element ---------------------------
     ButtonArea = new FlowLayoutPanel();
     Container.Controls.Add(ButtonArea);
     Container.Controls.SetChildIndex(ButtonArea, 1);
     ButtonArea.Dock = DockStyle.Top;

     //Fill-Docked Element --------------------------
     box = new RichTextBox();
     Container.Controls.Add(box);
     Container.Controls.SetChildIndex(box, 0); //setting this to 0 does the trick
     box.Dock = DockStyle.Fill;