Watch, Follow, &
Connect with Us

Styles for VCL and FireMonkey

Tuning VCL Styles for Forms and Controls

StyleElements Property

Delphi XE3 introduces the possibility of flexible tuning of styles to different elements of VCL controls: font colors, client parts, borders, and scrollbars. For this purpose, Delphi XE3 introduces the Vcl.Controls.Controls.StyleElements property of the TStyleElements type:
TStyleElements = set of (seFont, seClient, seBorder); .

In different controls this property can work differently depending upon complexity of the control and the logic of its functionality. This property can be used as in IDE’s design mode so during an application execution. By default, all seFont, seClient, and seBorder parameters are used:

The following example demonstrates how you can use TStyleElements with a Vcl.StdCtrls.TMemo control:

You can customize style elements from the code. For example:
TForm.StyleElements = TForm.StyleElements - [seBorder];
this line turns OFF implementation of a style to the border of the particular form.

Global Turning ON/OFF of Stylization for Form Border

Delphi XE3 introduces the Vcl.Themes.TStyleManager.FormBorderStyle property of the
TFormBorderStyle = (fbsCurrentStyle, fbsSystemStyle); type.

You can use FormBorderStyle to globally switch between the current or system border for all forms in an application. fbsCurrentStyle defines to use the border from the current style; fbsSystemStyle defines to use the system border (fbsCurrentStyle is the default).
You can use this property adding appropriate code into the source code of a project file or into the source code of an application. For example, to switch OFF using of the form border from the current style to all forms on an application, you can add the
TStyleManager.FormBorderStyle := fbsSystemStyle;
line into the code of the project file.

For example like this:

Application.Initialize;
Application.MainFormOnTaskbar := True;

TStyleManager.FormBorderStyle :=  fbsSystemStyle;

TStyleManager.TrySetStyle(’Carbon’);
Application.CreateForm(TForm1, Form1);
Application.Run;

Animation Effects on Buttons

Delphi XE3 introduces the Boolean Vcl.Themes.TStyleManager.AnimationOnControls property. You can use this property to activate animation effects for TButton and TBitBtn buttons. The default is False. Setting AnimationOnControls to True activates the fading effect to a button, when some style is active. For example, you can turn ON/OFF fading effects by adding this property into a project file code or by adding this property into an application code. To produce fading effects, VCL uses OS system functions. Therefore, animation itself executes using OS functions and it is accessible beginning from Windows Vista.

Example of including the AnimationOnControls property into a project file code:

Application.Initialize;

TStyleManager.AnimationOnControls := True

TStyleManager.TrySetStyle(’Carbon’);
Application.CreateForm(TForm1, Form1);
Application.Run;

Cooperation and Synchronization of TRibbon Styles and VCL Styles

In Delphi XE3, you can create applications in the TRibbon style. Three special Luna, Obsidian and Silver styles are provided for this. Delphi XE3 introduces the cooperation between TRibbon and TForm when a TRibbon style is active. (TRibbon automatically switches OFF seBorder in TForm.StyleElements and takes responsibility for drawing of nonclient area.) For synchronization link all 3 Ribbon type Luna, Obsidian and Silver styles to an application and loads them concurrently with switching an application GUI to Ribbon style.

Adding Ribbon type styles in Project Options:

Example of concurrent switching of styles:

procedure TForm1.frmRibbonDemoMainRibbonStyleLunaActnExecute(Sender: TObject);
begin
TStyleManager.SetStyle(’Luna’);
Ribbon1.Style := RibbonLunaStyle;
end;

Posted by Alexey Sharagin on December 16th, 2012 under VCL Styles | Comment now »


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.

TMenuBar
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):


TMainMenu
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);
begin

TStyleManager.SetStyleFromFile(’Jet.style’);
TStyleManager.SetStyleFromFileHiRes(’Jet2x.style’);

end;

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.

Posted by Alexey Sharagin on December 16th, 2012 under FireMonkey styles | 6 Comments »


Настройка FireMonkey стиля на контролах и формах

Cвойство StyleLookUp

