Introduction To FireMonkey Styles - FireMonkey Guide

Back to Styles

As we saw in Introduction to FireMonkey VCL controls are painted by the operating system whereas FireMonkey controls are painted entirely by FireMonkey itself. This means that FireMonkey, and hence your application, have complete control over every aspect of how your application looks. It is possible to radically change the appearance of your application, or individual controls, using styles.

FireMonkey styles are stored in Style Files which can contain zero or more style elements, each element styling a single control, or sub-element of a control.

FireMonkey styles can be made up of three things:

  • Drawing primitives such as rectangles, circles and text.
  • FireMonkey controls. So you can use, say, a TButton within your control. You could thus create one control which contained both a label and an edit box. Combining controls in this way can be a very powerful way to build new controls.
  • Bitmaps. Introduced with XE3 is the ability to construct styles, or parts of styles, from bitmaps. This enables FireMonkey to very accurately represent the built in controls of the operating system as well as allowing the creation of custom styles which would be difficult to create with primitives.

You can freely mix all three elements in a style. For instance a button may have a TSubImage for the background and a TText primitive to display the caption.  Styles based on primitives and referred to as vector styles, those based on bitmaps and are referred to as bitmap styles. Of the styles supplied by Embarcadero the operating system styles are bitmap based while the others are mostly vector based. Premium styles are usually bitmap styles.

How Styles are Constructed

In Introduction to FireMonkey we saw that in FireMonkey any control can parent any other control. This feature is used by the styling system to create styles by creating a ‘tree’ of components and drawing primitives (shapes).

Here is the style for a button in the Blend style,

<unnamed>: TColorAnimation
<unnamed>: TColorAnimation
<unnamed>: TColorAnimation
<unnamed>: TColorAnimation

This style starts with a TLayout which is a control with no appearance which can be used as a container for other controls.

Next is a TRectangle. TRectangle is, as the name suggests, a drawing primitive for a rectangle. Here it provides the background detail of the button.

Under this are three TColorAnimations. Animations ‘listen’ to properties in the control being styled and modify the value of a property of their parent object in the style. Here they are monitoring the IsMouseOver and IsPressed properties of the button being styled. As the state of the button changes they modify the Fill.Color property of the background TRectangle. See Style Effects and Animations.

Finally there is a TText primitive for displaying the text of the button.

Bitmap Styles are very similar but use a TSubImage component for some functionality. See the section on Bitmap Styles to see how they work.


div title=