Sign in Join
Wiki copytemporary

TSplitter: what changed

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

OldNewLine
1-A [[TSplitter]] ![](/wiki-images/0/03/Tsplitter.png) is a component that can be placed on a panel or form as vertical or horizontal bar to separate sub-panels functionally.
1+[![lossy=false](/wiki-images/d/dd/SplitterAndPairSplitterExample.png)](</File:SplitterAndPairSplitterExample.png> "lossy=false")
22
3-The control can be used as a visual separator between two halves of your form and allows the user of your application to move it either vertically or horizontally. It can be found on the [[Additional tab]] of the [[Component Palette]].
3+TSplitter [![tsplitter.png](/wiki-images/e/e6/tsplitter.png)](</File:tsplitter.png>) provides a sliding divider to change the size distribution of adjacently positioned components during run-time, either vertically or horizontally.
44
5-TSplitter can work basically in two different modes: via [[Autosize / Layout|Align]] (the [[Delphi]] way) or via [[Autosize / Layout|AnchorSides]] (not supported by Delphi).
5+The control can be used as a visual separator between two halves of your form or other container and allows the user of your application to move it either vertically or horizontally. It can be found on the [[Additional tab]] of the [[Component Palette]].
66
7+TSplitter can work basically in two different modes: via [[Autosize / Layout|Align]] (the [[Delphi]] way) or via [[Autosize / Layout|AnchorSides]] (not supported by Delphi).
8+
79## Splitter and Align
810
9-Align can be used for many simple layouts like two controls or a row of controls. For example when you need some freely resizable controls like a memo and a listbox.
11+Align can be used for many simple layouts like two controls or a row of controls. For example when you need some freely resizable controls like a memo and a listbox side-by-side.
1012
11-The following example demonstrates this.
13+The following example demonstrates this.
1214
1315### Design time
1416
15-1. create a new [[TForm|form]]
16-2. drop a [[TMemo]] on a form (left click on the TMemo icon in component palette to select, then left click on the form)
17-3. set in [[IDE Window: Object Inspector|Object Inspector]] Align of Memo1 to `alLeft`.
18-4. drop a TSplitter on a form
19-5. the default Align is already `alLeft`
20-6. drop another TMemo on the form.
21-7. set in Object Inspector Align of Memo2 to `alClient`.
22-
23-### [[runtime|Run time]]
17+ 1. create a new [[TForm|form]]
18+ 2. drop a [[TMemo]] on a form (left click on the TMemo icon in component palette to select, then left click on the form)
19+ 3. set in [[IDE Window: Object Inspector|Object Inspector]] Align of Memo1 to `alLeft`.
20+ 4. drop a TSplitter on a form
21+ 5. the default Align is already `alLeft`
22+ 6. drop another TMemo on the form.
23+ 7. set in Object Inspector Align of Memo2 to `alClient`.
2424
25-You can also perform the same actions as above in code instead of in the designer/Object Inspector:
25+### Run time
2626
27-``` Pascal
27+You can also perform the same actions as above in code instead of in the designer/Object Inspector:
28+```
2829procedure TMainForm.FormCreate(Sender: TObject);
29-var
30- Memo1: TMemo;
31- Splitter1: TSplitter;
32- Memo2: TMemo;
33-begin
34- Memo1:=TMemo.Create(Self);
35- with Memo1 do begin
36- Name:='Memo1';
37- Parent:=Self;
38- Align:=alLeft;
39- end;
40- Splitter1:=TSplitter.Create(Self);
41- with Splitter1 do begin
42- Name:='Splitter1';
43- Parent:=Self;
44- Left:=1; // position it right of Memo1
45- Align:=alLeft;
46- end;
47- Memo2:=TMemo.Create(Self);
48- with Memo2 do begin
49- Name:='Memo2';
50- Parent:=Self;
51- Align:=alClient;
52- end;
53-end;
30+ var
31+ Memo1: TMemo;
32+ Splitter1: TSplitter;
33+ Memo2: TMemo;
34+ begin
35+ Memo1:=TMemo.Create(Self);
36+ with Memo1 do begin
37+ Name:='Memo1';
38+ Parent:=Self;
39+ Align:=alLeft;
40+ end;
41+ Splitter1:=TSplitter.Create(Self);
42+ with Splitter1 do begin
43+ Name:='Splitter1';
44+ Parent:=Self;
45+ Left:=1; // position it right of Memo1
46+ Align:=alLeft;
47+ end;
48+ Memo2:=TMemo.Create(Self);
49+ with Memo2 do begin
50+ Name:='Memo2';
51+ Parent:=Self;
52+ Align:=alClient;
53+ end;
54+ end;
5455```
5556
5657## Splitter with AnchorSides
5758
58-Anchor sides allows more fine tuned layouts. Align fills all the space. AnchorSides allow to anchor controls to any other sibling control.
59+Anchor sides allows more fine tuned layouts. AnchorSides allow to anchor controls to other sibling control positioned next to it. Increasing client area space will be distributed evenly between the anchored elements.
5960
6061### Design time
6162
62-1. create a new [[TForm|form]]
63-2. drop a [[TMemo]] on a form (left click on the TMemo icon in component paletter to select, then left click on the form)
64-3. set in Object Inspector Align of Memo1 to `alLeft`
65-4. drop a TSplitter on a form
66-5. set the Align property of the Splitter1 to `alNone`
67-6. select the Memo1
68-7. View -\> Anchor Editor
69-8. anchor the right side of Memo1 to the Splitter1
70-9. drop another TMemo on the form.
71-10. set the Align property of Memo2 to `alRight`.
72-11. anchor the left side of Memo2 to Splitter1. Make sure to anchor to the right side of Splitter1 (the button on the Anchor editor below the combobox).
63+ 1. create a new [[TForm|form]]
64+ 2. drop a [[TMemo]] on a form (left click on the TMemo icon in component paletter to select, then left click on the form)
65+ 3. set in Object Inspector Align of Memo1 to `alLeft`
66+ 4. drop a TSplitter on a form
67+ 5. set the Align property of the Splitter1 to `alNone`. Make sure the position is set to **top=0** \- this is the case here because the default setting was align=clLeft which auto positioned and resized the splitter properly. Also make sure the splitter is set to **anchors=[akTop, akBottom]** in order to make the splitter resize itself automatically. If either option is not set correctly, there will be rendering issues with the TSplitter if the form gets resized.
68+ 6. select the Memo1
69+ 7. View -> Anchor Editor
70+ 8. anchor the right side of Memo1 to the Splitter1
71+ 9. drop another TMemo on the form.
72+ 10. set the Align property of Memo2 to `alRight`.
73+ 11. anchor the left side of Memo2 to Splitter1. Make sure to anchor to the right side of Splitter1 to the left side of Memo2 (use the buttons on the Anchor editor below the combobox. It is the last button in the row, check the tooltips).
7374
74-### Run time
75+The anchors are now chained in a configuration like this:
76+```
77+| **left border** | alLeft left side **[Memo1]** right side | left side **[Splitter1]** right side | left side **[Memo2]** rightside alRight | **right border** |
78+```
7579
76-You can also perform the same actions as above in code instead of in the designer/Object Inspector:
80+### Run time
7781
78-``` Pascal
82+You can also perform the same actions as above in code instead of in the designer/Object Inspector:
83+```
7984procedure TMainForm.FormCreate(Sender: TObject);
80-var
81- Memo1: TMemo;
82- Splitter1: TSplitter;
83- Memo2: TMemo;
84-begin
85- Memo1:=TMemo.Create(Self);
86- with Memo1 do begin
87- Name:='Memo1';
88- Parent:=Self;
89- Align:=alLeft;
90- end;
91- Splitter1:=TSplitter.Create(Self);
92- with Splitter1 do begin
93- Name:='Splitter1';
94- Parent:=Self;
95- Align:=alNone;
96- Left:=100; // some value
97- AnchorParallel(akBottom,0,Parent);
98- end;
99- Memo1.AnchorToNeighbour(akRight,0,Splitter1);
100- Memo2:=TMemo.Create(Self);
101- with Memo2 do begin
102- Name:='Memo2';
103- Parent:=Self;
104- Align:=alRight;
105- AnchorToNeighbour(akLeft,0,Splitter1);
106- end;
107-end;
85+ var
86+ Memo1: TMemo;
87+ Splitter1: TSplitter;
88+ Memo2: TMemo;
89+ begin
90+ Memo1:=TMemo.Create(Self);
91+ with Memo1 do begin
92+ Name:='Memo1';
93+ Parent:=Self;
94+ Align:=alLeft;
95+ end;
96+ Splitter1:=TSplitter.Create(Self);
97+ with Splitter1 do begin
98+ Name:='Splitter1';
99+ Parent:=Self;
100+ Align:=alNone;
101+ Left:=100; // some value
102+ AnchorParallel(akBottom,0,Parent);
103+ end;
104+ Memo1.AnchorToNeighbour(akRight,0,Splitter1);
105+ Memo2:=TMemo.Create(Self);
106+ with Memo2 do begin
107+ Name:='Memo2';
108+ Parent:=Self;
109+ Align:=alRight;
110+ AnchorToNeighbour(akLeft,0,Splitter1);
111+ end;
112+ end;
108113```
109114
110-## Color of splitter
111-
112-By default, TSplitter has themed painting. So assigning to Color property won't help to change the color. But if you assign dummy OnPaint event, themed painting will be disabled.
115+## Suppressing default gripper knobs rendering
113116
114-``` pascal
115- Splitter1.OnPaint:= @SplitterOnPaintDummy;
116- Splitter1.Color:= clGreen;
117- ....
118-
119-procedure TfmMain.SplitterOnPaintDummy(Sender: TObject);
120-begin
121- //empty, to disable themed paint
122-end;
117+By default, TSplitter has a themed painting showing a beveled gripper element in the middle. But if you assign a dummy OnPaint event, themed painting will be disabled and the splitter appears flat.
123118```
119+....
120+
121+ Splitter1.OnPaint:= @SplitterOnPaintDummy;
122+
123+ procedure TfmMain.SplitterOnPaintDummy(Sender: TObject);
124+ begin
125+ //empty, to disable themed painting
126+ end;
127+```
124128
129+## Resize Behaviour
130+
131+[![lossy=false](/wiki-images/1/1b/SplitterVariationsAndResize.png)](</File:SplitterVariationsAndResize.png> "lossy=false")
132+
133+Using a TSplitter (or a TPairSplitter for that matter) will result in additional space being distributed mainly to the clClient aligned side when resizing a form. The fixed aligned side (alLeft, alRight, alBottom, alTop depending on the orientation of the splitter) will only receive more space in one direction, not both at the same time. A control with alLeft will only resize vertically and maintain its current width for example.
134+
135+To have additional space being distributed to both controls evenly, you have to either provide supplemental code for this or use the anchor sides method.
136+
125137## See also
126138
127-- [[doc:lcl/extctrls/tsplitter.html|TSplitter doc]]
128-- [[TPairSplitter]]
139+ * [TSplitter doc](<http://lazarus-ccr.sourceforge.net/docs/lcl/extctrls/tsplitter.html> "doc:lcl/extctrls/tsplitter.html")
140+ * [[TPairSplitter]]
129141
142+
143+
144+[[LCL Components]] Component Tab | Components
145+---|---
146+[[Standard tab|Standard]] | [[TMainMenu]] • [[TPopupMenu]] • [[TButton]] • [[TLabel]] • [[TEdit]] • [[TMemo]] • [[TToggleBox]] • [[TCheckBox]] • [[TRadioButton]] • [[TListBox]] • [[TComboBox]] • [[TScrollBar]] • [[TGroupBox]] • [[TRadioGroup]] • [[TCheckGroup]] • [[TPanel]] • [[TFrame]] • [[TActionList]]
147+[[Additional tab|Additional]] | [[TBitBtn]] • [[TSpeedButton]] • [[TStaticText]] • [[TImage]] • [[TShape]] • [[TBevel]] • [[TPaintBox]] • [[TNotebook]] • [[TLabeledEdit]] • TSplitter • [[TTrayIcon]] • [[TControlBar]] • [[TFlowPanel]] • [[TMaskEdit]] • [[TCheckListBox]] • [[TScrollBox]] • [[TApplicationProperties]] • [[TStringGrid]] • [[TDrawGrid]] • [[TPairSplitter]] • [[TColorBox]] • [[TColorListBox]] • [[TValueListEditor]]
148+[[Common Controls tab|Common Controls]] | [[TTrackBar]] • [[TProgressBar]] • [[TTreeView]] • [[TListView]] • [[TStatusBar]] • [[TToolBar]] • [[TCoolBar]] • [[TUpDown]] • [[TPageControl]] • [[TTabControl]] • [[THeaderControl]] • [[TImageList]] • [[TPopupNotifier]] • [[TDateTimePicker]]
149+[[Dialogs tab|Dialogs]] | [[TOpenDialog]] • [[TSaveDialog]] • [[TSelectDirectoryDialog]] • [[TColorDialog]] • [[TFontDialog]] • [[TFindDialog]] • [[TReplaceDialog]] • [[TTaskDialog]] • [[TOpenPictureDialog]] • [[TSavePictureDialog]] • [[TCalendarDialog]] • [[TCalculatorDialog]] • [[TPrinterSetupDialog]] • [[TPrintDialog]] • [[TPageSetupDialog]]
150+[[Data Controls tab|Data Controls]] | [[TDBNavigator]] • [[TDBText]] • [[TDBEdit]] • [[TDBMemo]] • [[TDBImage]] • [[TDBListBox]] • [[TDBLookupListBox]] • [[TDBComboBox]] • [[TDBLookupComboBox]] • [[TDBCheckBox]] • [[TDBRadioGroup]] • [[TDBCalendar]] • [[TDBGroupBox]] • [[TDBGrid]] • [[TDBDateTimePicker]]
151+[[Data Access tab|Data Access]] | [[TDataSource]] • [[TCSVDataSet]] • [[TSdfDataSet]] • [[TBufDataset]] • [[TFixedFormatDataSet]] • [[TDbf]] • [[TMemDataset]]
152+[[System tab|System]] | [[TTimer]] • [[TIdleTimer]] • [[TLazComponentQueue]] • [[THTMLHelpDatabase]] • [[THTMLBrowserHelpViewer]] • [[TAsyncProcess]] • [[TProcessUTF8]] • [[TProcess]] • [[TSimpleIPCClient]] • [[TSimpleIPCServer]] • [[TXMLConfig]] • [[TEventLog]] • [[TServiceManager]] • [[TCHMHelpDatabase]] • [[TLHelpConnector]]
153+[[Misc tab|Misc]] | [[TColorButton]] • [[TSpinEdit]] • [[TFloatSpinEdit]] • [[TArrow]] • [[TCalendar]] • [[TEditButton]] • [[TFileNameEdit]] • [[TDirectoryEdit]] • [[TDateEdit]] • [[TTimeEdit]] • [[TCalcEdit]] • [[TFileListBox]] • [[TFilterComboBox]] • [[TComboBoxEx]] • [[TCheckComboBox]] • [[TButtonPanel]] • [[TShellTreeView]] • [[TShellListView]] • [[TXMLPropStorage]] • [[TINIPropStorage]] • [[TJSONPropStorage]] • [[TIDEDialogLayoutStorage]] • [[TMRUManager]] • [[TStrHolder]]
154+[[LazControls tab|LazControls]] | [[TCheckBoxThemed]] • [[TDividerBevel]] • [[TExtendedNotebook]] • [[TListFilterEdit]] • [[TListViewFilterEdit]] • [[TLvlGraphControl]] • [[TShortPathEdit]] • [[TSpinEditEx]] • [[TFloatSpinEditEx]] • [[TTreeFilterEdit]] • [[TExtendedTabControl]] •
155+[[RTTI tab|RTTI]] | [[TTIEdit]] • [[TTIComboBox]] • [[TTIButton]] • [[TTICheckBox]] • [[TTILabel]] • [[TTIGroupBox]] • [[TTIRadioGroup]] • [[TTICheckGroup]] • [[TTICheckListBox]] • [[TTIListBox]] • [[TTIMemo]] • [[TTICalendar]] • [[TTIImage]] • [[TTIFloatSpinEdit]] • [[TTISpinEdit]] • [[TTITrackBar]] • [[TTIProgressBar]] • [[TTIMaskEdit]] • [[TTIColorButton]] • [[TMultiPropertyLink]] • [[TTIPropertyGrid]] • [[TTIGrid]]
156+[[SQLdb tab|SQLdb]] | [[TSQLQuery]] • [[TSQLTransaction]] • [[TSQLScript]] • [[TSQLConnector]] • [[TMSSQLConnection]] • [[TSybaseConnection]] • [[TPQConnection]] • [[TPQTEventMonitor]] • [[TOracleConnection]] • [[TODBCConnection]] • [[TMySQL40Connection]] • [[TMySQL41Connection]] • [[TMySQL50Connection]] • [[TMySQL51Connection]] • [[TMySQL55Connection]] • [[TMySQL56Connection]] • [[TMySQL57Connection]] • [[TSQLite3Connection]] • [[TIBConnection]] • [[TFBAdmin]] • [[TFBEventMonitor]] • [[TSQLDBLibraryLoader]]
157+[[Pascal Script tab|Pascal Script]] | [[TPSScript]] • [[TPSScriptDebugger]] • [[TPSDllPlugin]] • [[TPSImport Classes]] • [[TPSImport DateUtils]] • [[TPSImport ComObj]] • [[TPSImport DB]] • [[TPSImport Forms]] • [[TPSImport Controls]] • [[TPSImport StdCtrls]] • [[TPSCustomPlugin]]
158+[[SynEdit tab|SynEdit]] | [[TSynEdit]] • [[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]]
159+[[Chart tab|Chart]] | [[TChart]] • [[TListChartSource]] • [[TRandomChartSource]] • [[TUserDefinedChartSource]] • [[TCalculatedChartSource]] • [[TDbChartSource]] • [[TChartToolset]] • [[TChartAxisTransformations]] • [[TChartStyles]] • [[TChartLegendPanel]] • [[TChartNavScrollBar]] • [[TChartNavPanel]] • [[TIntervalChartSource]] • [[TDateTimeIntervalChartSource]] • [[TChartListBox]] • [[TChartExtentLink]] • [[TChartImageList]]
160+[[IPro tab|IPro]] | [[TIpFileDataProvider]] • [[TIpHtmlDataProvider]] • [[TIpHttpDataProvider]] • [[TIpHtmlPanel]]
161+[[Virtual Controls tab|Virtual Controls]] | [[TVirtualDrawTree]] • [[TVirtualStringTree]] • [[TVTHeaderPopupMenu]]
162+
130163---
131-*From the Free Pascal wiki, page "TSplitter", as it stood on 2023-02-13 after a change by Alextp, 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).*
164+*From the Free Pascal wiki, page "TSplitter", as the Internet Archive kept it on 2025-11-22, 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