С появлением Metropolis UI стилей особенно возросла актуальность TControl.StyleLookUp  свойства. Это связано с тем, что в данных стилях содержится большое количество стилей для кнопок,  панелей, списков и других элементов управления. Каждый контрол имеет стиль по умолчанию, но вы можете поменять стиль  на любой доступный для данного класса.  Для этого, как раз, служит StyleLookUp свойство,  в котором вы можете прописать название дополнительного стиля контрола из общего стиля, загруженного в TStyleBook или дефолтного стиля для определенной платформы.    Для удобства использования этого свойства, в режиме проектирования, был добавлен всплывающий список с предпросмотром всех возможных стилей.  Теперь вы можете с легкостью выбрать стиль для любого контрола.  При создании своих стилей для контролов, необходимо учитывать следующее правило для названия стиля.  Например,  для того, чтобы ваш стиль для TButton попал в список StyleLookUp, необходимо   в название добавить слово "button" ("mybutton",  "specialbutton" ). Если вы сделали стиль для TListBox, тогда в  названии должно быть слово  "listbox" ("mylistbox", "speciallistbox") и т.д.

Пример выбора стиля для TButton в Metropolis UI Black:

Свойство  StyleSettings

В Delphi XE3 появилось новое свойство TControl.StyleSettings = set of (ssFamily, ssSize, ssStyle, ssFontColor, ssOther) позволяет включать и отключать  свойства шрифта, который берется из стиля. Дело все в том, что в некоторых стилях, в частности Metropolis UI стилях, задается название шрифта, размер.  Если вы не хотите использовать стиль для текста по умолчанию , то вы можете отключить следующие парметры из стиля:  ssFamily - название шрифта, ssSize - размер шрифта, ssStyle-стиль шрифта,  ssFontColor - цвет  шрифта,  ssOther - позиция текста.

Пример TButton с включенным ssSize (Button1) и выключенном ssSize (Button2):

Включение и отключение стилизации рамки форм в приложении

В Delphi XE3 появилась возможность стилизовать рамку формы.  В Windows  приложениях рамка стилизуется полностью: бордер + кнопки, в приложениях для Mac OS стилизуется только фон заголовка у формы, не затрагивая системные кнопки, что является общей тенденцией для приложений в  Mac OS.
Для включения и отключения стилизации рамки  формы используйте TForm.EnableBorderStyling свойство.  По умолчанию стоит значение True, т.е. рамка будет стилизоваться. Следует отметить , что не все стили содержат элементы стиля для рамки, и в этом случае рамка будет системной.

Стилизация рамки на примере стиля Jet в Mac OS:

Стилизация рамки на примере стиля Jet в Windows:

Стилизация главного меню формы

В Delphi XE3 главное меню можно организовать двумя способами: использовать TMenuBar контрол или TMainMenu компонент.

TMenuBar
Вы можете использовать данный контрол для создания главного меню в клиенской части формы. Следует отметить, что если вы пишите приложение под Mac OS, то в данном случае меню не появится на Mac OS меню баре - оно будет всегда в клиентской части.

Пример использования TMenuBar c Transparent.style. Согласитесь, что выглядит очень эффектно с полупрозрачной графикой:


TMainMenu
При использовании TMainMenu компонента главное меню  создается в неклиентской части формы, а в Mac OS меню появится на Mac OS меню баре. В Windows приложениях, если в стиле определена графика для рамки формы, главное меню и все подменю  будут также стилизованы. Если рамка не задана в стиле или вы отключили стилизацию для рамки (TForm.EnableBorderStyling = False), то главное меню и подменю, как и рамка, будут системными.

Главное меню в Windows c помощью TMainMenu на примере стиля Jet:

Главное меню в Mac OS  c помощью TMainMenu на примере стиля Jet:

Поддержка дисплея Retina в Mac Book Pro

Как вы уже знаете, компания Apple выпустила Mac Book Pro c Retina дисплеем, чем озадачила многих разработчиков ПО, т.к. для корректного отображения программы нужны изменения как в коде, так и в растровой  графике для элементов управления - она должна быть также с высоким разрешением.  Если векторные стили в Delphi XE3  подстраиваются под высокое разрешение автоматически, то с растровыми стилями не все так просто.  Для поддержки Retina дисплея, в приложении с растровым стилем должен быть загружен дополнительный стиль с высоким разрешением, которое ровно в 2 раза больше обычного. Далее стиль будет автоматически переключаться, в зависимости от того, на каком дисплее находится форма.

Использование TStyleBook
1. Добавьте два TStyleBook компонента на форму, например, StyleBook1 и StyleBook2.
2. Загрузите обычный стиль в StyleBook1 (например, Jet.style).
3. Загрузите Retina стиль в StyleBook2. Как правило, файл с таким стилем именуется как [имястиля]2x.style (например, Jet2x.style).
4. Установите свойство StyleBook1.HiResStyleBook как StyleBook2.
5. Установите cвойство TForm.StyleBook как StyleBook1

