Using Layouts to Create a Scaled Effect

Go Up to Tutorial: Using FireMonkey Layouts

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

   

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:

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

Previous

• Using Layouts to Arrange Components

Next

• Using Grid and Flow Layouts

See Also

• Creating a FireMonkey Component (Delphi)
• Creating a FireMonkey Component (C++)
• HD FireMonkey Application
• FireMonkey Layouts Strategies