Difference between revisions of "Anchor Sides"

From Lazarus wiki
Jump to navigationJump to search
m
Line 1: Line 1:
=Anchor Sides=
 
 
There are some new properties and methods for automatic layout of
 
There are some new properties and methods for automatic layout of
 
controls.
 
controls.
Line 11: Line 10:
 
normally results in moving the Edit parallel to the Label.
 
normally results in moving the Edit parallel to the Label.
  
==Example 1==
+
=Example 1=
 
<pre>
 
<pre>
 
+--------+ +-------+
 
+--------+ +-------+
Line 18: Line 17:
 
           +-------+
 
           +-------+
 
</pre>
 
</pre>
===In code===
+
==In code==
 
<pre>
 
<pre>
 
Edit1.AnchorSide[akLeft].Side:=asrRight;
 
Edit1.AnchorSide[akLeft].Side:=asrRight;
Line 31: Line 30:
 
</pre>Edit1.AnchorToNeighbour(akLeft,10,Label1);</pre>
 
</pre>Edit1.AnchorToNeighbour(akLeft,10,Label1);</pre>
  
===Notes===
+
==Notes==
 
The Edit1.Left will follow Label1.Left+Label1.Width, not the other way
 
The Edit1.Left will follow Label1.Left+Label1.Width, not the other way
 
around. That means, moving Label1 will move Edit1. But moving Edit1 will
 
around. That means, moving Label1 will move Edit1. But moving Edit1 will
Line 40: Line 39:
 
implemented.
 
implemented.
  
==Example 2==
+
=Example 2=
  
 
You can anchor the Edit's top side to follow the Label's top side:
 
You can anchor the Edit's top side to follow the Label's top side:
Line 57: Line 56:
 
</pre>Edit1.AnchorParallel(akTop,0,Label1);</pre>
 
</pre>Edit1.AnchorParallel(akTop,0,Label1);</pre>
  
==Example 3==
+
=Example 3=
  
 
Centering a Label vertically to an Edit:
 
Centering a Label vertically to an Edit:
Line 78: Line 77:
 
centering.
 
centering.
  
==New property==
+
=New property=
 
<pre>property AnchorSide[Kind: TAnchorKind]: TAnchorSide read GetAnchorSide;</pre>
 
<pre>property AnchorSide[Kind: TAnchorKind]: TAnchorSide read GetAnchorSide;</pre>
 
This is not published in the object inspector. You can edit it in the
 
This is not published in the object inspector. You can edit it in the
Line 84: Line 83:
 
click on button of 'Anchors' property).
 
click on button of 'Anchors' property).
  
==New methods to easy configure common layouts==
+
=New methods to easy configure common layouts=
 
<pre>
 
<pre>
 
procedure AnchorToNeighbour(Side: TAnchorKind; Space: integer;
 
procedure AnchorToNeighbour(Side: TAnchorKind; Space: integer;

Revision as of 14:33, 9 February 2005

There are some new properties and methods for automatic layout of controls. You can now setup controls to keep a certain distance to other controls, or center relative to other controls. See below for examples.

Each of the four sides of a control (Left, Top, Right, Bottom) can now be anchored/bound to a side of another control. For example you can now anchor the left side of TEdit to the right side of a TLabel. Everytime the Label is moved or resized the Edit's left side will follow, which normally results in moving the Edit parallel to the Label.

Example 1

+--------+ +-------+
| Label1 | | Edit1 |
+--------+ |       |
           +-------+

In code

Edit1.AnchorSide[akLeft].Side:=asrRight;
Edit1.AnchorSide[akLeft].Control:=Label1;
Edit1.Anchors:=Edit1.Anchors+[akLeft];

You can define the distance with the BorderSpacing properties:

Edit1.BorderSpacing.Left:=10;

The same can be done with the method:

Edit1.AnchorToNeighbour(akLeft,10,Label1);

Notes

The Edit1.Left will follow Label1.Left+Label1.Width, not the other way around. That means, moving Label1 will move Edit1. But moving Edit1 will be undone by the LCL. If you also anchor the right side of Label1 to the left side of Edit1, you created a circle, and this can result together with some other autosize properties in an infinite loop. Detection of circles is not yet implemented.

Example 2

You can anchor the Edit's top side to follow the Label's top side:

+--------+ +-------+
| Label1 | | Edit1 |
+--------+ |       |
           +-------+
Edit1.AnchorSide[akTop].Side:=asrTop;
Edit1.AnchorSide[akTop].Control:=Label1;
Edit1.Anchors:=Edit1.Anchors+[akTop];

The same can be done with the method:

Edit1.AnchorParallel(akTop,0,Label1);

Example 3

Centering a Label vertically to an Edit:

           +-------+
+--------+ |       |
| Label1 | | Edit1 |
+--------+ |       |
           +-------+
Edit1.AnchorSide[akTop].Side:=asrCenter;
Edit1.AnchorSide[akTop].Control:=Label1;
Edit1.Anchors:=Edit1.Anchors+[akTop]-[akBottom];

The same can be done with the method:

Edit1.AnchorVerticalCenterTo(Label1);

Obviously anchoring the bottom side of Edit1 does not make sense when centering.

New property

property AnchorSide[Kind: TAnchorKind]: TAnchorSide read GetAnchorSide;

This is not published in the object inspector. You can edit it in the designer via the anchor editor (Menu: View -> View anchor editor, or click on button of 'Anchors' property).

New methods to easy configure common layouts

procedure AnchorToNeighbour(Side: TAnchorKind; Space: integer;
                            Sibling: TControl);
procedure AnchorParallel(Side: TAnchorKind; Space: integer;
                         Sibling: TControl);
procedure AnchorHorizontalCenterTo(Sibling: TControl);
procedure AnchorVerticalCenterTo(Sibling: TControl);