Customizing the Design of a FireMonkey Application
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:
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.
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
- Select a component on the Form Designer.
- Right-click the component and select the Edit Custom Style… option.
- 3. Change the property of this particular style through the Object Inspector. You can change any property defined in the Object Inspector.
- 4. Select Apply and Close, and return to to Form Designer.
- 5. Once you select a component (whose style was just customized), you will find a new property defined (Panel1Style1).
- 6. Now you can apply the same style to different components. Select another component and then set the StyleLookup property to PanelStyle1.