Bitmap Styles - FireMonkey Guide

Back to Styles

As discussed in Introduction To FireMonkey Styles bitmap styles are used for operating system and premium styles to create ‘photo-realistic’ styles which can be far more complex than could be created using vectors.

Bitmap Styles

Here is the style for a TButton from a typical bitmap style:

buttonstyleTLayout
  background
TSubImage
    rectanimation1
TRectAnimation
 rectanimation2
TRectAnimation
 rectanimation3
TRectAnimation
 rectanimation4
TRectAnimation
  text
TText
    coloranimation1
TColorAnimation
 coloranimation2
TColorAnimation
 coloranimation3
TColorAnimation
 coloranimation4
TColorAnimation 

TSubImage

Of interest here is the background component of class TSubImage which references a subsection of a TImage component. The SourceLookup property of the TSubImage takes the StyleName of another element in the style (or in the current ActiveStyle of TStyleManager). This element should be of type TImage.

In theory each control could have it’s own TImage element. In actuality, at least for the Embarcadero supplied styles, one large TImage is used which contains bitmaps for every control in the style. This means that re-use of TImage sections between controls is easier at the expense of making the styles harder to modify - if each control used it’s own TImage it would be easier to know which TImage sections applied to which controls and modify the image for a custom style, or even extend it with new bitmaps for new states.

The SourceRect property of the TSubImage specifies the bounds of the section of the image to use. This section will be stretched as required to the size needed. Thus the control using the style can be resized and the style and it’s bitmaps will be resized as necessary.

When the appearance of the control needs to change, e.g. to represent mouse over or pressed state, one or more TRectAnimation objects can be added as children. If the PropertyName property of the animation is set to SourceRect then the animation will update the section of the TImage which is on display. See Effects and Animations in Styles.

Version: XE4

Categories:

div title=