Difference between revisions of "TSplitter"
(11 intermediate revisions by 4 users not shown) | |||
Line 1: | Line 1: | ||
{{TSplitter}} | {{TSplitter}} | ||
− | |||
− | |||
− | |||
− | + | A [[TSplitter]] [[image:tsplitter.png]] is a component that can be placed on a panel or form as vertical or horizontal bar to separate sub-panels functionally. | |
− | The | + | 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]]. |
− | It | ||
− | TSplitter can work basically in two different modes: via [[ | + | TSplitter can work basically in two different modes: via [[Autosize / Layout#Align|Align]] (the [[Delphi]] way) or via [[Autosize / Layout#Anchor_Sides|AnchorSides]] (not supported by Delphi). |
− | |||
− | |||
+ | ==Splitter and Align== | ||
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. | 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. | ||
− | |||
The following example demonstrates this. | The following example demonstrates this. | ||
− | == | + | ===Design time=== |
− | + | #create a new [[TForm|form]] | |
− | #create a new form | + | #drop a [[TMemo]] on a form (left click on the TMemo icon in component palette to select, then left click on the form) |
− | #drop a TMemo on a form (left click on the TMemo icon in component | + | #set in [[IDE_Window:_Object Inspector|Object Inspector]] Align of Memo1 to <syntaxhighlight lang="pascal" inline>alLeft</syntaxhighlight>. |
− | #set in Object Inspector Align of Memo1 to alLeft. | ||
#drop a TSplitter on a form | #drop a TSplitter on a form | ||
− | #the default Align is already alLeft | + | #the default Align is already <syntaxhighlight lang="pascal" inline>alLeft</syntaxhighlight> |
#drop another TMemo on the form. | #drop another TMemo on the form. | ||
− | #set in Object Inspector Align of Memo2 to | + | #set in Object Inspector Align of Memo2 to <syntaxhighlight lang="pascal" inline>alClient</syntaxhighlight>. |
− | |||
− | |||
− | |||
− | <syntaxhighlight> | ||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | </syntaxhighlight> | ||
− | |||
− | |||
− | <syntaxhighlight> | + | ===[[runtime|Run time]]=== |
+ | You can also perform the same actions as above in code instead of in the designer/Object Inspector: | ||
+ | <syntaxhighlight lang="Pascal"> | ||
procedure TMainForm.FormCreate(Sender: TObject); | procedure TMainForm.FormCreate(Sender: TObject); | ||
var | var | ||
Line 92: | Line 52: | ||
</syntaxhighlight> | </syntaxhighlight> | ||
− | =Splitter with AnchorSides= | + | ==Splitter with AnchorSides== |
− | |||
Anchor sides allows more fine tuned layouts. Align fills all the space. AnchorSides allow to anchor controls to any other sibling control. | Anchor sides allows more fine tuned layouts. Align fills all the space. AnchorSides allow to anchor controls to any other sibling control. | ||
− | == | + | ===Design time=== |
− | + | #create a new [[TForm|form]] | |
− | #create a new form | + | #drop a [[TMemo]] on a form (left click on the TMemo icon in component paletter to select, then left click on the form) |
− | #drop a TMemo on a form (left click on the TMemo icon in component paletter to select, then left click on the form) | + | #set in Object Inspector Align of Memo1 to <syntaxhighlight lang="pascal" inline>alLeft</syntaxhighlight> |
− | #set in Object Inspector Align of Memo1 to alLeft | ||
#drop a TSplitter on a form | #drop a TSplitter on a form | ||
− | #set the Align property of the Splitter1 to alNone | + | #set the Align property of the Splitter1 to <syntaxhighlight lang="pascal" inline>alNone</syntaxhighlight> |
#select the Memo1 | #select the Memo1 | ||
#View -> Anchor Editor | #View -> Anchor Editor | ||
#anchor the right side of Memo1 to the Splitter1 | #anchor the right side of Memo1 to the Splitter1 | ||
#drop another TMemo on the form. | #drop another TMemo on the form. | ||
− | #set the Align property of Memo2 to alRight. | + | #set the Align property of Memo2 to <syntaxhighlight lang="pascal" inline>alRight</syntaxhighlight>. |
#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). | #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). | ||
− | == | + | ===Run time=== |
− | + | You can also perform the same actions as above in code instead of in the designer/Object Inspector: | |
− | + | <syntaxhighlight lang="Pascal"> | |
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | <syntaxhighlight> | ||
procedure TMainForm.FormCreate(Sender: TObject); | procedure TMainForm.FormCreate(Sender: TObject); | ||
var | var | ||
Line 186: | Line 102: | ||
</syntaxhighlight> | </syntaxhighlight> | ||
− | [[ | + | == see also == |
− | [[ | + | * [[doc:lcl/extctrls/tsplitter.html|TSplitter doc]] |
− | + | * [[TPairSplitter]] | |
+ | |||
+ | {{LCL Components}} |
Revision as of 17:23, 6 August 2022
│
Deutsch (de) │
English (en) │
suomi (fi) │
français (fr) │
русский (ru) │
A TSplitter is a component that can be placed on a panel or form as vertical or horizontal bar to separate sub-panels functionally.
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.
TSplitter can work basically in two different modes: via Align (the Delphi way) or via AnchorSides (not supported by Delphi).
Splitter and Align
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.
The following example demonstrates this.
Design time
- create a new form
- drop a TMemo on a form (left click on the TMemo icon in component palette to select, then left click on the form)
- set in Object Inspector Align of Memo1 to
alLeft
. - drop a TSplitter on a form
- the default Align is already
alLeft
- drop another TMemo on the form.
- set in Object Inspector Align of Memo2 to
alClient
.
Run time
You can also perform the same actions as above in code instead of in the designer/Object Inspector:
procedure TMainForm.FormCreate(Sender: TObject);
var
Memo1: TMemo;
Splitter1: TSplitter;
Memo2: TMemo;
begin
Memo1:=TMemo.Create(Self);
with Memo1 do begin
Name:='Memo1';
Parent:=Self;
Align:=alLeft;
end;
Splitter1:=TSplitter.Create(Self);
with Splitter1 do begin
Name:='Splitter1';
Parent:=Self;
Left:=1; // position it right of Memo1
Align:=alLeft;
end;
Memo2:=TMemo.Create(Self);
with Memo2 do begin
Name:='Memo2';
Parent:=Self;
Align:=alClient;
end;
end;
Splitter with AnchorSides
Anchor sides allows more fine tuned layouts. Align fills all the space. AnchorSides allow to anchor controls to any other sibling control.
Design time
- create a new form
- drop a TMemo on a form (left click on the TMemo icon in component paletter to select, then left click on the form)
- set in Object Inspector Align of Memo1 to
alLeft
- drop a TSplitter on a form
- set the Align property of the Splitter1 to
alNone
- select the Memo1
- View -> Anchor Editor
- anchor the right side of Memo1 to the Splitter1
- drop another TMemo on the form.
- set the Align property of Memo2 to
alRight
. - 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).
Run time
You can also perform the same actions as above in code instead of in the designer/Object Inspector:
procedure TMainForm.FormCreate(Sender: TObject);
var
Memo1: TMemo;
Splitter1: TSplitter;
Memo2: TMemo;
begin
Memo1:=TMemo.Create(Self);
with Memo1 do begin
Name:='Memo1';
Parent:=Self;
Align:=alLeft;
end;
Splitter1:=TSplitter.Create(Self);
with Splitter1 do begin
Name:='Splitter1';
Parent:=Self;
Align:=alNone;
Left:=100; // some value
AnchorParallel(akBottom,0,Parent);
end;
Memo1.AnchorToNeighbour(akRight,0,Splitter1);
Memo2:=TMemo.Create(Self);
with Memo2 do begin
Name:='Memo2';
Parent:=Self;
Align:=alRight;
AnchorToNeighbour(akLeft,0,Splitter1);
end;
end;
see also