Bitmap Styles in FireMonkey 2.0

Posted by on in Blogs
In the list of new capabilities of RAD Studio XE3 there is a line: Bitmap Sytles. What is this new Bitmap Styles?

Some theory: styles in FireMonkey are just common FM objects, which can be located on a form. But the objects are grouped in special way. For example, in order to get a button we’re using an object TRectangle. We’re setting the necessary properties, adding some effects and animations, assigning some triggers to respond to some events. The button style for a button in XE2 looks like:

Using the objects we can get beautiful or even stunning styles, but vector graphics is not enough to express all a designer can make and a user wants to get.

In addition, in order to get realistic pictures, one needs large amount of primitives with complicated filling (gradients, transparency), that damages the performance. And the designer should understand the theory and practice of FM styles structuring.

Having analyzed the situation, we decided to complete FireMonkey capabilities with the support of bitmap styles.

Let me show you a bitmap style for a button, but in XE3 already:

Once can see, the number of objects has been decreased and an object TSubImage has appeared. TSubImage is a special type of object, which allows to draw a special part of a bitmap. The object references to TImage (using properties Source or StyleLookup) and uses it as the source of bitmap. The part of a bitmap is defined using property SourceRect. In order to change this part one can use TRectAnimation. This animation will change the value of property SourceRect, enabling to get different button kinds depending on its state.

Here is an example of a bitmap for a button with different states:

Thus we can use the ready images to give just any graphical look to our controls. In addition, the complexity of a style (number of objects) is independent on the complexity of the graphics and design, so has no impact on the performance.

The similar style engine was already available in VCL, so now you can use these styles in FireMonkey. We have enhanced the capabilities of the style edition for VCL, and you can export VCL styles in FireMonkey styles. Any VCL style can be saved in FireMonkey format:

As the style editor has its own format, and FireMonkey style doesn’t imply some strictly defined structure, this conversion is one-directional. We can save a VCL style in FM format, but we can’t open the style in the editor. In order to change or modify a FM style (file with extension *.style), one should use the designer in IDE.

Below you can see the FireMonkey application, which uses the style, converted from VCL-style:

In addition, FireMonkey 2.0 supports styles for non-client area of the form.

The main idea is all these new capabilities provide backward compatibility. All the vector styles continue working without any changes now and in the following versions. We haven’t change the concept, we’ve just enhanced it.


Check out more tips and tricks in this development video: