Using Layouts to Create a Scaled Effect

From RAD Studio
Jump to: navigation, search

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 MostBottom.
      • Set the Max property to 2.
      • Set the Frequency property to 0.01.
    • For the scale layout, set Align to Center.
  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.
    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
  ScaledLayout1.Scale.X:=TrackBar1.Value;
  ScaledLayout1.Scale.Y:=TrackBar1.Value;
end;
 // C++ version of the implementation
void __fastcall TForm3D1::TrackBar1Change(TObject *Sender)
{
      ScaledLayout1->Scale->X=TrackBar1->Value;
      ScaledLayout1->Scale->Y=TrackBar1->Value;
}
8. Run the project by pressing F9. The results should look like this:

Form for scale layout.png Form for scale layout2.png

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

Previous

Next

See Also