TclScaledLayout

function AddNewScaledLayout(AComponent: TCLComponent; xName: string): TclScaledLayout;

AComponent : Specifies the parent of the object to be defined.

xName : The name of the defined ScaledLayout should be written.

It is used to arrange and proportionally scale other components on the form. Simply put, it ensures that buttons, labels, and other visual elements maintain their relative size and position when the form is resized.

This layout automatically scales and adjusts its contents, making the interface consistent and visually balanced across different screen resolutions. TCLScaledLayout is particularly useful when designing responsive or resolution-independent user interfaces.

The features and usage are provided in the table below.

Feature	Use of	Definition
TclScaledLayout	ScaledLayout1 : TclScaledLayout;	A variable belonging to the TclScaledLayout class is created.
AddNewScaledLayout	ScaledLayout1 = Form1.AddNewScaledLayout(Form1,'ScaledLayout1');	A new TclScaledLayout is added to the form.
OriginalWidth	ScaledLayout1.OriginalWidth = 150;	Defines the reference (unscaled) width of the layout, used as the base for scaling its child components.
OriginalHeight	ScaledLayout1.OriginalHeight = 50;	Defines the reference (unscaled) height of the layout, used as the base for scaling its child components.
Align	ScaledLayout1.Align = alTop;	With the Align parameter, you can specify where you want our component to be aligned in the form. This parameter has multiple positioning properties. See the page to learn about these features.
Margins	ScaledLayout1.Margins.Left = 50; // Right, Top, Bottom	With the Margins parameter, you can give margins at any scale from the right, left, bottom, top.

Example

  var   
   MyForm:TclForm;
   ScaledLayout:TclScaledLayout;
   I:Integer;
   testButton:TCLButton;
 {
   MyForm=TclForm.Create(self);
    
   ScaledLayout = MyForm.AddNewScaledLayout(MyForm,'ScaledLayout');
   ScaledLayout.Align = alClient;
   
   ScaledLayout.OriginalHeight = 900; 
   ScaledLayout.OriginalWidth = 400; //Approximately the aspect ratio of a phone screen
   
    for (I = 0 to 1) {
      testButton = MyForm.AddNewButton(ScaledLayout,'testButton'+IntToStr(I),'Button'+IntToStr(I));
      testButton.Align = alTop;
    }
   
   MyForm.Run;
 }

See Also

• Components
• Object Properties
• TclLayout