Tuning FireMonkey Styles for Forms and Controls

By: Tim DelChiaro

Abstract: Blog post from Alexey Sharagin

This is a repost of a blog post from Alexey Sharagin. Click the blog post title below to see the original post, comments, or to visit Alexey's Styles for VCL and FireMonkey blog to see additional posts.

Tuning FireMonkey Styles for Forms and Controls

    StyleLookUp Property

With introduction of Metropolis UI styles the importance of the FMX.Types.TStyledControl.StyleLookup property seriously increases. The reason of this is that Metropolis UI styles contain lots of styles for buttons, panes, lists, and other control elements. Each control has the default style, but you can change this default style to any style accessible for the class of a control. The StyleLookup property can be used to specify such additional style. In StyleLookup you can select the name of an additional style for the control like searchbuttontext from the general style loaded into the TStyleBook or from the default style for the used platform. For the convenience of usage of the StyleLookup property in the design mode, the drop-down list showing all applicable to the control styles is provided. This list shows the preview of styles. Now it is easy to select a style for a control in the StyleLookup property. Creating custom styles for controls, in order that your styles appear in the StyleLookup list, you should use the name of a control class in your style name. For example, in order that the name of a style for TButton appears in the StyleLookup list, you should add into the style name the "button" class name (for example "mybutton", "specialbutton"). If you create a style for TListBox, then you should add the "listbox" class name (for example "mylistbox", "speciallistbox").

For example, the StyleLookup list for TButton, when the Metropolis UI Black style is selected for TStyleBook, can look like this:

    StyleSettings Property

Delphi XE3 introduces the new FMX.Types.TTextControl.StyledSettings property of the TStyledSettings type:
TStyledSetting = (ssFamily, ssSize, ssStyle, ssFontColor, ssOther);
TStyledSettings = set of TStyledSetting;
This property is used in FMX controls (descending from TTextControl) as TButton, TSpeedButton, TCheckBox, and others. This property provides possibility to switch ON and OFF properties of the font used to draw a control text. The reason is that some styles, for example in Metropolis IU styles, define the font name and size. If you do not want to use for a control text the font properties defined in a style, then you can switch OFF the following (defined in the style) properties of the font:

ssFamily - font name,
ssSize - font size,
ssStyle - font style,
ssFontColor - font color,
ssOther - text position.

The following figure shows TButton with ssSize turned OFF (Button1) and ON (Button2)

    Switching ON and OFF Stylization of the Form Border

Delphi XE3 introduces the new Boolean property FMX.Forms.TForm.EnableBorderStyling. Using this property, you can implement stylization of a form border. In Windows application you can apply styles to all border elements including system buttons. In Mac OS applications you can customize only the background of the form’s caption — you cannot customize system buttons. This is the common tendency to Mac OS applications. By default, EnableBorderStyling = True; that is styling is applied to a form. Notice that not all styles contain styles for a form border; in this case the system border is used.
The following figure shows how the form border looks in the Jet style under Mac OS:

The following figure shows how the form border looks in the Jet style under Windows:

    Stylization of the Form’s Main Menu

In Delphi XE3, you can organize the form’s main menu using the TMenuBar control or TMainMenu component.

You can use this control to create the main menu in the client part of a form. Notice that under Mac OS, the created main menu does not appear on the Mac OS menu bar - it always appears in the client part of the form.

The following figure shows usage of TMenuBar with the Transparent style under Windows (it looks rather spectacular with half-transparent graphics):

When you use TMainMenu, the main menu is created in the nonclient part of the form under Windows and under Mac OS the created main menu appears on the Mac OS menu bar. Under Windows, if a style defines graphics for a form’s border, then the main menu and all its sub-menus are stylized. If the style does not define the form’s border or you have set , EnableBorderStyling = False, then the main menu is system (the same as the border).

The following figure shows usage of TMainMenu with the Jet style under Windows:

The following figure shows usage of TMainMenu with the Jet style under Mac OS:

    Support of the Retina Display on Mac Book Pro

Apple launches the third generation of MacBook Pro with the Retina display. Retina displays have higher resolution that standard displays. This puzzles software developers, because to provide the correct representation of GUI elements on Retina display one need to introduce modifications both in the code and in raster graphics of control elements. On Retina displays, GUI elements should satisfy to the high resolution. If vector styles in Delphi 3 automatically adapt to high resolution, then raster styles require some care. To support Retina displays, an application having a raster style should load an additional style with the high resolution — this resolution should be exactly 2 times higher than the standard resolution. During execution, the application automatically switches between these two styles depending on which display the form is shown.

Using TStyleBook
1. Add to a form two TStyleBook components like StyleBook1 and StyleBook2.
2. Load an ordinary style into StyleBook1 (for example Jet.style).
3. Load a Retina style into StyleBook2. As a rule, a file with a Retina style has the name like:
[name]2x.style (for example Jet2x.style).
4. Set StyleBook2 in the StyleBook1.HiResStyleBook property.
5. Set StyleBook1 in the TForm.StyleBook property

Using TStyleManager

Using TStyleManager you can sequentially calls TStyleManager.SetStyleFromFile to load an ordinary style and TStyleManager.SetStyleFromFileHiRes to load the corresponding Retina style. For example,

procedure TForm1.FormCreate(Sender: TObject);



For example, the following figure shows the button graphics in an ordinary style:

Compare it with the size of the same button in Retina style:

Notice that at the moment Embarcadero is developing the group of FireMonkey raster styles where each style has the Retina version.

Server Response from: ETNASC03