How to: Control Docking Behavior

The order in which controls are added to a form can affect the layout of controls on the screen when the docking feature is used. Controls do not always appear in the intended location on the screen if the controls are not added in the correct order.

The order in which you add controls to a form affects the z-order, and when multiple controls are docked within a parent control, the z-order determines the layout logic. A control added to a parent control first is placed at the bottom of the z-order, and controls added after this are layered sequentially on top. When you attempt to place one control adjacent to another by docking them to the same area within a parent control, the control that is farther back in the z-order takes precedence in the resulting layout. For example, if the Dock property for two controls is set to Top, in typical scenarios, the control that is farther back in the z-order appears at the top of the parent control on the screen.

However, when the Dock property for a control is set to Fill, this issue can potentially result in one control obscuring another control. For example, two controls added to the form in the wrong order might appear at the top of the screen, one obscuring the other, when the intention is to place only one of the controls in that location.

If any layout issues occur, the z-order of the affected controls must be adjusted. Different steps will be required to fix this issue depending on whether or not the designer is being used to add the controls to the form. In the Designer, the Bring to Front and Send to Back commands change the z-order.

To control the docking layout

• Correct the order in which the relevant controls are added to the form.

  Consider an example in which a TreeView control and a Button control are programmatically added to a Panel control. The Dock property of the TreeView control is set to Fill, and the Dock property of the Button control is set to Top. The TreeView control partially obscures the Button control. The code that adds the TreeView and Button controls to the Panel might appear similar to the following:

  this.panel1.Controls.Add(this.button1);
  this.panel1.Controls.Add(this.treeView1);
  

  To fix the problem, change the order in which these controls are added to the panel.

  this.panel1.Controls.Add(this.treeView1);
  this.panel1.Controls.Add(this.button1);
  

  Alternatively, use the BringToFront or SendToBack methods on one of the controls.

To control the docking layout using the designer

1. Select one of the controls that appears in the wrong location on the form.

2. Depending on the desired layout, either right-click on the control and select Send to Back.

   -or-

   Right-click on the control and select Bring to Front.

3. If additional controls are involved, you can repeat step 2 for other controls, if necessary, until the docking behavior is corrected.

   Note

   To easily select different controls, use the Document Outline window.

See Also

Concepts

.NET Compact Framework How-to Topics

Change History

Date	History	Reason
February 2009	Added solution information to introduction.	Customer feedback.