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.

Every Windows user has seen and used Windows Explorer to manage files and folders. It has two main components, a TreeView control on the left and a ListView control on the right. Resize these by dragging the vertical bar between them with the mouse in horizontal directions.

	Figure 2: This type of Windows Explorer user interface is made easily in .NET.

You can create a similar interface without writing a single line of code (Figure 2).

1. Start a new Windows application and place a TreeView control on the form.
2. In the Properties window, set the Dock property of the TreeView control to Left.
3. Drag the Splitter control and place it on the right side of the TreeView control. The Splitter controls docks to the left by default, but you can dock it to any other edge, if you like. Make sure that the Splitter is as thin as possible.
4. Place a ListView control on the right side of the Splitter control and set the Dock property to Fill so that it occupies the remaining area of the form (Figure 2).

When you run the application, notice that the cursor changes when you hover the mouse over the position where you placed the Splitter control. You will be able to resize the controls as desired.

An Outlook User Interface
Another classic user interface is the Outlook Express user interface. This is similar to designing the Windows explorer interface, except that there are two controls on the right, a ListView, and a RichTextBox control, both of which can be resized vertically.

	Figure 3: This is how your panels should look after following the previous steps.

1. Start a new Windows application and place a TreeView control and a Splitter control on the form as you did for the Windows Explorer interface.
2. Place a Panel on the right side of the Splitter and dock it to fill up the remaining area. Use this Panel as a container to dock the ListView and RichTextBox controls. I have changed the BackColor Property of the Panel to DarkGrey for better visiblity.
3. Place a ListView control on the Panel and dock it to the Top. Adjust the height as desired.
4. Place a Splitter control on the Panel. By default, it docks to the Left edge of the Panel. Change this to dock to the Top, and make sure it is thin.
5. Place a RichTextBox Control on the Panel below the Splitter control so that it fills up rest of the area (Figure 3).

Now, your interface is ready.

Anchoring maintains a constant distance between the anchored edge of the control and the corresponding edge of the container. The Anchor property determines which edges of the control are anchored to the container's edges. When a particular edge of the control anchors to an edge of it's container, the edge always maintains the same distance even if the form is resized. However, unlike with the Dock property, the edge will not be positioned flush against the edge. The Anchor property of the form control can be set to any combination of the 4 values, Top, Bottom, Left, and Right—or it can be set to None.

	Figure 4: Controls can be anchored using the Properties window.

By default, the Anchor property of a control is set to Top, Left, which means controls are always at a constant distance from the top and left edges of their containers.

Controls can be anchored using either the Properties window (Figure 4) or with code:

' VB.NET
Me.Button1.Anchor = _
	(System.Windows.Forms.AnchorStyles.Bottom Or _
	System.Windows.Forms.AnchorStyles.Right)

//C#
this.button1.Anchor = 
  (System.Windows.Forms.AnchorStyles.Bottom |
  System.Windows.Forms.AnchorStyles.Right);

If a control is anchored to both Left and Right, or to both Top and Bottom, or to all four edges of the Form, resizes as its container does—in addition to anchoring itself. The result is that the control stretches or shrinks (Figure 5). Additionally, if a control's Anchor property is set to AnchorStyle.None, it repositions itself as the container resizes so that the distance to the edges remains proportional.

Note: Some controls, like ComboBox, which has a fixed height, will not resize/stretch/shrink themselves vertically even if they are anchored to the Top and Bottom edges.

	Figure 5: Start a new Windows application and place all the controls as shown.

Now run through it. Start a new Windows application and place all the controls as shown in Figure 5. Note that:

1. The label 'Select' and the ComboBox stay on top.
2. The ComboBox resizes horizontally as the form resizes.
3. The label 'Description' repositions itself to align to the middle of the TextBox and also stays at a constant distance from the left edge of the form.
4. The TextBox resizes both horizontally and vertically.
5. The 'Save' and 'Cancel' buttons are always positioned at the bottom right corner of the form.

Anchor the controls in the following manner:

1. The Label 'Select:' remains unchanged. By default, its Anchor properties are set to Top, Left.
2. Set the Anchor property of the ComboBox to Top, Left, and Right so it remains at a constant distance from the top, left, and right edges of the form. It will resize itself horizontally.
3. Anchor the label 'Description' only to the Left. It will reposition itself vertically while sticking to the left edge of the form.
4. Set the TextBox's Anchor property to all four edges, Top, Bottom, Left, and Right. It should maintain a constant distance from all the four edges of the form and also grow or shrink both vertically as well as horizontally.
5. Anchor the buttons to Bottom, Right.
6. Set the MinimumSize Property of the form to an acceptable size, so that the controls do not overlap or go out of the visible area of the form when it is made very small.




In real-life programming, nothing is as simple as it seems. Form layouts are no exception. Learn about common pitfalls by designing this sample form layout of an expense tracker (Figure 6).

	Figure 6: The basic layout for the expense tracker form.

Here are the requirements for your sample form:


