Sign in Join
Wiki copytemporary

TSplitter/de: what changed

Revision 1 to 2. Removed lines have a minus sign; added lines have a plus sign.

OldNewLine
1-Ein vertikaler oder horizontaler Balken auf einem Panel oder Formular platziert, um Unterpanel funktionell zu trennen\
1+[![lossy=false](/wiki-images/d/dd/SplitterAndPairSplitterExample.png)](</File:SplitterAndPairSplitterExample.png> "lossy=false")
22
3+
4+Ein vertikaler oder horizontaler Balken auf einem Panel oder Formular, um die Größenzuweisung (Breite oder Höhe) der beiden Hälften zur Laufzeit ändern zu können.
5+
36# TSplitter
47
5-Die LCL Komponente [TSplitter](http://lazarus-ccr.sourceforge.net/docs/lcl/extctrls/tsplitter.html) kann als visuelle Trennlinie zwischen zwei Hälften des Formulars verwendet werden und ermöglicht dem Benutzer diese entweder vertikal oder horizontal zu bewegen. Es ist in der Unit **ExtCtrls** definiert und befindet sich auf der IDE Komponentenpalette *Additional*.
8+Die LCL Komponente [TSplitter](<http://lazarus-ccr.sourceforge.net/docs/lcl/extctrls/tsplitter.html>) kann als visuelle Trennlinie zwischen zwei Hälften des Formulars verwendet werden und ermöglicht dem Benutzer diese entweder vertikal oder horizontal zu bewegen, um dadurch die Größe (Höhe oder Breite) jeder Hälfte zur Laufzeit zu verändern. Der Mauszeiger wird sein Aussehen über dem Splitter ändern, um anzuzeigen, dass eine Verschiebung möglich ist (Standard-Zeiger: crHSplit oder crVSplit). TSplitter ist in der Unit **ExtCtrls** definiert und befindet sich auf der IDE Komponentenpalette _Additional_.
69
7-TSplitter kann grundsätzlich in zwei verschiedenen Modi arbeiten: über [[Autosize / Layout|Align]] (ausrichten - analog Delphi) oder über [[Autosize / Layout|AnchorSides]] (nicht von Delphi unterstützt).
10+TSplitter kann grundsätzlich in zwei verschiedenen Modi arbeiten: über [[Autosize / Layout|Align]] (ausrichten - analog Delphi) oder über [[Autosize / Layout|AnchorSides]] (nicht von Delphi unterstützt).
811
912# Splitter und Align
1013
11-Align kann für viele einfache Layouts wie zwei Bedienelemente oder einer Reihe von Bedienelementen verwendet werden. Zum Beispiel, wenn sie frei bewegbare Bedienelemente, wie ein Memo oder Listbox benötigen.
14+Align kann für viele Layouts von einfachen Strukturen mit zwei Elementen bis hin zu mehreren verschachtelt-geteilten Bereichen verwendet werden. Dazu wird ein Bedienelement auf ein festes align eingestellt (alLeft, alRight, alTop, alBottom) während das andere eine veränderliche Größe mit alClient nutzen muss. Dazwischen wird der Splitter platziert und seine align-Eigenschaft auf den gleichen, festen Wert eingestellt wie das erste Bedienelement, dessen Größe veränderlich sein soll.
1215
13-Das folgende Beispiel zeigt dies.
16+Nutzt man als Bedienelemente einen Container wie zum Beispiel TPanel, lassen sich diese Bereiche auf die gleiche Art weiter unterteilen. Es entsteht am Ende ein hierarchisches, größenveränderliches Layout, das der Benutzer zur Laufzeit selbst anpassen kann.
1417
18+Das folgende Beispiel zeigt dies.
19+
1520## Mit Formdesigner
1621
17-1. erstellen Sie eine neue [[TForm/de|Form]]
18-2. fügen Sie dieser ein [[TMemo]] hinzu (zum auswählen Links-Klick auf das TMemo Symbol (Komponentenplatte Standard), dann Links-Klick auf die Form)
19-3. ändern Sie im Objekt Inspektor die Eigenschaft Align von Memo1 zu alLeft
20-4. fügen Sie ein TSplitter der Form hinzu
21-5. das Standard-Align ist bereits alLeft
22-6. fügen Sie erneut ein TMemo der Form hinzu
23-7. ändern Sie im Objekt Inspektor das Align von Memo2 zu alClient
22+ 1. erstellen Sie eine neue [[TForm/de|Form]]
23+ 2. fügen Sie dieser ein [[TMemo]] hinzu (zum auswählen Links-Klick auf das TMemo Symbol (Komponentenplatte Standard), dann Links-Klick auf die Form)
24+ 3. ändern Sie im Objekt-Inspektor die Eigenschaft Align von Memo1 zu **alLeft**
25+ 4. fügen Sie ein TSplitter der Form hinzu
26+ 5. das Standard-Align ist bereits alLeft
27+ 6. fügen Sie erneut ein TMemo der Form hinzu
28+ 7. ändern Sie im Objekt Inspektor das Align von Memo2 zu **alClient**
2429
2530## Das Gleiche als Code
26-
27-``` pascal
31+```
2832procedure TMainForm.FormCreate(Sender: TObject);
29-var
30- Memo1, Memo2: TMemo;
31- Splitter1: TSplitter;
32-begin
33- Memo1 := TMemo.Create(Self);
34- with Memo1 do begin
35- Name := 'Memo1';
36- Parent := Self;
37- Align := alLeft;
38- end;
39- Splitter1 := TSplitter.Create(Self);
40- with Splitter1 do begin
41- Name := 'Splitter1';
42- Parent := Self;
43- Left := 1; // position it right of Memo1
44- Align := alLeft;
45- end;
46- Memo2 := TMemo.Create(Self);
47- with Memo2 do begin
48- Name := 'Memo2';
49- Parent := Self;
50- Align := alClient;
51- end;
52-end;
33+ var
34+ Memo1, Memo2: TMemo;
35+ Splitter1: TSplitter;
36+ begin
37+ Memo1 := TMemo.Create(Self);
38+ with Memo1 do begin
39+ Name := 'Memo1';
40+ Parent := Self;
41+ Align := alLeft;
42+ end;
43+ Splitter1 := TSplitter.Create(Self);
44+ with Splitter1 do begin
45+ Name := 'Splitter1';
46+ Parent := Self;
47+ Left := Memo1.Width + 1; // position it on the right of Memo1
48+ Align := alLeft;
49+ end;
50+ Memo2 := TMemo.Create(Self);
51+ with Memo2 do begin
52+ Name := 'Memo2';
53+ Parent := Self;
54+ Align := alClient;
55+ end;
56+ end;
5357```
5458
59+## Platzverteilung im umgebenden Element
60+
61+[![lossy=false](/wiki-images/1/1b/SplitterVariationsAndResize.png)](</File:SplitterVariationsAndResize.png> "lossy=false")
62+
63+Die Verteilung der zur Verfügung stehenden Fläche aus dem umgebenden Element (z.B. die Form selbst oder ein TPanel) erfolgt bei der Verwndung der Align-Methode immer asymmetrisch: Nur der Bereich mit alClient erhält mehr Platz in beiden Richtungen. Der feste Bereich behält seine Größe in vertikaler oder horizontaler Richtung bei. Als Beispiel: Wird die Größe des Formulars verändert bleibt ein Element mit alLeft darin immer gleich breit, auch wenn ein Splitter ebenfalls mit alLeft daran anliegt.
64+
65+Eine symmetrische Größenänderung bei der der Splitter im Verhältnis zum umgebenden Element immer an der gleichen Stelle bleibt, muss mit Code-Unterstützung realisiert werden oder mit Hilfe der Seiten-Verankerung (AnchorSides).
66+
5567# Splitter mit AnchorSides
5668
57-AnchorSides (Seitenverankerung) ermöglicht ein feiner abgestimmtes Layout. Align füllt den ganzen Raum. AnchorSides erlauben, Bedienelemente an nebenan liegende Bedienelemente zu verankern.
69+AnchorSides (Seitenverankerung) ermöglicht ein feiner abgestimmtes Layout. AnchorSides erlauben, die Seiten bzw. Ränder von Bedienelementen an nebenan liegende Bedienelemente zu koppeln, so dass diese bei Größenveränderung automatisch mitverändert werden. Im Objekt-Inspektor lässt sich das Verhalten mit der Eigenschaft **Anchors** einstellen oder über das mit dem Button `...` erreichbare Bearbeitungs-Menü (ebenfalls erreichbar über Rechtsklick auf das Element im Designer unter dem Menüpunkt "Anker Editor"). Zu beachten ist, dass der Splitter auf Align **alNone** eingestellt ist, damit die Seiten-Verankerung wirkt.
5870
5971## Mit Formdesigner
6072
61-1. erstellen Sie eine neue [[TForm/de|Form]]
62-2. fügen Sie dieser ein [[TMemo]] hinzu (zum auswählen Links-Klick auf das TMemo Symbol (Komponentenplatte Standard), dann Links-Klick auf die Form)
63-3. ändern Sie im Objekt Inspektor die Eigenschaft Align von Memo1 zu alLeft
64-4. fügen Sie ein TSplitter der Form hinzu
65-5. ändern Sie die Eigenschaft Align von Splitter1 auf alNone
66-6. Klicken Sie auf Ihrer Form das Memo1 mit einem Rechtsklick an
67-7. und wählen Sie den Popupmenüpunkt "Ankereditor anzeigen" aus (alternativ: im Objektinspektor Button \[...\] bei Memo1 -\> Anchors)
68-8. verankern Sie die rechte Seite von Memo1 mit Splitter1
69-9. fügen Sie erneut ein TMemo der Form hinzu
70-10. ändern Sie im Objekt Inspektor das Align von Memo2 zu alRight
71-11. verankern Sie die linke Seite von Memo2 mit Splitter1. Stellen Sie sicher, dass Sie die rechte Seite von Splitter1 verankern (der Button auf dem Anker Editor unter der Combobox)
73+ 1. erstellen Sie eine neue [[TForm/de|Form]]
74+ 2. fügen Sie dieser ein [[TMemo]] hinzu (zum auswählen Links-Klick auf das TMemo Symbol (Komponentenplatte Standard), dann Links-Klick auf die Form)
75+ 3. ändern Sie im Objekt-Inspektor die Eigenschaft Align von **Memo1 zu alLeft**
76+ 4. fügen Sie ein **TSplitter** der Form hinzu
77+ 5. ändern Sie die Eigenschaft Align von **Splitter1 auf alNone**. (Beachte: **Splitter1.Top** muss 0 sein, das ist hier der Fall, weil der Standard Align=alLeft eingestellt war. **Splitter1.Anchors** muss auf [akTop, akBottom] eingestellt sein. Ist dies nicht der Fall, gibt es Darstellungsfehler beim rendern des Splitters, wenn die Form in der Größe verändert wird)
78+ 6. Klicken Sie auf Ihrer Form das Memo1 mit einem Rechtsklick an und wählen Sie "**Ankereditor** " im Popupmenü aus (Alternativ: Im Objektinspektor bei **Memo1.Anchors** den Button `...` benutzen)
79+ 7. verankern Sie die rechte Seite von Memo1 mit Splitter1 (Beachte: Buttons unterhalb der Combobox sind auf "rechte Seite mit linker Seite verankern" eingestellt; Siehe Tooltip des ersten Buttons von links)
80+ 8. fügen Sie erneut ein **TMemo** der Form hinzu
81+ 9. ändern Sie im Objekt-Inspektor das Align von **Memo2 zu alRight** (Hinweis: Im Anker-Editor ist dies gleichbedeutend mit "verankern mit: (nil)" in der Combobox, was hier dem Formular-Rand entspricht)
82+ 10. verankern Sie die linke Seite von Memo2 mit Splitter1 und benutzen die Buttons unterhalb der Combobox, um einzustellen, dass die linke Seite von Splitter1 mit der rechten Seite von Memo2 verbunden wird (3. Button von links, Tooltip "linke Seite mit rechter Seite verankern")
7283
73-## Das Gleiche als Code
84+Die Seiten sind damit in der Art verknüpft:
85+```
86+| **linker Rand** | **alLeft** linke Seite **[Memo1]** rechte Seite | linke Seite **[Splitter1]** rechte Seite | linkeSeite **[Memo2]** rechteSeite **alRight** | **rechter Rand** |
87+```
7488
75-``` pascal
89+## Das Gleiche als Code
90+```
7691procedure TMainForm.FormCreate(Sender: TObject);
77-var
78- Memo1, Memo2: TMemo;
79- Splitter1: TSplitter;
80-begin
81- Memo1 := TMemo.Create(Self);
82- with Memo1 do begin
83- Name := 'Memo1';
84- Parent := Self;
85- Align := alLeft;
86- end;
87- Splitter1 := TSplitter.Create(Self);
88- with Splitter1 do begin
89- Name := 'Splitter1';
90- Parent := Self;
91- Align := alNone;
92- Left := 100; // some value
93- AnchorParallel(akBottom, 0, Parent);
94- end;
95- Memo1.AnchorToNeighbour(akRight, 0, Splitter1);
96- Memo2 := TMemo.Create(Self);
97- with Memo2 do begin
98- Name := 'Memo2';
99- Parent := Self;
100- Align := alRight;
101- AnchorToNeighbour(akLeft, 0, Splitter1);
102- end;
103-end;
92+ var
93+ Memo1, Memo2: TMemo;
94+ Splitter1: TSplitter;
95+ begin
96+ Memo1 := TMemo.Create(Self);
97+ with Memo1 do begin
98+ Name := 'Memo1';
99+ Parent := Self;
100+ Align := alLeft;
101+ end;
102+ Splitter1 := TSplitter.Create(Self);
103+ with Splitter1 do begin
104+ Name := 'Splitter1';
105+ Parent := Self;
106+ Align := alNone;
107+ Left := 100; // some value
108+ AnchorParallel(akBottom, 0, Parent);
109+ end;
110+ Memo1.AnchorToNeighbour(akRight, 0, Splitter1);
111+ Memo2 := TMemo.Create(Self);
112+ with Memo2 do begin
113+ Name := 'Memo2';
114+ Parent := Self;
115+ Align := alRight;
116+ AnchorToNeighbour(akLeft, 0, Splitter1);
117+ end;
118+ end;
104119```
105120
121+## Platzverteilung im umgebenden Element
122+
123+Im Gegensatz zum Layout über die Align-Eigenschaft, wird der Platz bei Größenveränderung des umgebenden Elements gleichmäßig, symmetrisch an die beiden an den Splitter gekoppelten Bedienelemente verteilt.
124+
125+# Unterscheide zum TPairSplitter
126+
127+Lazarus (zur Zeit Version 3.6) bietet auch einen [[TPairSplitter]] an (ebenfalls in der 'Additionals' Sektion), der ähnlich einem [[TPanel]] platziert werden kann und die Trennlinie zur Größenverschiebung in der Mitte anzeigt. Die beiden Seiten können jeweils mit anderen Komponenten befüllt werden und beispielsweise mit **Align=alClient** in die verfügbare Fläche eingepasst werden. Über die Eigenschaft **TPairSplitter.Position** (Angabe in Pixeln) kann die Größenzuordnung ausgelesen und verändert werden. Zur Design-Zeit lässt sich der Trenner in der Mitte nicht mit der Maus verschieben (nur über die Position-Eigenschaft).
128+
129+Die Größenänderung verhält sich zur Laufzeit genau wie beim TSplitter. Wenn der umgebende Container in der Größe verändert wird, wird der Platz asymmetrisch verteilt und nur die Hälfte, die auf _clClient'_ eingestellt ist, erhält mehr Platz in beiden Richtungen. Das ist insbesondere einleuchtend, da die Positions-Eigenschaft einen absoluten Wert in Pixeln hat, der nicht automatisch neu berechnet wird.
130+
131+* * *
132+
133+| Gehe zurück zu: [[LCL Components/de\|LCL Components]] | — Komponente zuvor: [[TXMLPropStorage/de]] | Nächste Komponente: [[TBarChart/de]] |
134+|---|---|---|
135+
136+**[[LCL Components/de\|LCL Komponenten]]**
137+
138+| Komponenten Tab | Komponenten | |
139+|---|---|---|
140+| Standard | [[TMainMenu/de\|TMainMenu]] • [[TPopupMenu/de\|TPopupMenu]] • [[TButton/de\|TButton]] • [[TLabel/de\|TLabel]] • [[TEdit/de\|TEdit]] • [[TMemo/de\|TMemo]] • [[TToggleBox/de\|TToggleBox]] • [[TCheckBox/de\|TCheckBox]] • [[TRadioButton/de\|TRadioButton]] • [[TListBox/de\|TListBox]] • [[TComboBox/de\|TComboBox]] • [[TScrollBar/de\|TScrollBar]] • [[TGroupBox/de\|TGroupBox]] • [[TRadioGroup/de\|TRadioGroup]] • [[TCheckGroup/de\|TCheckGroup]] • [[TPanel]] • [[Frames\|TFrame]] • [[TActionList]] | |
141+| Additional | [[TBitBtn]] • [[TSpeedBtn]] • [[TStaticText]] • [[TImage]] • [[TShape]] • [[TBevel]] • [[TPaintBox]] • [[TNotebook]] • [[TLabeledEdit]] • TSplitter • [[TTrayIcon]] • [[TMaskEdit]] • [[TCheckListBox]] • [[TScrollBox]] • [[TApplicationProperties]] • [[TStringGrid]] • [[TDrawGrid]] • [[TPairSplitter]] • [[TColorBox]] • [[TColorListBox]] • [[TValueListEditor]] | |
142+| Common Controls | [[TTrackBar]] • [[TProgressBar]] • [[TTreeView]] • [[TListView]] • [[TStatusBar]] • [[TToolBar]] • [[TUpDown]] • [[TPageControl]] • [[TTabControl]] • [[THeaderControl]] • [[TImageList]] • [[TPopupNotifier]] | |
143+| Dialogs | [[TOpenDialog]] • [[TSaveDialog]] • [[TSelectDirectoryDialog]] • [[TColorDialog]] • [[TFontDialog]] • [[TFindDialog]] • [[TReplaceDialog]] • [[TOpenPictureDialog]] • [[TSavePictureDialog]] • [[TCalendarDialog]] • [[TCalculatorDialog]] • [[TPrinterSetupDialog]] • [[TPrintDialog]] • [[TPageSetupDialog]] | |
144+| Data Controls | [[TDBNavigator]] • [[TDBText]] • [[TDBEdit]] • [[TDBMemo]] • [[TDBImage]] • [[TDBListBox]] • [[TDBLookupListBox]] • [[TDBComboBox]] • [[TDBLookupComboBox]] • [[TDBCheckBox]] • [[TDBRadioGroup]] • [[TDBCalendar]] • [[TDBGroupBox]] • [[TDBGrid]] | |
145+| System | [[TTimer]] • [[TIdleTimer]] • [[TLazComponentQueue]] • [[THTMLHelpDatabase]] • [[THTMLBrowserHelpViewer]] • [[TAsyncProcess]] • [[TProcessUTF8]] • [[TProcess]] • [[TSimpleIPCClient]] • [[TXMLConfig]] • [[TEventLog]] • [[TServiceManager]] | |
146+| Misc | [[TColorButton]] • [[TSpinEdit]] • [[TFloatSpinEdit]] • [[TArrow]] • [[TCalendar]] • [[TEditButton]] • [[TFileNameEdit]] • [[TDirectoryEdit]] • [[TDateEdit]] • [[TCalcEdit]] • [[TFileListBox]] • [[TFilterComboBox]] • [[TXMLPropStorage/de\|TXMLPropStorage]] • [[TINIPropStorage/de\|TINIPropStorage]] • [[TBarChart]] • [[TButtonPanel]] • [[TShellTreeView]] • [[TShellListView]] • [[TIDEDialogLayoutStorage]] | |
147+| Data Access | [[TDatasource]] • [[TBufDataset]] • [[TMemDataset]] • [[TSdfDataset]] • [[TFixedFormatDataSet]] • [[TDbf]] | |
148+| SynEdit | [[TSynEdit]] • [[TSynMemo]] • [[TSynCompletion]] • [[TSynAutoComplete]] • [[TSynMacroRecorder]] • [[TSynExporterHTML]] • [[TsynPluginSyncroEdit]] • [[TSynPasSyn]] • [[TSynFreePascalSyn]] • [[TSynCppSyn]] • [[TSynJavaSyn]] • [[TSynPerlSyn]] • [[TSynHTMLSyn]] • [[TSynXMLSyn]] • [[TSynLFMSyn]] • [[TSynDiffSyn]] • [[TSynUNIXShellScriptSyn]] • [[TSynCssSyn]] • [[TSynPHPSyn]] • [[TSynTeXSyn]] • [[TSynSQLSyn]] • [[TSynPythonSyn]] • [[TSynVBSyn]] • [[TSynAnySyn]] • [[TSynMultiSyn]] • [[TSynBatSyn]] • [[TSynIniSyn]] • [[TSynPoSyn]] | |
149+| LazControls | [[TDividerBevel]] • [[TExtendedNotebook]] • [[TListFilterEdit]] • [[TTreeFilterEdit]] | |
150+| RTTI | [[TTIEdit]] • [[TTIComboBox]] • [[TTIButton]] • [[TTICheckBox]] • [[TTILabel]] • [[TTIGroupBox]] • [[TTIRadioGroup]] • [[TTICheckGroup]] • [[TTICheckListBox]] • [[TTIListBox]] • [[TTIMemo]] • [[TTICalendar]] • [[TTIImage]] • [[TTIFloatSpinEdit]] • [[TTISpinEdit]] • [[TTITrackBar]] • [[TTIProgressBar]] • [[TTIMaskEdit]] • [[TTIColorButton]] • [[TMultiPropertyLink]] • [[TTIPropertyGrid]] • [[TTIGrid]] | |
151+| IPro | [[TIpFileDataProvider]] • [[TIpHtmlPanel]] | |
152+| Chart | [[TChart]] • [[TListChartSource]] [[TRandomChartSource]] • [[TUserDefinedChartSource]] • [[TCalculatedChartSource]] • [[TDbChartSource]] • [[TChartToolset]] • [[TChartAxisTransformations]] • [[TChartStyles]] • [[TChartLegendPanel]] • [[TChartNavScrollBar]] • [[TChartNavPanel]] • [[TIntervalChartSource]] • [[TDateTimeIntervalChartSource]] • [[TChartListBox]] • [[TChartExtentLink]] • [[TChartImageList]] | |
153+| SQLdb | [[TSQLQuery]] • [[TSQLTransaction]] • [[TSQLScript]] • [[TSQLConnector]] • [[TMSSQLConnection]] • [[TSybaseConnection]] •[[TPQConnection]] • [[TPQTEventMonitor]] • [[TOracleConnection]] • [[TODBCConnection]] • [[TMySQL40Connection]] • [[TMySQL41Connection]] • [[TMySQL50Connection]] • [[TMySQL51Connection]] • [[TMySQL55Connection]] • [[TMySQL56Connection]] • [[TSQLite3Connection]] • [[TIBConnection]] • [[TFBAdmin]] • [[TFBEventMonitor]] • [[TSQLDBLibraryLoader]] | |
154+
106155---
107-*From the Free Pascal wiki, page "TSplitter/de", as it stood on 2020-03-02 after a change by Trev, out of the wiki's dump of 2024-05-26. 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).*
156+*From the Free Pascal wiki, page "TSplitter/de", as the Internet Archive kept it on 2025-01-25, last changed on 2024-11-17. 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).*

Back to history