Tutorial: Using FireMonkey Layouts to Create a Scaled Effect

By: Tim DelChiaro

Abstract: This tutorial demonstrates how to use FireMonkey layouts to scale a set of buttons at the same dimension

This tutorial is part of the RAD Studio XE3 online documentation. Links in the article go to the Embarcadero Doc Wiki. 

To follow along with these steps, you can buy or download a trial of an Embarcadero developer tool with FireMonkey including Delphi, C++Builder and RAD Studio.

This tutorial demonstrates how to use FireMonkey layouts to scale a set of buttons at the same dimension.

  1. On the form created in the previous tutorial, add a TScaledLayout and a TTrackBar.
  2. In the Object Inspector, make the following changes:
    • For the track bar:
      • Set Align to alMostBottom.
      • Set the Max property to 2.
      • Set the Frequency property to 0.01.
    • For the scale layout, set Align to alCenter.
  3. In the Structure View, select all the layouts (Ctrl+Click each layout).
  4. Drag-and-drop the layouts under the TScaledLayout.
  5. In the Form Designer, resize the TScaledLayout so that the entire pattern fits within the TScaledLayout. With all the layouts selected, center the entire pattern within theTScaledLayout.
    File:Pattern within scale layout.png
  6. In the Object Inspector, scale the TScaledLayout as follows:
    • Set the coordinates of the Scale property to 0.5.
    • Set the Value property of the track bar to 0.5.
  7. Double-click the TTrackBar to attach OnChange event handlers to it.
// Delphi version of the implementation
 procedure TForm1.TrackBar1Change(Sender: TObject);
begin
  ScaledLayout.Scale.X:=TrackBar.Value;
  ScaledLayout.Scale.Y:=TrackBar.Value;
end;
 // C++ version of the implementation
void __fastcall TForm3D1::TrackBar1Change(TObject *Sender)
{
      ScaledLayout->Scale->X=TrackBar->Value;
      ScaledLayout->Scale->Y=TrackBar->Value;
}
8. Run the project by pressing F9. The results should look like this:

FIle:Form_for_scale_layout.png FIle:Form_for_scale_layout2.png

When the buttons are scaled, they are not disabled. They remain active, regardless of the scale being used.

Server Response from: ETNASC02