• All TextBoxes and ComboBoxes should resize horizontally.
• The multiline TextBox 'Remarks' should resize both horizontally and vertically.
• The buttons 'Save' and 'Cancel' should remain at the Bottom Right corner of the window.
• The label 'Remarks' should reposition itself so that it is always aligned to the middle of the TextBox.

Arrange the controls on the form as shown in Figure 7. Use the docking and anchoring features to make them resizable.

Notice that the controls either overlap, move away to opposite extremes of the form, or get jumbled up. If you set the Anchor property, the Dock property vanishes and vice versa. This is because you cannot set both Anchor and Dock properties for the same control, you can either anchor or dock a control but not both.

To solve this problem, use Panels to group controls that need to have identical behaviors. Dock the panels on the form as desired and anchor each control within its respective Panel. You'll need to use a little resizing code in the Form's resize event. This is definitely much easier than resizing controls in VB6. Most of the work is done by the Anchor and Dock properties with the help of Panels.

	Figure 7: Your real life sample form should look something like this.

Now build the form shown in Figure 7.

1. Start a new Windows application and place two Panels on the form.
2. Change the BackColor of the Panels to Red and Green so they are easily differentiated.
3. Dock the Red Panel to the Top and adjust the height as necessary to accommodate the controls.
4. Dock the Green Panel to fill up rest of the area.
5. Place two more Panels on top of the Red Panel and change the BackColor of the Panels to Yellow and Cyan.
6. Dock the Yellow Panel to the Left and adjust the width as necessary to accommodate the controls.
7. Dock the Cyan Panel to fill up rest of the area on the Red Panel.
8. It is important you do the docking in the order mentioned above or you will not get the desired layout.
9. Run the application. The panels should resize as you resize the form.






	Figure 8: Here, the Yellow Panel is not resizing because it's docked to Left, and not set to Fill.

Notice that in Figure 8, the Yellow Panel is not getting resized at all. The Yellow Panel should resize horizontally just like the Cyan one. It doesn't because it's docked to Left (and not set to Fill).

The Yellow and Cyan Panels are not resizing vertically because the container of both these Panels (the Red Panel) is docked to Top and not set to Fill.

This is where a little code comes into play. Programmatically increase or decrease the width of the Yellow Panel in proportion to the change in the width of the form.

Put the following code in the Form's resize event:

' VB.NET
Private Sub Form1_Resize(ByVal sender As Object, _
ByVal e As System.EventArgs) Handles MyBase.Resize
pnlYellow.Size = New System.Drawing.Size(Me.Size.Width * _
0.4225,   pnlYellow.Size.Height)
End Sub

//C#
private void Form1_Resize
	(object sender, System.EventArgs e)
	{
pnlYellow.Size = new System.Drawing.Size((int)
	(this.Size.Width * 0.4225), pnlYellow.Size.Height ) ;
	}

To get the correct width of the Yellow Panel at runtime, multiply the width of the Form by a ratio calculated using the formula:

Ratio = WidthOfYellowPanel / WidthOfTheForm

In this case the ratio is 0.4225, which means the width of the Yellow Panel is 42.25% of the width of the Form. Hence, at runtime multiply the current width of the Form by 0.4225 and set that value as the new width of the Yellow Panel in the Form's resize event. Now try it again:

	Figure 9: The final version of the sample form.

1. Put in all controls as shown in Figure 9. Start anchoring the controls within the panels. Start with the Yellow panel. You want all the ComboBox controls in the Yellow panel to maintain the same constant distance from all the four edges of the panel and also to expand horizontally as the form/panel expands.
2. Select all the DropDown controls and in the properties window, dropdown the Anchor property and anchor the selected controls to Left and Right.
3. Dock all the Labels in the Yellow panel to the Left edge of the Yellow Panel.

Note: You won't anchor the controls of the Yellow Panel to Top or Bottom, because the Yellow Panel will not resize vertically.

4. Dock the controls in the Cyan panel the same as in the Yellow Panel.
5. The TextBox (set Multiline property of the TextBox to True) in the Green Panel should expand both horizontally as well as vertically when the form expands. So set the anchor property of the TextBox to all four edges, Top, Bottom, Left, and Right.
6. Anchor the label 'Remarks:' only to the left, so that it sticks to the left edge and also repositions itself vertically at proportional distances from the top and bottom edges of the panel.
7. Next the two buttons 'Save' and 'Cancel' need to be anchored to the bottom-right corner.
8. Hit F5. The controls should resize along with the form.
9. Now set the BackColor property of the panels back to their default values. Also set the MinimumSize property of the form such that all controls are visible and usable when the window is shrunk.

As you can see, Panels play a very important role in the layout design. And thankfully, the amount of coding needed to resize/reposition controls has been greatly reduced—if not totally eliminated—in .NET.

Benny K. Mathew has been programming with a passion since high school. He completed his Master's Degree in Computer Applications (M.C.A.) at the University of Mysore in Mysore, India. He began his professional career in Bangalore, India at Delphi Software. Presently, he is a programmer for Thomson Financial Research in Bangalore. You can reach him by e-mail at benny_k_mathew@yahoo.com.