Working with VCL Styles - Tips and Tricks

Posted by on in Blogs
Last week, we held RAD Studio XE7 US tour events in many cities throughout the US. We showed many of the great features that are part of XE7 for VCL developers, including VCL styling, VCL taskbar controls, tethering, bluetooth, parallel programming, EMS and more.

Based on some of the questions we got at our events, I thought I would create a post with some VCL style tips and tricks.

Setting a custom style that applies to your entire VCL application

To apply a VCL style to your application, open your VCL project in RAD Studio XE7. Then go to Project>Options>Application>Appearance and select one of the Custom Styles. Make sure that the Default Style drop-down shows the custom style you selected as your new default application style.

Adding a style selector menu to your VCL application

If you want to provide the option to your customers to choose from several styles so they can theme your application as they like, you can add a style selector menu. Place a TMainMenu component onto your form and right-click to bring up the Menu Designer. Add several menu items, and add a Caption for each that reflects the name of the style the user is selecting or the type of style it is (i.e. light, dark etc.).

Place the three styles (Auric, Emerald, Golden Graphite) into a Styles folder within your project folder (i.e. C:/MyProject/Styles). Then change the Delphi Compiler>Output directory path as shown in the screenshot below.

Set up on-click events for each menu item.

Note: The Emerald style is part of the current XE7 Premium Style Pack bonus offer
unit StyleSwitch;


Winapi.Windows, Winapi.Messages, System.SysUtils, System.Variants, System.Classes, Vcl.Graphics,
Vcl.Controls, Vcl.Forms, Vcl.Dialogs, Vcl.StdCtrls, VCL.Styles, VCL.Themes,

TForm11 = class(TForm)
RadioButton1: TRadioButton;
CheckBox1: TCheckBox;
MainMenu1: TMainMenu;
Styles1: TMenuItem;
Auric1: TMenuItem;
Emerald1: TMenuItem;
Graphite1: TMenuItem;
procedure Auric1Click(Sender: TObject);
procedure FormCreate(Sender: TObject);
procedure Emerald1Click(Sender: TObject);
procedure Graphite1Click(Sender: TObject);
{ Private declarations }
{ Public declarations }

Form11: TForm11;


{$R *.dfm}

StylePath: string;

procedure TForm11.Auric1Click(Sender: TObject);
if not TStyleManager.TrySetStyle('Auric', False) then
TStyleManager.LoadFromFile(StylePath + 'Auric.vsf');
TStyleManager.TrySetStyle('Auric', False); // set style after loading it

procedure TForm11.Emerald1Click(Sender: TObject);
if not TStyleManager.TrySetStyle('Emerald', False) then
TStyleManager.LoadFromFile(StylePath + 'Emerald.vsf');
TStyleManager.TrySetStyle('Emerald', False); // set style after loading it

procedure TForm11.FormCreate(Sender: TObject);
StylePath := ExtractFilePath(Application.ExeName) + 'Styles\';

procedure TForm11.Graphite1Click(Sender: TObject);
if not TStyleManager.TrySetStyle('Golden Graphite', False) then
TStyleManager.LoadFromFile(StylePath + 'GoldenGraphite.vsf');
TStyleManager.TrySetStyle('Golden Graphite', False); // set style after loading it

Adding premium styles for use in the IDE

In addition to placing the .vsf files into a Styles folder inside your project folder as described above, you can also put them into the Styles directory. The Styles directory can be accessed at: C:\Users\Public\Documents\Embarcadero\Studio\15.0\Styles

The styles will then appear inside the IDE so that you can easily apply them to your application via Project->Options.

Renaming VCL styles

If you are creating your own VCL styles from scratch, or are looking to rename a style you have already created, you will need to open the style in the Bitmap Style Designer. Go to Tools>Bitmap Style Designer. Then go to File>Open and browse to the location of the .vsf file on disk. Change the Name as shown in the screenshot below, then go to File>Save to save the style with the name file name. This change will then be reflected in Project>Options>Application>Appearance as long as the renamed style is located in C:\Users\Public\Documents\Embarcadero\Studio\15.0\Styles.



Gold User, Rank: 5, Points: 558
Senior Product Manager, RAD Studio


Check out more tips and tricks in this development video: