RAD Studio 10.4.1 is now available! Learn more. Looking for discounts? Visit our Special Offers page!
C++DelphiIDE

Learn To Use Styles To Create Visual Stunning VCL And FireMonkey Apps With Delphi/C++ Builder

What is a Style: A set of graphical details that define the look and feel of a VCL application/FireMonkey Application, Similar to a theme in Windows. A style permits you to change the appearance of every part and state of a control. For instance, a scroll bar has the following parts: frame, slider, and the two side buttons for each direction. The side buttons, for example, have the following states: pressed, disabled, hot, normal.

How to apply styles for an VCL Application: To set a style for your VCL application, select the style in Project > Options > Application > Appearance. See Application Appearance for more details. Note: The VCL style changes the appearance of the application in run-time. However, the Form Designer does not show this changes.

Location of Style Files (.vsf Files): The VCL styles that ship with the product are available in C:\Users\Public\Documents\Embarcadero\Studio\21.0\Styles. Use the Vcl.Themes.TStyleManager class to load, register, and select styles or to get, register, and unregister a style engine.

FireMonkey: Uses lightweight GUI controls on top of a cross-platform abstraction, which is implemented for Windows and other platforms. Lightweight controls mean that every pixel is drawn by FireMonkey, no native (heavyweight) controls are used.
FireMonkey controls are arrangements of a tree composed of sub controls, primitive shapes, and brushes, decorated with effects. These compositions are defined as styles, stored in a style book. The individual elements of a style are internally called resources; because that term has several other meanings, the term style-resource is used for clarity. Styles provide a great deal of customizations without sub classing.

The FireMonkey styles that are provided with the product are saved in .Style files located in C:\Program Files (x86)\Embarcadero\Studio\21.0\Redist\styles\Fmx. You can load these styles with FireMonkey Style Designer.

FireMonkey Style Designer: The FireMonkey Style Designer window, in combination with the Structure view and the Object Inspector, helps you create, edit, and test FireMonkey styles.

  • 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).

Bitmap Style Designer for VCL and FireMonkey: The Bitmap Style Designer enables you to:

  • Create, edit, and test FireMonkey styles (.style files)
  • Create, edit, and test VCL styles (.vsf files)
  • Convert a VCL style (.vsf file) into a FireMonkey style by saving the VCL style as a FireMonkey style (.style file)

Watch this video to check Windows 10 look and feel for VCL and FMX.

Windows 10 Look and Feel for VCL and FMX


Reduce development time and get to market faster with RAD Studio, Delphi, or C++Builder.
Design. Code. Compile. Deploy.
Start Free Trial   Upgrade Today

   Free Delphi Community Edition   Free C++Builder Community Edition

Related posts
C++DelphiIDERAD Studio

Useful UX Design Guidelines For Modernizing Your Delphi VCL And FireMonkey Applications In Windows 10

Leave a Reply

This site uses Akismet to reduce spam. Learn how your comment data is processed.

IN THE ARTICLES