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.
|
Figure A |
 |
| Anchor Tool top left |
|
Figure B |
 |
| 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 |
 |
| Small Window |
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.
|
Figure D |
 |
| Large Window |
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:
|
Figure E |
 |
| Dock Left is selected |
|
Figure F |
 |
| Dock Fill is selected |
|
Figure G |
 |
| 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.
|
Figure H |
 |
| 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 I |
 |
| 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.
|
Figure J |
 |
| Smaller footprint |
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.
