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 FilesDeveloper Express.VCLExpressTile ControlDemosData

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.

You can download the updated Delphi sample here.

0 thoughts on “Adding Some Style to the VCL TileControl

Leave a Reply

Your email address will not be published. Required fields are marked *

You may use these HTML tags and attributes: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>