Anchoring, Docking, and Other Properties of Controls

After you've dragged some controls onto your form, try resizing the form to a larger size. You're likely to be disappointed by the result: just extra background next to and below the existing controls. The same thing happens if the user enlarges the form while the application is running. Experienced MFC programmers know how to resize individual controls when the form resizes, and you can apply those techniques, slightly adapted , to a managed Windows Forms application. It's more likely, though, that you'll use two new properties, Anchor and Dock , to give you the behaviors you want without writing any code.

The Anchor Property

By default, a control is anchored to the left side and top edge of its containerusually the form on which the control has been placed. As the size and position of the container changes, the control always stays the same distance from the left and top of the container. This isn't always the most desirable behavior. A button like the Go! button in the sample application shown in this chapter would be better staying the same distance from the top and the right, and letting the distance from the left edge vary as the form changes size. Arranging this is simple: Select the button by clicking it, and scroll down in the Properties window until you find the Anchor property. Click it, and a drop-down box will appear. Click that and a small window appears in which you can select the sides of the box to which the button will be anchored. Figure 4.6 shows the anchoring changed to top and right. Pressing Enter or clicking another control saves the changes.

Figure 4.6. Many controls should be anchored differently than the top-left default.

When a control is anchored to both the left and right sides, or to both the top and bottom, it changes size when the container changes size, in order to stay the same distance from both sides. Anchoring to both left and right is an excellent choice for a text box, so that it can enlarge when the user enlarges the form.

The Dock Property

The data grid at the bottom of the sample form has been sized to fit the form exactly. You can use the Anchor property to keep it the current distance, zero, from both sides and the bottom, but it's much simpler to use the Dock property. When a control is docked , it moves up right against one edge of the container and it automatically resizes to continue to fill that entire edge. To dock a control, first select it. Then find the Dock property in the Properties window. Click the current value (None) and a drop-down list will appear: Click that and a small window appears, showing the sides to which you can dock the control. If you choose the center, the control will dock to all sides of the container at oncenot a good choice if there's anything else on the form. Figure 4.7 shows the Dock property being set to Bottom for the data grid in the sample application.

Figure 4.7. This chapter's sample application uses a variety of controls.

After the text box has been anchored left, right, and top, the button has been anchored top and right, and the data grid has been docked to the bottom, the sample application responds nicely to resizing requests . Figure 4.8 shows how the controls resize and reposition themselves when the form is enlargedand I didn't have to write any code to get this behavior.

Figure 4.8. This chapter's sample application resizes and repositions controls when the form is resized.