Difference between revisions of "TSplitter"

From Lazarus wiki
Jump to navigationJump to search
(8 intermediate revisions by 4 users not shown)
Line 1: Line 1:
 
{{TSplitter}}
 
{{TSplitter}}
<br>
 
A vertical or horizontal bar placed on a panel or form, to separate sub-panels functionally
 
<br>
 
  
=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 LCL control [http://lazarus-ccr.sourceforge.net/docs/lcl/extctrls/tsplitter.html 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.
+
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 is defined in unit '''ExtCtrls''' and on the IDE component palette page ''Additional''.
 
  
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).
+
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=
 
  
 +
==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.
  
==In Form designer==
+
===Design time===
 
 
 
#create a new [[TForm|form]]
 
#create a new [[TForm|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 palette to select, then left click on the form)
#set in Object Inspector Align of Memo1 to alLeft.
+
#set in [[IDE_Window:_Object Inspector|Object Inspector]] Align of Memo1 to <syntaxhighlight lang="pascal" inline>alLeft</syntaxhighlight>.
 
#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 alClient.
+
#set in Object Inspector Align of Memo2 to <syntaxhighlight lang="pascal" inline>alClient</syntaxhighlight>.
 
 
==As lfm==
 
 
 
<syntaxhighlight>
 
  object Memo1: TMemo
 
    Left = 0
 
    Height = 141
 
    Top = 0
 
    Width = 150
 
    Align = alLeft
 
    Lines.Strings = (
 
      'Memo1'
 
    )
 
    TabOrder = 0
 
  end
 
  object Splitter1: TSplitter
 
    Left = 150
 
    Height = 141
 
    Top = 0
 
    Width = 5
 
  end
 
  object Memo2: TMemo
 
    Left = 155
 
    Height = 141
 
    Top = 0
 
    Width = 100
 
    Align = alClient
 
    Lines.Strings = (
 
      'Memo2'
 
    )
 
    TabOrder = 2
 
  end
 
</syntaxhighlight>
 
 
 
==The same in code==
 
  
<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.
  
==Example in IDE designer==
+
===Design time===
 
 
 
#create a new [[TForm|form]]
 
#create a new [[TForm|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 alLeft
+
#set in Object Inspector Align of Memo1 to <syntaxhighlight lang="pascal" inline>alLeft</syntaxhighlight>
 
#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).
  
==In lfm==
+
===Run time===
 
+
You can also perform the same actions as above in code instead of in the designer/Object Inspector:
The same as lfm:
+
<syntaxhighlight lang="Pascal">
 
 
<syntaxhighlight>
 
  object Memo1: TMemo
 
    AnchorSideRight.Control = Splitter1
 
    Left = 0
 
    Height = 141
 
    Top = 0
 
    Width = 145
 
    Align = alLeft
 
    Anchors = [akTop, akLeft, akRight, akBottom]
 
    Lines.Strings = (
 
      'Memo1'
 
    )
 
    TabOrder = 0
 
  end
 
  object Splitter1: TSplitter
 
    Left = 145
 
    Height = 141
 
    Top = 0
 
    Width = 5
 
    Align = alNone
 
  end
 
  object Memo2: TMemo
 
    AnchorSideLeft.Control = Splitter1
 
    AnchorSideLeft.Side = asrBottom
 
    Left = 150
 
    Height = 141
 
    Top = 0
 
    Width = 105
 
    Align = alRight
 
    Anchors = [akTop, akLeft, akRight, akBottom]
 
    Lines.Strings = (
 
      'Memo2'
 
    )
 
    TabOrder = 2
 
  end
 
</syntaxhighlight>
 
 
 
==In code==
 
 
 
The same in code:
 
<syntaxhighlight>
 
 
procedure TMainForm.FormCreate(Sender: TObject);
 
procedure TMainForm.FormCreate(Sender: TObject);
 
var
 
var
Line 186: Line 102:
 
</syntaxhighlight>
 
</syntaxhighlight>
  
[[Category:Lazarus]]
+
== see also ==
[[Category:IDE]]
+
* [[doc:lcl/extctrls/tsplitter.html|TSplitter doc]]
[[Category:GUI]]
+
* [[TPairSplitter]]
 +
 
 +
{{LCL Components}}

Revision as of 17:23, 6 August 2022

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

A TSplitter 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 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;

see also


