Managing the Position and Size of Controls
At times, you need more than just the basic control positioning features we’ve examined thus far. We’ve looked at two techniques for sizing and positioning controls:
-
At design time, controls are positioned and sized using the Windows Forms Designer.
-
At run time, the location and size of a control are managed using the Location and Size properties.
Although these techniques are flexible, both approaches break down when you allow control containers to be resized. Writing code that manually resizes controls based on the size of the container is difficult—in fact, third-party controls that assist in resizing have always been among the most popular ActiveX controls. Controls and forms in the .NET Framework expose the following two properties that enable them to be dynamically resized or positioned as their containers are resized:
-
Anchor Specifies which edges of the container control the size and position of the control
-
Dock Specifies which edges of the container the control will be attached to
The following subsections describe the use of these properties in more detail, beginning with the Anchor property.
The Anchor property for a control specifies how the control is positioned when its parent is resized. By default, a control is anchored to the top and left edges of its container; as the container is resized, the controls remain a fixed distance from the top and left edges of the container. The Anchor property can be set to one or more values from the AnchorStyles enumeration, listed in Table 15-9.
The default Anchor property value for a control is shown here:
AnchorStyles.Top ¦ AnchorStyles.Left
Figure 15-10 shows a simple example form that has two push button controls and a TextBox control.
Figure 15-10.
If this form is resized, as shown in Figure 15-11, the controls on the form remain in their current locations. Ideally, the TextBox control would be resized to conform to the larger form that’s now available. In addition, the OK and Cancel buttons should align at the right edge of the container. With the Anchor property, you can achieve this effect easily.
Figure 15-11.
Instead of being anchored to only the top and left edges of its container, the TextBox control should be anchored to all of its container’s edges, forcing the control to be resized as the form is resized. You can change the property programmatically using code such as this:
Anchor = AnchorStyles.Top ¦ AnchorStyles.Right;
A much easier approach is to use the Windows Forms Designer to change the Anchor property graphically at design time. To do so, click the Anchor property in the Properties window and then click the drop-down arrow to display a graphical representation of the current Anchor property value, as shown in Figure 15-12.
Figure 15-12.
In the graphical representation of the Anchor property, the gray bars that lead from the center of the box to the box’s edges indicate that the Anchor property is set to AnchorStyles.Top and AnchorStyles.Left. You can toggle any of the anchor settings by clicking the associated bar. In Figure 15-13, the TextBox control’s Anchor property has been changed so that the control is anchored to all sides of its container, and the push button controls have an Anchor property of AnchorStyles.Top ¦ AnchorStyles.Right.
Figure 15-13.
In some ways, the Dock property is similar to the Anchor property in that it too manages the interaction between a control and its container. The Dock property uses values from the DockStyle enumeration, listed in Table 15-10.
Unlike the Anchor property and the AnchorStyles enumeration, however, you never combine multiple values from the DockStyle enumeration. A control is docked against one side of its container, except for the special case of DockStyle.Fill, which causes the control to be resized to completely fill its container. When a control is docked, it’s positioned so that the docked edge of the control is flush with an edge of the control’s container; furthermore, the control is resized so that sides that are adjacent to the control’s docked edge are also flush with the edges of the container. Figure 15-14 shows an example of a TextBox control that’s docked against the bottom edge of its form.
Figure 15-14.
The Dock property can be set programmatically, as shown in the following code:
Dock = DockStyle.Fill;
Like the Anchor property, the Dock property can also be set graphically using the Windows Forms Designer, as shown in Figure 15-15.
Figure 15-15.
Clicking the center button in the graphical representation of the Dock property selects DockStyle.Fill. Clicking any of the edge buttons selects the associated edge as the docking destination.
