Anchor Sides/de: what changed
Revision 2 to 3. Removed lines have a minus sign; added lines have a plus sign.
| Old | New | Line | |
|---|---|---|---|
| 1 | - | ||
| 1 | + | Es gibt einige neue Eigenschaften und Methoden für das automatische Layout von Steuerelementen. Sie können jetzt Bedienelemente so einstellen, dass sie einen bestimmten Abstand zu anderen Bedienelementen einhalten, oder relativ zu anderen Bedienelementen zentrieren. Siehe unten für Beispiele. | |
| 2 | 2 | ||
| 3 | - | ||
| 3 | + | Jede der vier Seiten eines Bedienelements (Left, Top, Right, Bottom) kann jetzt verankert/angebunden werden an der Seite eines anderen Bedienelements. Zum Beispiel können Sie jetzt die linke Seite eines TEdit an der rechten Seite eines TLabel verankern. Jedes Mal, wenn das Label bewegt wird oder in der Größe angepasst wird, dann wird die linke Seite des Edit folgen, was normalerweise zu einer Bewegung des Edit parallel zum Label führt. | |
| 4 | 4 | ||
| 5 | - | ||
| 5 | + | ## Contents | |
| 6 | 6 | ||
| 7 | - | ||
| 8 | - | ||
| 9 | - | ||
| 10 | - | ||
| 7 | + | * 1 Beispiel 1 | |
| 8 | + | * 1.1 Im Code | |
| 9 | + | * 1.2 Anmerkungen | |
| 10 | + | * 1.3 Mittels des Ankereditors | |
| 11 | + | * 2 Beispiel 2 | |
| 12 | + | * 3 Beispiel 3 | |
| 13 | + | * 4 Neue Eigenschaft | |
| 14 | + | * 5 Neue Methoden zur einfachen Konfiguration eines gebräuchlichen Layouts | |
| 15 | + | * 6 Verankern an unsichtbaren Kontrollelementen | |
| 16 | + | * 7 Zirkuläre Bezüge | |
| 17 | + | * 8 Siehe auch | |
| 11 | 18 | ||
| 12 | - | ||
| 19 | + | # Beispiel 1 | |
| 20 | + | ``` | |
| 21 | + | +--------+ +-------+ | |
| 22 | + | | Label1 | | Edit1 | | |
| 23 | + | +--------+ | | | |
| 24 | + | +-------+ | |
| 25 | + | ``` | |
| 13 | 26 | ||
| 14 | - | ||
| 27 | + | ## Im Code | |
| 28 | + | ``` | |
| 15 | 29 | Edit1.AnchorSide[akLeft].Side:=asrRight; | |
| 16 | - | ||
| 17 | - | ||
| 30 | + | Edit1.AnchorSide[akLeft].Control:=Label1; | |
| 31 | + | Edit1.Anchors:=Edit1.Anchors+[akLeft]; | |
| 18 | 32 | ``` | |
| 19 | 33 | ||
| 20 | - | ||
| 21 | - | ||
| 22 | - | ||
| 34 | + | Sie können den Abstand mit den Eigenschaften von BorderSpacing definieren: | |
| 35 | + | ``` | |
| 23 | 36 | Edit1.BorderSpacing.Left:=10; | |
| 24 | 37 | ``` | |
| 25 | 38 | ||
| 26 | - | ||
| 27 | - | ||
| 28 | - | ||
| 39 | + | Das selbe kann mit der Methode gemacht werden: | |
| 40 | + | ``` | |
| 29 | 41 | Edit1.AnchorToNeighbour(akLeft,10,Label1); | |
| 30 | 42 | ``` | |
| 31 | 43 | ||
| 32 | 44 | ## Anmerkungen | |
| 33 | 45 | ||
| 34 | - | ||
| 46 | + | Edit1.Left wird Label1.Left+Label1.Width folgen, nicht umgekehrt. Das bedeutet, dass eine Bewegung von Label1 auch Edit1 bewegen wird. Aber eine Bewegung von Edit1 wird von der LCL annulliert. Wenn Sie auch die rechte Seite von Label1 an der linken Seite von Edit1 verankern, dann erzeugen sie einen Kreis. Dies kann zusammen mit einigen anderen Autosize-Eigenschaften eine Endlosschleife verursachen. Ist Parent.AutoSize auf true gesetzt, wird dies von der LCL ignoriert oder automatisch repariert. | |
| 35 | 47 | ||
| 36 | 48 | ## Mittels des Ankereditors | |
| 37 | 49 | ||
| 38 | - | ||
| 50 | + | Der Ankereditor ist ein schwebendes Fenster, den Sie erreichen über das Menü **Ansicht / Ankereditor anzeigen** oder über die Schaltfläche in der Eigenschaft **Anchors** des Objektinspektors. | |
| 39 | 51 | ||
| 40 | - | ||
| 52 | + | [](</File:Anchor_Editor_de.png>) | |
| 41 | 53 | ||
| 42 | 54 | # Beispiel 2 | |
| 43 | 55 | ||
| 44 | - | ||
| 45 | - | ||
| 46 | - | ||
| 56 | + | Sie können die obere Seite von Edit1 so verankern, dass sie der oberen Seite von Label1 folgt: | |
| 57 | + | ``` | |
| 58 | + | +--------+ +-------+ | |
| 47 | 59 | | Label1 | | Edit1 | | |
| 48 | 60 | +--------+ | | | |
| 49 | 61 | +-------+ | |
| 50 | - | ||
| 51 | - | ||
| 62 | + | ``` | |
| 63 | + | ``` | |
| 52 | 64 | Edit1.AnchorSide[akTop].Side:=asrTop; | |
| 53 | - | ||
| 54 | - | ||
| 65 | + | Edit1.AnchorSide[akTop].Control:=Label1; | |
| 66 | + | Edit1.Anchors:=Edit1.Anchors+[akTop]; | |
| 55 | 67 | ``` | |
| 56 | 68 | ||
| 57 | - | ||
| 58 | - | ||
| 59 | - | ||
| 69 | + | Das selbe kann mit der Methode gemacht werden: | |
| 70 | + | ``` | |
| 60 | 71 | Edit1.AnchorParallel(akTop,0,Label1); | |
| 61 | 72 | ``` | |
| 62 | 73 | ||
| 63 | 74 | # Beispiel 3 | |
| 64 | 75 | ||
| 65 | - | ||
| 66 | - | ||
| 67 | - | ||
| 76 | + | Vertikale Zentrierung von Label1 an Edit1: | |
| 77 | + | ``` | |
| 78 | + | +-------+ | |
| 68 | 79 | +--------+ | | | |
| 69 | 80 | | Label1 | | Edit1 | | |
| 70 | 81 | +--------+ | | | |
| 71 | 82 | +-------+ | |
| 72 | - | ||
| 73 | - | ||
| 83 | + | ``` | |
| 84 | + | ``` | |
| 74 | 85 | Edit1.AnchorSide[akTop].Side:=asrCenter; | |
| 75 | - | ||
| 76 | - | ||
| 86 | + | Edit1.AnchorSide[akTop].Control:=Label1; | |
| 87 | + | Edit1.Anchors:=Edit1.Anchors+[akTop]-[akBottom]; | |
| 77 | 88 | ``` | |
| 78 | 89 | ||
| 79 | - | ||
| 80 | - | ||
| 81 | - | ||
| 90 | + | Das selbe kann mit der Methode gemacht werden: | |
| 91 | + | ``` | |
| 82 | 92 | Edit1.AnchorVerticalCenterTo(Label1); | |
| 83 | 93 | ``` | |
| 84 | 94 | ||
| 85 | - | ||
| 95 | + | Offensichtlich ist die Verankerung der unteren Seite von Edit1 bei einer Zentrierung nicht sinnvoll. | |
| 86 | 96 | ||
| 87 | 97 | # Neue Eigenschaft | |
| 88 | - | ||
| 89 | - | ||
| 98 | + | ``` | |
| 90 | 99 | property AnchorSide[Kind: TAnchorKind]: TAnchorSide read GetAnchorSide; | |
| 91 | 100 | ``` | |
| 92 | 101 | ||
| 93 | - | ||
| 102 | + | Dies wird nicht im Objektinspektor veröffentlicht. Sie können sie zur Entwicklungszeit mit dem Ankereditor bearbeiten (Menü: Ansicht -> Ankereditor anzeigen, oder auf den Button der 'Anchors' Eigenschaft klicken). | |
| 94 | 103 | ||
| 95 | 104 | # Neue Methoden zur einfachen Konfiguration eines gebräuchlichen Layouts | |
| 96 | - | ||
| 97 | - | ||
| 105 | + | ``` | |
| 98 | 106 | procedure AnchorToNeighbour(Side: TAnchorKind; Space: integer; | |
| 99 | - | ||
| 100 | - | ||
| 101 | - | ||
| 102 | - | ||
| 103 | - | ||
| 104 | - | ||
| 107 | + | Sibling: TControl); | |
| 108 | + | procedure AnchorParallel(Side: TAnchorKind; Space: integer; | |
| 109 | + | Sibling: TControl); | |
| 110 | + | procedure AnchorHorizontalCenterTo(Sibling: TControl); | |
| 111 | + | procedure AnchorVerticalCenterTo(Sibling: TControl); | |
| 112 | + | procedure AnchorAsAlign(TheAlign: TAlign; Space: Integer); | |
| 105 | 113 | ``` | |
| 106 | 114 | ||
| 107 | - | ||
| 115 | + | AnchorVerticalCenterTo arbetet auch mit Eltern. Dann wird auf den Client-Bereich zentriert, das bedeutet die Mitte des Steuerelements ist bei _ClientHeight div 2_. | |
| 108 | 116 | ||
| 109 | - | ||
| 117 | + | Das zentrierte Verankern ist noch nicht vollständig unterstützt für die Berechnung der Größe der Eltern. Wenn Sie beispielsweise ein Label in einer Groupbox1 zentriert verankern und Groupbox1.AutoSize auf true setzen, dann schrumpft die Höhe der Groupbox1 und läßt keinen Platz für das Label. Die Lösung besteht darin, auf ein Steuerelement zu zentrieren, das selbst nicht zentriert ist. Zum Beispiel zentriere ein Label1 auf eine ComboBox und nimm für die ComboBox die vorgegebenen Anker (Anchors=[akLeft,akTop]). | |
| 110 | 118 | ||
| 111 | 119 | # Verankern an unsichtbaren Kontrollelementen | |
| 112 | 120 | ||
| 113 | - | ||
| 114 | - | ||
| 115 | - | ||
| 116 | - | ||
| 117 | - | ||
| 118 | - | ||
| 119 | - | ||
| 121 | + | Ab Version 0.9.25 rev 12800 wurde das Verankern an unsichtbaren Kontrollelemente geändert, damit es intuitiver arbeitet. Beispiel: Die Kontrollelemente A, B und C sind wie folgt verankert (C.Left an B.Right und B.Left an A.Right): | |
| 122 | + | ``` | |
| 123 | + | +---+ +---+ +---+ | |
| 124 | + | | A | | B | | C | | |
| 125 | + | +---+ +---+ +---+ | |
| 126 | + | ``` | |
| 120 | 127 | ||
| 121 | - | ||
| 122 | - | ||
| 123 | - | ||
| 128 | + | Ist B unsichtbar (Visible:=false), wird C.Left B überspringen und sich an der rechten Seite von A verankern, womit das Ganze dann so aussieht: | |
| 129 | + | ``` | |
| 130 | + | +---+ +---+ | |
| 131 | + | | A | | C | | |
| 132 | + | +---+ +---+ | |
| 133 | + | ``` | |
| 124 | 134 | ||
| 125 | 135 | # Zirkuläre Bezüge | |
| 126 | 136 | ||
| 127 | - | ||
| 128 | - | ||
| 129 | - | ||
| 137 | + | Sie erhalten einen Zirkularbezug, wenn Sie zwei Seiten an der jeweils anderen verankern. Dies liefert eine unmögliche Verankerung. Die LCL bemerkt das, löst aber keine Exception aus, weil es sich um einen temporären Kreis handeln könnte. Zum Beispiel: Eine Reihe von Schaltflächen. Button1 ist links von Button2, Button2 ist links von Button3. Jetzt verändern wir die Reihenfolge zu: Button3, Button1, Button2. Wenn die Verankerung mit Button3 startet, entsteht ein temporärer Kreis der aufgelöst wird, wenn das Umordnen abgeschlossen ist. Die LCL entdeckt Kreise und wird den Button nicht verschieben. Kreise sind nicht die einzige Anomalie. | |
| 130 | 138 | ||
| 131 | - | ||
| 139 | + | Es gibt eine Ausnahme zu dieser Regel. Wenn Parent.AutoSize wahr ist, dann bricht die LCL beim Autosize Kreise automatisch auf und schreibt eine Warnung über debugln (Windows: --debug-log.txt, Linux, et al: stdout). Welcher Anker aufgebrochen wird hängt von der Reihenfolge der Steuerelemente und der Seiten ab. Deshalb sind temporäre Kreise erlaubt mit AutoSize:=true wenn Sie die Änderungen einschließen in | |
| 140 | + | ``` | |
| 132 | 141 | Parent.DisableAutosizing; | |
| 133 | - | ||
| 134 | - | ||
| 135 | - | ||
| 136 | - | ||
| 137 | - | ||
| 142 | + | try | |
| 143 | + | // change anchors, aligns, bounds... | |
| 144 | + | finally | |
| 145 | + | Parent.EnableAutosizing; | |
| 146 | + | end; | |
| 138 | 147 | ``` | |
| 139 | 148 | ||
| 140 | - | ||
| 149 | + | Der AutoSize-Algorithmus bricht nicht nur Kreisbezüge auf, sondern beseitigt auch Inkonsistenzen mit Align/AnchorSide. | |
| 141 | 150 | ||
| 142 | - | ||
| 151 | + | Eventuell wäre es günstig, im Designer Hinweise darauf einzufügen oder ein Werkzeug zum Auflisten der Kreisbezüge und Inkonsistenzen. | |
| 143 | 152 | ||
| 144 | 153 | # Siehe auch | |
| 145 | 154 | ||
| 146 | - | ||
| 147 | - | ||
| 148 | - | ||
| 155 | + | * [[Autosize / Layout]] | |
| 156 | + | * [[LCL AutoSizing]] | |
| 157 | + | * [[Example: Anchors. How to reliably align dynamically created controls under changing visibility]] | |
| 149 | 158 | ||
| 150 | 159 | --- | |
| 151 | - | ||
| 152 | - | ||
| 160 | + | *From the Free Pascal wiki, page "Anchor Sides/de", as the Internet Archive kept it on 2023-01-27. Copyright stays with the author who wrote it, according to the old wiki's [[Licensing]] page. If you have concerns about this material, [message the admin](/wiki-contact).* |