Adding Some Style to the VCL TileControl

In my previous post in the DevExpress VCL TileControl I laid out the basics of getting a Metro-inspired application functional. However, while the result definitely had function, it was a little short on “form”.

When using the VCL TileControl, odds are you will also want a Metro-inspired skin for your application. While the ExpressSkins Library does not currently ship with any Metro-inspired skins, the RealtorWorld demo that ships with the DevExpress VCL TileControl includes two such skins: MetroBlack and MetroWhite.

Making use of these skins in your own Metro-inspired VCL application is a cinch.

To get started, copy the two SKINRES files from the following path to your own application’s working directory:

C:\Program Files\Developer Express.VCL\ExpressTile Control\Demos\Data

Next, locate the TdxSkinController component on the Tool Palette and add it to Form1 of the TileControlSample project created in my previous post. You can download the source to that project here.

Add a FormCreate handler to Form1 with the following code:

procedure TForm1.FormCreate(Sender: TObject);
begin
  dxTileControl1.LookAndFeel.NativeStyle := False; //so skins take affect
  dxSkinController1.SkinName := 'UserSkin'; //so we can load a .skinres
  dxSkinsUserSkinLoadFromFile('MetroBlack.skinres');
end;

And that’s all it takes to give our sample a dark, Metro-inspired skin.

Replace the reference to MetroBlack.skinres with MetroWhite.skinres in order to use the lighter Metro-inspired skin.