Splitter Control

The splitter control is placed between two aligned controls so that they can be resized by the user at run-time. For example, two rich edit controls can be separated vertically or horizontally by a splitter:

The first of the controls to be split should be anchored to an edge of the form, for example the left, and the splitter should be aligned to the same edge. The second rich edit control should be aligned to the client so that they fill up the rest of the application's form. 

The code for the Color Dialog:

procedure TForm1.ToolButton1Click(Sender: TObject);
begin
 if colordialog1.execute then splitter1.Color:= colordialog1.Color;
end;

The code for the List Box: 

procedure TForm1.ListBox1Click(Sender: TObject);
var splitter_width:integer;
begin
 splitter_width := listbox1.ItemIndex;
 splitter1.Width:=strtoint(listbox1.Items[splitter_width]);
end;

The code for the 'Bevel' button:

procedure TForm1.ToolButton4Click(Sender: TObject);
begin
 splitter1.Beveled:=not splitter1.Beveled;
end;

The arrangement above might be used to present the same data in a different view, for example HTML code and the browser view below, or translation from a foreign language.

A splitter can be used to divide different controls, for example a rich edit and a list box:

Also: ListView, TreeView, ScrollBox, etc.: any control that has the Align property. For example:

(In this example the MonthCalendar control expands to more than one month as its space is increased in size.)

A further example can be found in the section on the DirectoryOutline control.

Back to Tutorial

Back to Palette List