FireMonkey Style Designer

Go Up to Customizing FireMonkey Applications with Styles

Overview

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 Platform styles, in the Form Designer or Structure View, double-click a style book component.

• 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 RAD Studio 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
	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 RAD Studio installation directory, typically: C:\Program Files (x86)\Embarcadero\Studio\17.0\Redist\styles\Fmx
	Saves current styles as a .style file for further use.
	Deletes all styles currently open in the Designer window.
Platform selector	Selects the platform to edit.
	Adds new platform to the Platform list.
	Removes currently selected platform from the Platform list.
Apply	Applies changes to the objects in the Designer window.
Apply and Close	Applies changes to the objects in the Designer and closes the window.
Cancel	Closes the FireMonkey Style Designer and discards all the changes.

See Also

• Customizing FireMonkey Applications with Styles
• Applying FireMonkey Styles
• Editing a FireMonkey Style
• Working with Native and Custom FireMonkey Styles
• Using Styles Defined by Components in Design-Time Packages Installed in the IDE
• Using Styles for iOS: Multi-Resolution Styles, and the Black and Transparent Styles
• Bitmap Style Designer
• StyleLookup Support for Metropolis UI Controls
• Converting a VCL Style to a FireMonkey Style
• FMX.Styles