Использование TStyleManager

Вы можете последовательно вызвать методы: TStyleManager.SetStyleFromFile для загрузки обычного стиля и TStyleManager.SetStyleFromFileHiRes для загрузки Retina стиля.

Например:
procedure TForm1.FormCreate(Sender: TObject);
begin

TStyleManager.SetStyleFromFile(’Jet.style’);
TStyleManager.SetStyleFromFileHiRes(’Jet2x.style’);

end;

Для наглядности отличия стилей обычных и Retina стилей ниже приведены примеры графики для кнопки.

Кнопка для обычного стиля:

Та же самая кнопка, но для Retina стиля:

Также стоит отметить, что в настоящее время ведется работа над премиум пакетом растровых стилей для FireMonkey, где все стили будут иметь Retina вариант.

Posted by Alexey Sharagin on October 8th, 2012 under FireMonkey styles | 2 Comments »


Настройка VCL стиля на контролах и формах

Свойство StyleElements

В Delphi XE3 появилась возможность гибко настроить применение  стиля к различным элементам контролов: цвету шрифта, клиентcкой части,  рамке и скролбарам. Для этого было добавлено свойство TControl.StyleElements = set of (seFont, seClient, seBorder).   В разных  контролах свойство может работать по-разному, в зависимости  от сложности самого контрола и логики его работы.   Данное свойство можно применять как в режиме проектирования,  так и в режиме выполнения приложения.

По умолчанию все элементы включены:

Пример настройки стиля в  TMemo:

Также можно использовать, например,  TForm.StyleElements = TForm.StyleElements  - [seBorder] для отключения применения стиля к рамке конкретной формы.

Глобальное  включение и отключение стилизации рамки формы в приложении

Для глобального отключения стилизации рамки форм в Delphi XE3 было добавлено свойство TStyleManager.FormBorderStyle = (fbsCurrentStyle, fbsSystemStyle).   Значение  fbsCurrentStyle  означает,  что форма будет имееть рамку от текущего стиля, а fbsSystemStyle -  форма будет имееть всегда системную рамку.   Вы можете применить это свойство,  добавив соответствующий код в Project Source или в режиме работы приложения.  По умолчанию стоит значение fbsCurrentStyle.

Например, для отключения стилизованной рамки используйте следующий код в Project Source:

Application.Initialize;
Application.MainFormOnTaskbar := True;

TStyleManager.FormBorderStyle :=  fbsSystemStyle;

TStyleManager.TrySetStyle(’Carbon’);
Application.CreateForm(TForm1, Form1);
Application.Run;

Включение эффектов

В Delphi XE3, при активном стиле, вы можете использовать фэйдинг эффект на кнопках класса TButton и TBitBtn. Для этого было добавлено свойство TStyleManager.AnimationOnControls. Вы можете включить это свойство, добавив соответсвующий код в Project Source или в режиме работы приложения. Для этого эффекта VCL использует системные функции, таким образом сама анимация происходит за счет возможностей системы и доступна в ОС начиная с Windows Vista. По-умоланию стоит значение False.

Пример включения данного свойства в Project Source:

Application.Initialize;

TStyleManager.AnimationOnControls := True

TStyleManager.TrySetStyle(’Carbon’);
Application.CreateForm(TForm1, Form1);
Application.Run;

Взаимодействие и синхронизация стилей TRibbon и VCL стилей

В Delphi XE3 вы можете создать приложение в едином с TRibbon стиле. Для этого были созданы 3 специальных стиля Luna, Obsidian и Silver, а также добавлено взаимодействие TRibbon с TForm при активном стиле (TRibbon автоматически отключает seBorder в TForm.StyleElements и сам отвечает за прорисовку неклиенской части). Для синхронизации подключите данные 3 стиля к приложению и загружайте их одновременно со сменой стиля TRibbon.

Подключение стилей в Project options:

Пример одновременного переключения стиля:

procedure TForm1.frmRibbonDemoMainRibbonStyleLunaActnExecute(Sender: TObject);
begin
TStyleManager.SetStyle(’Luna’);
Ribbon1.Style := RibbonLunaStyle;
end;

Posted by Alexey Sharagin on October 4th, 2012 under VCL Styles | Comment now »




Server Response from: BLOGS2