Go Up to FireMonkey Quick Start Guide - Designing User Interface

Customizing design of FireMonkey application

In the Visual Component Library (VCL), you can modify the color and other look and feel-related properties of each component from the Object Inspector. You do not see, however, such properties in FireMonkey. In FireMonkey, the look and feel of each component is defined as style, and you assign a style to a component. Because of the idea of style, you can now easily change the look and feel of the entire application by just applying different styles to the application. Following are predefined FireMonkey styles that you can easily use within your application:

Air.Style	Amakrits.Style	AquaGraphite.Style	Blend.Style
Dark.style	FMX.Platform.iOS.style	FMX.Platform.Mac.style	FMX.Platform.Win.style
GoldenGraphite.Style	iOS.Style	iOSNative.Style	Light.Style
Mac.Style	MacBlue.Style	MacGraphite.Style	RubyGraphite.style
Windows7.Style

To select a style within your application, there are two typical ways to implement it. Step 1 explains how you can switch the style at run time using code. Step 2 explains how you can set the style while you design your application, and how you include the specified style in your application.

Step 1: Apply the existing style to your application at run time

Note: You can find a sample application at C:\Users\Public\Documents\RAD Studio\<n.n>\Samples\FireMonkey\ControlsDemo

The ControlsDemo sample application has many FireMonkey components already placed, and the implementation for switching the style at run time is already implemented.

To use this functionality in this demo application, click File > Load Style…, and select a style file.

These style files are available at C:\Users\Public\Documents\RAD Studio\9.0\Styles.

Here is the code used to switch to a new style:

procedure TfrmCtrlsDemo.MenuItem7Click(Sender: TObject);
begin
  if OpenDialog1.Execute then
  begin
    Application.StyleFileName := OpenDialog1.FileName;
  end;
end;

First, this demo code shows an 'Open Dialog' used to select a file. The name of the dialog is set to OpenDialog1 in the code. When the user selects a file, the Execute method returns True. This code checks whether the user selected a file first, and then assigns the file name of the style file from OpenDialog1.Filename (which holds the file name selected by the user) to the Application.StyleFileName property. That’s it.

Step 2: Apply an existing style to your application at design time

You can also apply existing styles through the TStyleBook component at design time.

To apply a style at design time

Drop a TStyleBook component to your form. By default, the name of the new component is StyleBook1.
Select a FireMonkey form, and set the StyleBook property to StyleBook1.
Double-click the StyleBook1 component.
Click the Load… button and select the style. Styles are available at C:\Program Files (x86)\Embarcadero\RAD Studio\9.0\Redist\styles\Fmx.
Select Apply and Close. Now controls on the Form Designer are rendered using the specified style.
[[

Note: Step 2 of this tutorial has changed the functionality of this demo application (discussed at Step 1). Once you try this step, remove the StyleBook1 component from your application, so that the original functionality implemented in this demo will not be changed.