TSplitter

│ Deutsch (de) │ English (en) │ suomi (fi) │ français (fr) │ 日本語 (ja) │ русский (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

1. create a new form
2. drop a TMemo on a form (left click on the TMemo icon in component palette 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.

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

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).

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;

Color of splitter

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.

  Splitter1.OnPaint:= @SplitterOnPaintDummy;
  Splitter1.Color:= clGreen;
  ....
     
procedure TfmMain.SplitterOnPaintDummy(Sender: TObject);
begin
  //empty, to disable themed paint
end;

See also

• TSplitter doc
• TPairSplitter