Many beginning WinForms developers have trouble keeping the controls on their forms uniform and organized. Often the controls look fine at design time, but when the form is resized at runtime the controls either lose their positions or don't compensate for the resized form. Zach Smith explains how to use the built-in Anchor and Dock properties of a control to mandate its behavior during resizing.
This article is also available as a TechRepublic download, which includes Visual Studio project files with examples of the Anchor and Dock properties in action.
Many developers who are new to WinForms programming have trouble keeping the various controls on their forms in sync with one another and proportional to the parent form as it is resized by the user. This can be a very frustrating situation, especially for developers coming to WinForms from a Web programming background. To alleviate this problem, the .NET Framework allows you to set properties on child controls to mandate how they will behave when the parent form is resized. The two properties that are used to mandate a control's resize behavior are "Dock" and "Anchor".
Dock and Anchor can save an application from having an unpredictable interface by tying controls to certain places on their parent form. Best of all, there is no hand-written code required to set these properties up. Everything can be done via point and click within the Visual Studio IDE.
The Anchor Property
As the name implies, this property forces the control to anchor itself in a relative or absolute position within the parent form or control. This property has four values that can be turned on or off:
- Top -- Indicates that the control should keep its top edge stationary in respect to the parent form (or control) top edge.
- Bottom -- Indicates that the control should keep its bottom edge stationary in respect to the parent form (or control) bottom edge.
- Left -- Indicates that the control should keep its left edge stationary in respect to the parent form (or control) left edge.
- Right -- Indicates that the control should keep its right edge stationary in respect to the parent form (or control) right edge.
To set the Anchor property on a control, simply select the control in the Visual Studio designer and go to the properties window. You should see a property labeled "Anchor". Clicking in the value section for this property will bring up a little window that allows you to choose which anchor points you wish to assign to the control. Figure A shows the anchor settings window with "Top, Left" selected. Figure B shows this window with "Bottom, Right" selected.
|Anchor Tool top left|
|Anchor Tool bottom right|
The default anchor setting for a control when placed on a form in Visual Studio is "Top, Left". This instructs the control to remain stationary with respect to the top and left edges of the form.
Anchoring doesn't make much sense until you actually see how the different anchor settings affect controls. The following images should help.
Figure C shows a form with 10 child controls. Each child control has different values for the Anchor property and is labeled with its anchor settings. The dark red box behind the gray controls is another child control -- its Anchor property is set to Top, Bottom, Left, and Right. Figure D shows the same form after it has been resized to a larger area.
As you can see, each control automatically kept its position within the parent form. No code was written to do this; we simply set the Anchor property for the control.
There are a couple important points to mention here. One is that if you do not specify that a control has Left or Right anchoring, it will retain a relative left/right position within the parent form. The same holds true if you don't specify whether a control has Top or Bottom anchoring. A good example of this is the control labeled "Anchor None". That control has no anchoring values, so it simply floats in the middle of the form.
At the other extreme are controls that have all anchor values selected (Top, Bottom, Left, Right). An example of this is the dark red square visible behind the other controls in Figure C and Figure D. When all anchor values are selected, the control simply grows or shrinks when the parent form is resized -- keeping all of its edges static in comparison to the form's edges.
The Dock Property
The Dock property forces a control to stick to a certain edge of the parent form (or control) like glue. While this can also be accomplished with the Anchor property, the dock property allows you to "stack" child controls on top (or beside) each other within the parent form. If one child control changes in size, the other controls docked next to that control move along with it.
Unlike the Anchor property, you can set the Dock property to only a single value. The valid values are shown below:
- Top -- Forces the control to be at the top of the parent form (or control). If there are other child controls of the same parent set to dock top, the controls will be stacked on top of each other.
- Bottom -- Forces the control to be at the bottom of the parent form (or control). If there are other child controls of the same parent set to dock bottom, the controls will be stacked on top of each other.
- Left -- Forces the control to be at the left of the parent form (or control). If there are other child controls of the same parent set to dock left, the controls will be stacked beside each other.
- Right -- Forces the control to be at the right of the parent form (or control). If there are other child controls of the same parent set to dock top, the controls will be stacked beside each other.
- Fill -- Forces the control to be at the top of the parent form (or control). If there are other child controls of the same parent set to dock top, the controls will be stacked on top of each other.
- None -- Indicates that the control will behave normally.
To set the Dock value of a control, select the control in Visual Studio and go to the properties window. You will see a property labeled "Dock". Clicking in the value section for this property will bring up a little window that allows you to specify how you would like the control to be docked. This form is shown in the following images (Figures E, F, and G) with various values assigned:
|Dock Left is selected|
|Dock Fill is selected|
|Dock Top is selected|
Like the Anchor property, none of this makes a lot of sense until you see it in action. Figure H shows a form with five child controls, all set with different dock values.
|Five child controls with different dock values|
Figure I shows the same window as Figure H, except now the window has been resized to a larger footprint.
Figure J again shows the same window as Figure H, except this time the controls on the bottom, top, left, and right of the form have been made smaller. Notice that the control in the middle, which is set to dock Fill, automatically grew in size.
One thing to keep in mind with the Dock property is that the order in which the controls are added to the form can affect the way that they dock. For instance, if you add ControlA to the form, instruct it to dock Fill, then you add ControlB to the form and instruct it to dock Top, ControlB will appear to cover up the top portion of ControlA. The reason for this is that ControlB is considered to be "in front" of ControlA since it was added after ControlA. To fix this situation you must right click ControlA in Visual Studio and choose Bring To Front on the context menu. This will bring ControlA to the front of ControlB and the controls will then act as expected.
The example application
To fully understand how to use Dock and Anchor properties, download the sample application that is included with the download version of this article. There are several forms within the application that demonstrate different uses of Dock and Anchor. The best way to teach yourself about this type of functionality is to get into the code and get your hands dirty.