How to implement a control that automatically adapts to its changes as the size of the form changes

When designing a form that can be resized by a user, how can the controls on that form be automatically resized and repositioned correctly as the form changes? This is the case with the help of the control. The Anchor property. The Anchor property defines the location of the control's anchor point. When the control is anchored to a form, if the form is resized, the control maintains the distance between it and the anchor point position. For example, if the ": Button" control is anchored to the left, right, and bottom edges of the form, when the form is resized, the Button control resizes horizontally, maintains the distance to the left and right of the form, and the control positions itself vertically so that its distance to the bottom of the form remains constant. If the control is not anchored and the size of the form is resized, the position of the control relative to the edge of the form changes. Here's how to anchor a control to a form.

First, select the control you want to anchor. Then, in the Properties window, click the arrow to the right of the Anchor property to display an editor that displays a crosshair. To set the anchor point, click the top, bottom, left, or right portion of the crosshair. By default, the control anchors the left and top, and to clear the edges of the anchored control, click the corresponding arm of the crosshair. Click the Anchor property name again to close the Anchor property editor. When a form is running, the control resizes to remain at the edge of the form, and the distance to the anchor edge is always the distance defined when the control is positioned in the Windows Forms Designer. It is important to note that some controls, such as a ComboBox control, have a high limit, anchoring the control to the bottom of its form or container, and cannot force the control to exceed its height limit.

. The NET Framework allows you to set properties on a child control, and how they should work when the parent form is resized. The two properties that are used to command the control's action when resizing are "Dock" and "Anchor".

The dock and anchor are exempt from the hassle of having an application with an unpredictable interface by connecting controls to a location on their parent form. The best thing to do is to set these properties without any handwritten code. Everything can be done through points and clicks in the visual Studio IDE.

Anchor Property

As the name implies, this property forces the control to position itself in a relative or absolute position within the parent form or parent control. This property has four values that can be turned on or off:

• Top -- indicates that the top of the control that is related to the parent form (or parent control) should remain fixed.
• Bottom -- indicates that the bottom edge of the control that is related to the parent form (or parent control) should remain fixed.
• Left -- indicates that the left edge associated with the parent form (or parent control) in the control should remain fixed.
• Right -- indicates that the right edge of the control in relation to the parent form (or parent control) should remain fixed.

To set the Anchor property on a control, simply select the control in the Visual Studio designer and go to the Properties window. You will see a property labeled "Anchor". Clicking on the section of the attribute value will give you a small window to choose the anchor point you want to give the control. Chart a shows the Anchor Settings window with the top, left side selected. Chart B shows the window with the bottom and right edges selected.

Chart a

Anchor Tools Top and left

Chart b

Anchor Tool Bottom and right

In Visual Studio, when a control is placed on a form, the default anchor setting is top, left, which makes the control and the top and left edges of the form relevant.

When you really discover the effects of different anchor settings on your controls, you'll be able to understand the meaning of anchoring. The image below will help.

Chart C

Small window

Chart A form with 10 child controls is shown in C . Each child control has a different value for the Anchor property and is labeled with its anchor settings. The dark red box behind the gray-white control is another child control-its Anchor property is set to the top, bottom, left, and right. Chart D shows the same form after the area has been adjusted to large.

Chart D

Large window

As you can see, each control automatically maintains its position in the parent form. We did not write the code to do this, but simply set the anchor property of the control.

There are several important places that have to be mentioned. One is that if you don't specify a control with a left or right anchor, it retains a relative left/right position in the parent form. The same is true if you do not specify whether a control has a top or bottom anchor. A good example of this is the control labeled "No Anchor". Such a control does not have an anchor value, so it simply floats in the center of the form.

The other extreme is the control that selects all anchor values (top, bottom, left, right). For this, the dark red Square visible behind the other controls in chart C and chart D is an example. When all anchor values are selected, the control simply resizes the parent form, as it grows and shrinks-all its edges remain stationary when compared to the edge of the form.

Dock Properties

The Dock property forces the control to cling to an edge of the parent form (or control). Although the Anchor property can do this, the Dock property allows you to "stack" the subform on top (or next) to each other in the parent form. If a subform changes size, other subforms that are parked next to it also change.

Unlike the Anchor property, you can set the Dock property to a single value. The valid values are as follows:

• Top -- forces the control to be at the top of the parent form (or control). If other child controls of the same parent form are also set to stop at the top, the controls will stack up and down on each other.
• Bottom -- forces the control to be at the bottom of the parent form (or control). If other child controls of the same parent form are also set to stop at the bottom, the controls will be stacked on top of each other.
• left -- forces the control to be on the other side of the parent form (or control). If other child controls of the same parent form are also set to the left, then the controls will be stacked with each other next to each other.
• Right -- forces the control to be on the left side of the parent form (or control). If other child controls of the same parent form are also set to be parked on the right, the controls will be stacked with each other next to each other.
• Fill -- forces the control to be located above the parent form (or control). If other child controls of the same parent form are also set to be parked above, the controls will be stacked on top of each other.
• None -- indicates that the control will function correctly.

To set the dock value for a control, select the control in Visual Studio and go to the Properties window. You will see a property labeled "Dock". Clicking on the part of the value of this property, a small window will appear allowing you to specify how the control will be parked. The form that is given various values is displayed in the image ( chart E, chart F , and chart G):

Chart E

Choose to stop on the left

Chart F

Select Stop Fill

Chart g

Select the top of the parking

As with the anchor attribute, you will not realize the significance of a function until it has been discovered. Chart H shows a form with 5 child controls, each with a different dock value set.

Chart h

5 child controls with different dock values

Chart I am shown in the same window as the graph H , except that the window has now been resized to a larger trajectory.

Chart I

A bigger trajectory.

Chart J also shows the same window as the chart H , this time the different controls at the bottom, top, left, and right of the form are smaller. Note the control that is set to dock fill in the middle of the form automatically becomes larger.

Chart J

A smaller trajectory.

Keep in mind that for the dock property, the order in which controls are added affects how they are docked. For example, if you add control a to a form, indicate that it is being populated, and then you add control B to the form and indicate that it is parked at the top, control B overrides the upper part of control a. The reason is that control B is considered "in front" of control a because it was added after control a.

To resolve this situation, you must right-click Control a in Visual Studio and select "Put to front (bring to Front)" In the context menu. This allows control a to appear in front of control B, and the control will work as expected.

How to implement a control that automatically adapts to its changes as the size of the form changes