Customizing the Design of a FireMonkey Application

From RAD Studio
Jump to: navigation, search

Go Up to FireMonkey Quick Start Guide - Designing User Interface

Customizing the design of a 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. However, you do not see such look-and-feel properties in FireMonkey. In FireMonkey, the look and feel of each component is defined in its style, and you can 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.png


Amakrits Style.png


AquaGraphite style.png


Blend Style.png


Dark style.png
















To select a style within your application, there are several typical ways to implement a style:

  • Step 1 describes how to change the style at run time using code.
  • Step 2 describes how to set the style while you design your application, and how to include the specified style in your application.
  • Step 3 describes how to set the style for a specific component.

Step 1: Apply the Existing Style to Your Application at Run Time

Note: You can find a sample application at C:\Users\Public\Documents\Embarcadero\Studio\22.0\Samples\Object Pascal\FireMonkey Desktop\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.

Load Style.png

The FireMonkey style files are available at C:\Users\Public\Documents\Embarcadero\Studio\22.0\Styles.

Styles folder.png

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

procedure TfrmCtrlsDemo.MenuItem7Click(Sender: TObject);
  if OpenDialog1.Execute then

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 has selected a file. Then the TStyleManager.SetStyle procedure sets the active style to the style from the OpenDialog1.Filename file. OpenDialog1.Filename holds the file name selected by the user.

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

  1. Drop a TStyleBook component on your form. By default, the name of the new component is StyleBook1.
  2. Select a multi-device form, and set the StyleBook property to StyleBook1.
    Select StyleBook to Form.png
  3. Double-click the StyleBook1 component. The Style Designer opens.
  4. Click the Load button and select the style. Styles are available at C:\Program Files (x86)\Embarcadero\Studio\22.0\styles\Fmx.
    Load existing style.png
  5. Select Apply and Close. Now controls on the Form Designer are rendered using the specified style.
    Air Style.png
Note: Step 2 of this tutorial has changed the functionality of this demo application (discussed at Step 1). After you try this step, remove the StyleBook1 component from your application, so that the original functionality implemented in this demo will not be changed.

Step 3: Modify the Style for a Particular Component

You can also customize the style for a specific component.

To customize the style of a specific component

  1. Select a component on the Form Designer.
  2. Right-click the component and select Edit Custom Style.
    Edit Custom Style.png
The Style Designer opens and StyleBook1 is created. The StyleBook property of the main form is set to StyleBook1. The Structure View shows StyleBook1. In the Structure View, select the style of the control right-clicked on the Form Designer. For example, if the control is Panel1, then select panel1style1. The Object Inspector shows properties of this style.
3. Change the property of this particular style through the Object Inspector. You can change any property shown in the Object Inspector.
Select color of a custom style.png
4. Select Apply and Close, and return to the Form Designer.
5. Selecting the component (whose style was just customized), you will find that the StyleLookup property obtains the name of the style just created (such as Panel1Style1).
Confirm name of style.png
6. Now you can apply the same style to different components. Select another component and set the StyleLookup property to Panel1Style1.
Apply same style to different component.png

See Also