TSplitter

│ Deutsch (de) │ English (en) │ suomi (fi) │ français (fr) │ русский (ru) │

A vertical or horizontal bar placed on a panel or form, to separate sub-panels functionally

TSplitter

The LCL control TSplitter 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 is defined in unit ExtCtrls and on the IDE component palette page Additional.

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.

In Form designer

1. create a new form
2. drop a TMemo on a form (left click on the TMemo icon in component paletter to select, then left click on the form)
3. set in Object Inspector Align of Memo1 to alLeft.
4. drop a TSplitter on a form
5. the default Align is already alLeft
6. drop another TMemo on the form.
7. set in Object Inspector Align of Memo2 to alClient.

The same in code

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.

Example in IDE designer

1. create a new form
2. drop a TMemo on a form (left click on the TMemo icon in component paletter to select, then left click on the form)
3. set in Object Inspector Align of Memo1 to alLeft
4. drop a TSplitter on a form
5. set the Align property of the Splitter1 to alNone
6. select the Memo1
7. View -> Anchor Editor
8. anchor the right side of Memo1 to the Splitter1
9. drop another TMemo on the form.
10. set the Align property of Memo2 to alRight.
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).

In code

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;