Working with VCL Styles - Tips and Tricks

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;

interface

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

type
  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
    { Private declarations }
  public
    { Public declarations }
  end;

var
  Form11: TForm11;

implementation

{$R *.dfm}

var
  StylePath: string;

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

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

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

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

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.

Regards,

Sarina