TSplitter

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

TSplitter provides a sliding divider to change the size distribution of adjacently positioned components during run-time, either vertically or horizontally.

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.

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 side-by-side.

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

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

The anchors are now chained in a configuration like this:

| left border | alLeft left side [Memo1] right side | left side [Splitter1] right side | left side [Memo2] rightside alRight | right border |

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;

Suppressing default gripper knobs rendering

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.

....

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

Resize Behaviour

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.

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.

See also

• TSplitter doc
• TPairSplitter