LCL Components
Component Tab Components
Standard TMainMenu • TPopupMenu • TButton • TLabel • TEdit • TMemo • TToggleBox • TCheckBox • TRadioButton • TListBox • TComboBox • TScrollBar • TGroupBox • TRadioGroup • TCheckGroup • TPanel • TFrame • TActionList
Additional TBitBtn • TSpeedButton • TStaticText • TImage • TShape • TBevel • TPaintBox • TNotebook • TLabeledEdit • TSplitter • TTrayIcon • TControlBar • TFlowPanel • TMaskEdit • TCheckListBox • TScrollBox • TApplicationProperties • TStringGrid • TDrawGrid • TPairSplitter • TColorBox • TColorListBox • TValueListEditor
Common Controls TTrackBar • TProgressBar • TTreeView • TListView • TStatusBar • TToolBar • TCoolBar • TUpDown • TPageControl • TTabControl • THeaderControl • TImageList • TPopupNotifier • TDateTimePicker
Dialogs TOpenDialog • TSaveDialog • TSelectDirectoryDialog • TColorDialog • TFontDialog • TFindDialog • TReplaceDialog • TTaskDialog • TOpenPictureDialog • TSavePictureDialog • TCalendarDialog • TCalculatorDialog • TPrinterSetupDialog • TPrintDialog • TPageSetupDialog
Data Controls TDBNavigator • TDBText • TDBEdit • TDBMemo • TDBImage • TDBListBox • TDBLookupListBox • TDBComboBox • TDBLookupComboBox • TDBCheckBox • TDBRadioGroup • TDBCalendar • TDBGroupBox • TDBGrid • TDBDateTimePicker
Data Access TDataSource • TCSVDataSet • TSdfDataSet • TBufDataset • TFixedFormatDataSet • TDbf • TMemDataset
System TTimer • TIdleTimer • TLazComponentQueue • THTMLHelpDatabase • THTMLBrowserHelpViewer • TAsyncProcess • TProcessUTF8 • TProcess • TSimpleIPCClient • TSimpleIPCServer • TXMLConfig • TEventLog • TServiceManager • TCHMHelpDatabase • TLHelpConnector
Misc TColorButton • TSpinEdit • TFloatSpinEdit • TArrow • TCalendar • TEditButton • TFileNameEdit • TDirectoryEdit • TDateEdit • TTimeEdit • TCalcEdit • TFileListBox • TFilterComboBox • TComboBoxEx • TCheckComboBox • TButtonPanel • TShellTreeView • TShellListView • TXMLPropStorage • TINIPropStorage • TJSONPropStorage • TIDEDialogLayoutStorage • TMRUManager • TStrHolder
LazControls TCheckBoxThemed • TDividerBevel • TExtendedNotebook • TListFilterEdit • TListViewFilterEdit • TLvlGraphControl • TShortPathEdit • TSpinEditEx • TFloatSpinEditEx • TTreeFilterEdit • TExtendedTabControl •
RTTI TTIEdit • TTIComboBox • TTIButton • TTICheckBox • TTILabel • TTIGroupBox • TTIRadioGroup • TTICheckGroup • TTICheckListBox • TTIListBox • TTIMemo • TTICalendar • TTIImage • TTIFloatSpinEdit • TTISpinEdit • TTITrackBar • TTIProgressBar • TTIMaskEdit • TTIColorButton • TMultiPropertyLink • TTIPropertyGrid • TTIGrid
SQLdb TSQLQuery • TSQLTransaction • TSQLScript • TSQLConnector • TMSSQLConnection • TSybaseConnection • TPQConnection • TPQTEventMonitor • TOracleConnection • TODBCConnection • TMySQL40Connection • TMySQL41Connection • TMySQL50Connection • TMySQL51Connection • TMySQL55Connection • TMySQL56Connection • TMySQL57Connection • TSQLite3Connection • TIBConnection • TFBAdmin • TFBEventMonitor • TSQLDBLibraryLoader
Pascal Script TPSScript • TPSScriptDebugger • TPSDllPlugin • TPSImport_Classes • TPSImport_DateUtils • TPSImport_ComObj • TPSImport_DB • TPSImport_Forms • TPSImport_Controls • TPSImport_StdCtrls • TPSCustomPlugin
SynEdit TSynEdit • TSynCompletion • TSynAutoComplete • TSynMacroRecorder • TSynExporterHTML • TSynPluginSyncroEdit • TSynPasSyn • TSynFreePascalSyn • TSynCppSyn • TSynJavaSyn • TSynPerlSyn • TSynHTMLSyn • TSynXMLSyn • TSynLFMSyn • TSynDiffSyn • TSynUNIXShellScriptSyn • TSynCssSyn • TSynPHPSyn • TSynTeXSyn • TSynSQLSyn • TSynPythonSyn • TSynVBSyn • TSynAnySyn • TSynMultiSyn • TSynBatSyn • TSynIniSyn • TSynPoSyn
Chart TChart • TListChartSource • TRandomChartSource • TUserDefinedChartSource • TCalculatedChartSource • TDbChartSource • TChartToolset • TChartAxisTransformations • TChartStyles • TChartLegendPanel • TChartNavScrollBar • TChartNavPanel • TIntervalChartSource • TDateTimeIntervalChartSource • TChartListBox • TChartExtentLink • TChartImageList
IPro TIpFileDataProvider • TIpHtmlDataProvider • TIpHttpDataProvider • TIpHtmlPanel
Virtual Controls TVirtualDrawTree • TVirtualStringTree • TVTHeaderPopupMenu