Style Management - FireMonkey Guide

Back to: Styles.

There are a number of ways to store and access styles. In this section I shall look at each in turn, and in order of preference.

System Styles

System styles are those designed to look like a given operating system. They are stored as resources in your final application and are not (easily) available for browsing and editing. Unless they are overridden then the appropriate style for the current platform will be selected from the list below.

Resource NamePlatform
win7styleWindows 7
win8styleWindows 8
lionstyleOS X
lion2xstyleOS X with retina display
ipadstyleiPad prior to iOS7
iphonestyleiPhone other than version 6 (XE4) or prior to iOS7
iphonestyle_6iPhone 6 (XE4 only)
iphonepadstyle_ModerniOS7
androidstyleAndroid

(You can see the names of the system styles for the current platform in the source of GetSystemStyle in the unit FMX.Controls.

).

The system style can be accessed via the SystemStyle or SystemStyleHiRes properties of TStyleManager which return the style appropriate for the platform.

These properties are read only and their value is determined by FireMonkey.

ActiveStyle

The currently active style is stored in another pair of properties of TStyleManager, ActiveStyle and ActiveStyleHiRes. By default these will be the same as the SystemStyle/SystemStyleHiRes properties but they can be modified by calling TStyleManager.SetStyleFromFile or TStyleManager.SetStyleFromFileHiRes and passing in the name of a style file. Alternatively, you can use one of the LoadXXXX methods of TStyleManager and assign the result to ActiveStyle or ActiveStyleHiRes.

Setting the active style will set the style for the entire application (unless you use one of the methods below to override it for a specific form or forms). This is the preferred method to use to modify the look of an entire application.

These methods should be called from your project (dpr) file before Application.Initialize is called, or from the initialization section of a unit. If called later, e.g from a forms OnCreate event handler, you may find that the app is initialized with the default style and then updated with your new style.

You can view the project file with the Project/View Source menu item in Delphi. Here is a sample loading a custom style.

program HelloWorld;

uses
  FMX
.Styles,
  
FMX.Forms,
  
Unit1 in 'Unit1.pas' {Form1};

{$R *.res}

begin
  TStyleManager
.SetStyleFromFile('c:\MyStyle.style');
  
TStyleManager.SetStyleFromFileHiRes('c:\MyStyleHiRes.style');
  
Application.Initialize;
  
Application.CreateForm(TForm1Form1);
  
Application.Run;
end

A number of styles are supplied by Embarcadero and can be found in the folder C:\Program Files\Embarcadero\

\\Redist\styles\Fmx

StyleBook

The most common place to store a custom style is in a TStyleBook component on a form due to the ease of editing them with the built in Style Designer. However, styles in a style book take longer to load at start up than the ActiveStyle which may cause issues on mobile devices which kill an app that takes too long to start.

Another potential downside to style books is that the styles only apply to the current form. You can, however, use one on other forms by pointing the other form’s StyleBook property to it. If you do this make sure you set the StyleBook property to nil before the form is destroyed. In the following example Form2 uses the style book from Form1.

implementation
uses Unit1
;
{$R *.fmx}

procedure TForm2
.FormCreate(SenderTObject);
begin
  StyleBook 
:= Form1.StyleBook1;
end;

procedure TForm2.FormDestroy(SenderTObject);
begin
  StyleBook 
:= nil;
end

Styles in a style book will override a style with the same name as one in the ActiveStyle. This is useful if you want to change the default style for a control. See the Style Designer section for details.

If you edit a style by right clicking on a control and selecting either Edit Custom Style or Edit Default Style a TStyleBook component will be added to the form for you.

You can also add a TStyleBook manually from the component palette. If you do there’s one gotcha to beware of: make sure you set the StyleBook property of the form to point to it. This is done automatically when you use the menu to create a stylebook but not when adding one manually and failure to do so can cause a lot of head scratching!

This leads on to the ability to add more than one style book to a form and switch between them at will by changing the StyleBook property. I’m not sure why you’d want to though.

Styles on the Form

The final place to create and store styles is on the form itself. Try the following:

  • Place a TRectangle on a form.
  • Set it’s StyleName property to ‘MyRectangle’.
  • Place a TButton on the form.
  • Set it’s StyleLookup property to ‘MyRectangle’.

The button will now look the same as the rectangle. Try modifying the rectangle and adding child components to it and you will see the button update accordingly. (Or at least it will if you ‘nudge’ it by clearing and resetting the StyleName property).

This can be a useful feature when getting to know styles. You can also use it to built styles outside of the style designer and you can cut the text from the text version of the form and into a style file for later use. You probably wouldn’t want to use this feature in production code.

Version: XE5

 

Categories:

div title=