Designing Resizable Windows Forms in Visual Studio .NET

Most of you have heard of—and probably used—the new anchoring and docking properties available to Windows form controls. They enable controls to automatically resize or reposition themselves as the form resizes. This saves time that would normally be spent writing inane, non-productive resizing code just to make the forms look the same. This article explains how to use the new properties to save yourself some coding time.

Docking
The Docking feature attaches a control to the edge of its container. When a control is docked to an edge of it's container, it will always stick to that edge. The control will also resize itself to fully fit the edge of the container and also resizes as the container is resized. The Dock property of the Form control can be set to any one of the six values, Top, Bottom, Left, Right, Fill, and None.

By default the Dock property is set to None. To graphically set the Dock property, click on the dropdown at the right of the Dock property in the Properties window. Then, select the edge to which you want to dock the control, or dock it to the center (Fill) or set to None.

Controls can also be docked by code:

' VB.NET
Me.Button1.Dock = System.Windows.Forms.DockStyle.Left

//C#
this.button1.Dock = System.Windows.Forms.DockStyle.Left;

	Figure 1: The controls here are named Buttons. Each button is docked to a different area of the form.

If more than one control is docked to an edge, the controls will be placed next to each other. The second control is docked to the undocked edge of the first control so they're not placed on top of each other.

In Figure 1, Button1 and Button2 are docked to the Top edge of the container and placed next to each other. Similarly, Button3 and Button4 are docked to the Bottom. Button5 is docked to the Left edge of the Form, Button6 to the Right edge, and Button7 is set to Fill. This means that the control will resize itself to fill up the rest of the available area.

You can also dock the buttons as shown in Figure 1 using code:

' VB.NET
Me.Button1.Dock = System.Windows.Forms.DockStyle.Top
Me.Button2.Dock = System.Windows.Forms.DockStyle.Top
Me.Button3.Dock = System.Windows.Forms.DockStyle.Bottom
Me.Button4.Dock = System.Windows.Forms.DockStyle.Bottom
Me.Button5.Dock = System.Windows.Forms.DockStyle.Left
Me.Button6.Dock = System.Windows.Forms.DockStyle.Right
Me.Button7.Dock = System.Windows.Forms.DockStyle.Fill

//C#
this.button1.Dock = System.Windows.Forms.DockStyle.Top;
this.button2.Dock = System.Windows.Forms.DockStyle.Top;
this.button3.Dock = System.Windows.Forms.DockStyle.Bottom;
this.button4.Dock = System.Windows.Forms.DockStyle.Bottom;
this.button5.Dock = System.Windows.Forms.DockStyle.Left;
this.button6.Dock = System.Windows.Forms.DockStyle.Right;
this.button7.Dock = System.Windows.Forms.DockStyle.Fill;

Note: Controls, like the ComboBox, which has a fixed height, will not resize themselves vertically to fit the vertical edges of the container, if they are docked to Left, Right, or Fill.

Splitter Controls
The Splitter control resizes the docked controls at runtime. Place it between two controls and dock it to the undocked edge of one of them. The Splitter control is not visible at runtime, but when you point the mouse at the undocked edge of the control to which the splitter is docked, the cursor changes its appearance to indicate that the control can be resized.

Next Page