How multiple controls can be aligned and resized together, at run-time.

The tree-style layout of a form allows one to specify table-style areas, with a common width or height of all controls in the same area (using container controls like e.g. TPanel).

Delphi introduced control anchoring to the sides of the Parent control. This means when a control in a form has Anchors[akRight]=True, its right side keeps its distance from the right side of its Parent, when its Parent is resized.

The default anchors [akLeft,akTop] keep every control anchored to the origin (TopLeft) of their Parent control (of form). This will cause controls to disappear when the form is shrunken, or the user has to scroll through the form's client area.

When a control shall e.g. use the available space, left over to its right, Anchors=[akLeft,akRight] will result in a variable-width control.

The Align property allows one to stack controls at their Parent's sides, e.g. all controls with Align=alTop are stacked at the top of their Parent. The remaining space in the Parent can be occupied by a single control, of Align=alClient.

Both Anchors and Align are tightly coupled, changing one property will affect the other one. This is harmless in so far, as the IDE (form designer) keeps all adjustments in sync, free of conflicts.

Some people found this approved layout method too restrictive, and too complicated to use, and now LCL controls also can be anchored freely to each other. This layout management is traditionally referred to as "Anchor Docking", even if it is not related to docking at all.

Anchor docking allows one to anchor every side of a control to an arbitrary side of another control, i.e. the left side of an Edit control can be anchored to the right side of its associated Label.

Example1

If you want to have the top of B the same as the top of C:

+-----+  +-----+
|  B  |  |  C  |
|     |  +-----+
+-----+

use:

B.AnchorSide[akTop].Control:=C;
B.AnchorSide[akTop].Side:=asrTop;

When you want to have a gap between both controls, set e.g. B.Borderspacing.Right to the desired amount. Setting C.Borderspacing.Left will have the same effect, and both can be used together; the resulting gap then reflects the maximum value of both properties.

BorderSpacing is in effect even for controls without special anchoring, when AutoSize is used.

Anchor docking also allows one to center a control relative to another control.

Example2

For centering A relative to B:

+-------+
|       | +---+
|   B   | | A |
|       | +---+
+-------+

use:

A.AnchorSide[akTop].Side:=asrCenter;
A.AnchorSide[akTop].Control:=B;

Or use this equivalent:

A.AnchorSide[akBottom].Side:=asrCenter;
A.AnchorSide[akBottom].Control:=B;

TControlChildSizing and TControlChildrenLayout offers additional means for aligning and separating controls.