Show: Delphi C++
Display Preferences

FireMonkey Style Designer

From RAD Studio
Jump to: navigation, search

Go Up to Customizing FireMonkey Applications with Styles

Right-click a FireMonkey styled control > Edit Default Style
Right-click a FireMonkey styled control > Edit Custom Style
Double-click a style book component in the Form Designer or the Structure View

The FireMonkey Style Designer helps you create, edit, and test FireMonkey styles:

  • Edit Default Style command:
    Opens a new FireMonkey Style Designer window in which you can modify the control starting from its default style settings.
  • Edit Custom Style command:
    Opens a new FireMonkey Style Designer window in which you can modify the control starting from its current custom style settings.

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

Contents

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's 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.

FMStyleDesigner.png

Object Viewer

The Designer's Object Viewer panel, located in the center of the design window, displays the components that you select from the Structure View. In the image above, the node text is selected from the Structure view, and the rectangle containing the text 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. In the example above, the color of the text has been changed to Aqua and the result is seen 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 of the MetropolisUIFlipViewDemo sample shows:

  • A calendar component (named TSubImage)
  • The TPopupBox control (a child of TSubImage), which is styled to display the month names (calendarlabelstyle is set as the StyleLookup property in the Object Inspector)

ResizedStyleDesignerCalendarSubimage.png

Tip: To create a new style or to add an existing style to the style of a component, drag and drop a control from the Tool Palette to the Structure View.

Object Inspector

The Object Inspector, located by default in the lower-left corner of the IDE window, displays the properties (and events) associated with the component currently selected in the Structure View. To set or change a component's properties, make the changes here in the Object Inspector.

Example

In the following example, there are two styles being edited, one for TButton and one for TRadioButton.

StructureFMStyleDesigner.png

FireMonkey Style Designer Toolbar

FMXDesignerToolbar.png

The FireMonkey Style Designer toolbar contains the following buttons.

Item Description

Load

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\RAD Studio\<n.n>\Redist\styles\Fmx

Add

Opens a dialog where you can indicate a .style file to be added. The added styles do not clear the existing ones in the window.

Save

Opens a dialog where you can indicate a .style file for the style to be saved for further use.

Clear All

Deletes all styles currently open in the Designer window.

Apply

Assigns the changes to the objects in the Designer window.

Apply and Close

Assigns the changes to the objects and closes the Designer window.

Cancel

Closes the Style Designer and discards all the changes.

See Also

Personal tools
In other languages