Dock layout/Using the Splitter control

Don’t feel bad if you haven’t gotten it yet… it requires a PHd in Dock and Anchor layout to understand. Fortunately the Whidbey release addresses this, but in the meantime here’s how to work with the old.

First stop: understanding dock and anchor layout.

Lets add two controls to the form: TreeView, a ListView. The treeview will dock to the left side of the form, the list view will fill the rest of the space.

treeView.Dock = DockStyle.Left;
listView.Dock = DockStyle.Fill;

If you added the controls to the control collection like so:

this.Controls.AddRange( new Control[] { treeView, listView });

You’d notice that the list view would completely fill the space, and that the treeview would be sitting above it. Not what we wanted at all.

This is because the “Z-Order” – that is - the way the controls pile up on one another in the Z axis - is controlled by the order of the controls in the controls collection. The last control in the collection is on top, the first control is on the bottom. When the dock layout manager came through and set the sizes and locations of everyone, it started with the controls at the back and moved forward. So it said listView – fill up the size of the form, treeview, set your height to be the height of the form and stay over here to the left.

What we really want is for the listview to fill the remaining space AFTER the treeview has already laid itself out.

this.Controls.AddRange( new Control[] {listView, treeView });

Now we’ve got everyone where they want to be – its time to add the splitter. Again the splitter wants to be Dock=Left, and wants to be added AFTER the treeview has been added but before the listView fills up the remaining space.

this.Controls.AddRange( new Control[] {listView, splitter, treeView });

There are handy functions on control (which also appear in the designer – right click): BringToFront and SendToBack – as well as Controls.SetChildIndex. These all shift around the ordering of the Controls collection. If you get stuck in with the wrong z-order in the designer, these are quite handy. Whidbey also has some pretty snazzy features when it comes to looking at the entire tree of controls at once - the document outline. To open it up - select View->Other Windows->Document Outline.

There you have it - you now have you’re now qualified for a PHd – congrats! ;-)

Comments

• Anonymous
  August 31, 2005
  Custom PaintingPainting best practices ComboBox OwnerDrawLayoutDock layout/Using the Splitter control...
• Anonymous
  August 31, 2005
  Custom PaintingPainting best practices ComboBox OwnerDrawLayoutDock layout/Using the Splitter control...