More Layout with Docking

After my recent articles about visual inheritance (Visual Inheritance - How to escape Layout Hell and Visual Inheritance Revisited) I received some mails in which people asked me about docking and windows forms layout in general. One question was about how to resize elements of a layout proportionally when the form is resized, without calculating lots of coordinates.

Imagine you have a form like this:

and you want it to resize like this:

Using docking, this is really easy:

Step 1: Docking

  • panel1: Dock left
  • label1: Width 1, Dock left
  • panel2: Dock top
  • label2: Height 1, Dock top
  • panel3: Dock fill


Step 2: Handling the form's resize event

protected override void OnResize(EventArgs e)
int dx=this.ClientSize.Width - this.DockPadding.Left - this.DockPadding.Right - label1.Width;
int dy=this.ClientSize.Height - this.DockPadding.Top - this.DockPadding.Bottom - label2.Height;
panel1.Size=new Size(dx/3,panel1.Height);
panel2.Size=new Size(panel2.Width,dy/2);

You only need to calculate one width and one height - everything else is taken care of automatically by simply docking the layout elements.

No Comments