FireMonkey Style Designer

From Appmethod Topics
Jump to: navigation, search

Go Up to Customizing FireMonkey Applications with Styles


The FireMonkey Style Designer helps you create, edit, and test FireMonkey styles. This section explains how to open the FireMonkey Style Designer.

To open the FireMonkey Style Designer

  • To work with Custom styles, use the following commands of the shortcut menu displayed when you right-clicked a styled component:
    • Edit Default Style:
      Opens a new FireMonkey Style Designer window in which you can modify the style for the component class. For example, if you right-clicked a button, you can modify the "buttonStyle" object (a default style for the TButton class) .
    • Edit Custom Style:
      Opens a new FireMonkey Style Designer window in which you can modify the selected control style. For example, if you right-clicked a button, you can modify the "button1Style" object (a style for this button only).

For more information about styles, see Customizing FireMonkey Applications with Styles and Applying FireMonkey Styles.

FireMonkey Style Designer Window

The FireMonkey Style Designer has its own Object Viewer that works with the Appmethod Structure View and Object Inspector.

  • The FireMonkey Style Designer Object Viewer displays the selected components.
  • The Structure View allows you to select the styles and their components.
  • The Object Inspector allows you to edit the properties.

Object Viewer

The Designer Object Viewer panel, located in the center of the design window, displays the components that you select from the Structure View. In the image below, the node months is selected from the Structure view, and the rectangle containing the popup window is shown in the Object Viewer.

Using the Object Inspector, you can modify the settings of the components selected from the Structure View, and the changes are visible in the Object Viewer.

Structure View

The Structure View, which is located by default in the upper-left corner of the IDE window, displays a tree view of the individual components of the selected control (object).

For example, the following screenshot shows:

  • A calendar component.
  • The TPopupBox control (a child of the custom calendar style: calendar1style1), which is styled to display the month names as a label (calendar1style1calendarlabelstyle is set as the StyleLookup property in the Object Inspector). You can change the setting to display the months as a drop-down menu.


FireMonkey Style Designer Toolbar


The FireMonkey Style Designer toolbar contains the following buttons:

Item Description

FireMonkey Style Designer Load.png

Opens a dialog where you can indicate a .style file to be loaded. The current styles open in the FireMonkey Style Designer are closed after the loading process.

To select a FireMonkey style, navigate to the Redist folder in your Appmethod installation directory, typically:

C:\Program Files (x86)\Embarcadero\Studio\17.0\Redist\styles\Fmx

FireMonkey Style Designer Save.png

Saves current styles as a .style file for further use.

FireMonkey Style Designer Clear.png

Deletes all styles currently open in the Designer window.

Platform selector

Selects the platform to edit.

FireMonkey Style Designer Add New Platforms.png

Adds new platform to the Platform list.

FireMonkey Style Designer Remove Platform.png

Removes currently selected platform from the Platform list.


Applies changes to the objects in the Designer window.

Apply and Close

Applies changes to the objects in the Designer and closes the window.


Closes the FireMonkey Style Designer and discards all the changes.

See Also