The Road to Delphi – a Blog about programming

Delphi – Free Pascal – Oxygene

Exploring Delphi XE2 – VCL Styles Part I

59 Comments

The new version of Rad Studio include a very nice  feature called VCL Styles,  this functionality allows you to apply a skin (theme) to any VCL Form application. So in this post I will show you the basics about how load in runtime an embedded style or read the style file directly from the disk. besides as how you can easily create a new style.

Working with VCL Styles

You can add  a VCL Style to your application directly from the Delphi IDE menu entry    Project-> Options -> Application -> Appearance Selecting the styles which you want to include in your Application and choosing a default style to apply. when you select a style, this is stored in the exe as a resource of the type VCLSTYLE with a 80 kb size approx by style.


In order to work with the VCL Styles you must use the TStyleManager class located in the Themes unit and include the Vcl.Styles  unit to enable the VCL styles support.

Registering a Style

To load (register) a VCL Style from a File you must use the LoadFromFile  function of the TStyleManager class.

procedure RegisterStyleFromDisk(const StyleFileName: string);
begin
 try
   if TStyleManager.IsValidStyle(StyleFileName) then
     TStyleManager.LoadFromFile(StyleFileName); //beware in this line you are only loading and registering a VCL Style and not setting as the current style.
   else
     ShowMessage('the Style is not valid');
end;

And to load an style from a resource use the LoadFromResource or TryLoadFromResource

procedure RegisterStyleFromResource(const StyleResource: string);
begin
   TStyleManager.LoadFromResource(HInstance, StyleResource); //beware in this line you are only loading and registering a VCL Style and not setting as the current style.
end;

Setting a Style

To set in Runtime an already loaded (registered) style you must use the SetStyle(or TrySetStyle) procedure.

The SetStyle function has 3 overloaded versions

Use this version when you want set a registered style using his name

//class procedure SetStyle(const Name: string); overload;
TStyleManager.SetStyle('StyleName');

Use this version when you want set registered style using a instance to the style

//class procedure SetStyle(Style: TCustomStyleServices); overload;
TStyleManager.SetStyle(TStyleManager.Style['StyleName']);

And finally use this version when you has a handle to the style returned by the functions LoadFromFile and LoadFromResource

//class procedure SetStyle(Handle: TStyleServicesHandle); overload;
TStyleManager.SetStyle(TStyleManager.LoadFromFile(StyleFileName))

Finally using the above functions I wrote a simple app to register and set VCL Styles


Download the source code and binaries from here

Creating New Styles

The Rad Studio XE2 includes the VCL Style designer which is a very handy tool to edit and create new VCL Styles, you can call this tool from the IDE Menu Tools -> VCL Style designer or executing directly (the file VclStyleDesigner.exe) form the bin directory where the Rad Studio is installed. this is an image of the tool

The main element is the image under the images category, which define how the control will be drawn, also you can edit every single aspect of the Style like the buttons, checkboxes, scrollbars and so on.

The Rad Studio XE2 only includes 5 predefined styles in the <Documents>\RAD Studio\9.0\Styles folder, But you can easily create your own styles using a predefined theme as template, check the next list of steps to create a New Style.

  • First from the VCL Style designer load the style to use as template using the File->Open option
  • Now go to the Image->Export option to save the image as png

  •  Then Load the Image in your prefered image editor and play a little, for example changing the hue and saturation of the image.


  • Now back in the VCL Style designer go to the option Image->Update , select the modified image and then press ok in the dialog


  • Then go to the Style->Assign Colors option to let the application adjust the colors of the style according to the new image.
  • Now press F9 or Test->Style to check the result


  • Finally modify the name of the Style and use the option File->Save As to store your new creation.

Following these simple steps in a few minutes I create a set of new styles ready to use.

Download the Styles from here

Tip : you can copy the styles  to the <Documents>\RAD Studio\9.0\Styles folder and these will be recognized by Rad Studio XE2 when your open the Project-> Options -> Application -> Appearance option)

About these ads

Author: Rodrigo

Just another Delphi guy.

59 thoughts on “Exploring Delphi XE2 – VCL Styles Part I

  1. pretty neat, but my customers would not really like the “eye candy” to be taken to this level, they want the “windows native feel” — can’t argue with them here…

  2. The posted images are missing. Only the sample style images at the end of the post are ok.

    I can set different styles for the same class of components? For example, in a TForm the buttons have a style in another TForm x and the y have a style buttons in the same application?

    • Fabricio it seems a WordPress problem. Try refeshing the page. About your question as far I know you can only enable a VCL Style for all the application and not for a particular form or component.

  3. Pingback: ¡Felicidades Septiembre! | Delphi solidario

  4. Rodrigo, refreshing the page did make the screen-shots visible.

  5. Hi Rodrigo, are those styles really OS version aware ? Or, in other words, will my application with these styles look always the same even if I will have e.g. classic Windows style selected ? And about the screenshots here; they are really missing now (404 — File not found).

  6. It seems that TStyleManager methods are static: you can call them without having to create an instance of the class.

    TStyleManager.SetStyle(‘Ruby Graphite’);

    Nice article! And really nice and powerful feature!
    ~Marco Breveglieri

    • Thanks Marco for your comments, about the SetStyle you are right which this a static method, so is not necesary create an instance of the TStyleManager class. The sample code which I post create an instance because is part of a bigger project which uses another options of the class :)

  7. Thanks for this article. I liked the graphite styles, would be nice to combine the graphite style with the scroll bar and windows control (in right corner) shapes.The graphite shapes seem too builky.

  8. Pingback: Paweł Głowacki : Links to resources about Delphi XE2 and RAD Studio XE2

  9. Thanks! very nice tutorial and styles. Do you know if there’s a way to have a top border with a different color in the page control tabs with this utility?

  10. Pingback: /*Prog*/ Delphi-Neftalí /*finProg*/ » Una semana más… (13/09/2011)

  11. Pingback: /*Prog*/ Delphi-Neftalí /*finProg*/ » Testeando XE2… (Estilos)

  12. Nice examples.

    But could you explain the difference between using TStyleManager. ans first creating one and the use it’s methods.
    Basically they’re static methods, so creating a stylemanager, doesn’t do anything extra beside creating a TStyleManager object.

    Or does the object has static and non-static methods?

    • Ronald as explain in another comment, the source code posted is part of a larger project which includes a helper class to the TStyleManager object because this class does not have some basic funcionalities like unregister a loaded style and check if a style is already registered. Anyway I just deleted the code which create the instances to the TStyleManager class to avoid confusion.

  13. I’d love a Mac OS X looking VCL style!

  14. What I am missing is the following: How to create/add an own style for a new/own created component (may sub classed from panel / group box), while I cannot create any additional style objects.

    • You don’t need create a new style, instead you must make your control theme aware and use the StyleServices.GetElementDetails and StyleServices.DrawElement to paint your control. additionally depending of the complexity of your component you may need create a new StyleHook and register with the StyleEngine class constructor.

  15. Not sure if anyone has noticed, but upon exporting style.png and updating/importing it – all controls loose their anti-aliased look and other artifacts appear.

    This occurs even if you do not alter style.png, just export and reimport it.

    You can see artifacts on the screenshots above, the groupboxes have little curved lines on the inner corners which shouldnt be there.

    All controls loose their ‘smooth’ look, and to me look ugly in comparison to a default style that hasnt been touched by the style designer.

    This appears to be an export/import bug with the current style designer (amongst numerous other interface bugs that the style designer has)

  16. without the styles I use the function
    if xxx then
    edit1.color: = clRed
    else edit1.color: = clBlue;
    now if I enable styles he does not works.
    Anyone know how to change the color inside of the combo to a different style?

  17. Pingback: Delphi XE2 – VCL Styles « Savério Vertoni

  18. hi
    when i change style
    the color of my label changed to Black but i want some of them be red or …!
    help pl!

  19. thanks
    but i cant find a Solution

  20. Pingback: RAD Studio XE2 정보 모음

  21. Has anyone managed to get a style to load in a DLL?
    StyleServices.LoadFromFile(‘stylex.vsf’) works in exe but I get EcustomStyleException ‘Feature not supported by this style’ when loading the same one in a DLL.

  22. Pingback: Delphi Was ist FireMonkey? - Seite 2 - Delphi-PRAXiS

  23. hi
    how i can create customstyle hook for label?

  24. thanks!
    but how? can you help me?

  25. thanks
    but i dont find Paint method in TCustomlabel class!

  26. im so sorry
    How do I use it in my program؟

    thanks

  27. Nice info. I’m currently not using XE2 yet, but reading this has made me consider to use it.

  28. This is an beautiful article. Its hard work that gives birth to technological innovation.

    Keep up the good Delphi spirit!

  29. Great article. However, I could not find the specified path for XE3. I found them in D:\Borland\Delphi XE3\Embarcadero\RAD Studio\10.0\Redist\styles\vcl\ (my folder area). Putting your XE2 .VSF styles in the download do not get found. Any solution?

    • What do you mean with “I could not find the specified path for XE3″?

      • What Howard means is that in XE3 the location for styles have been moved to a different directory (\Embarcadero\RAD Studio\10.0\Redist\styles\vcl\ instead of \Embarcadero\RAD Studio\9.0\styles\).

        The problem, which I am having too, is that no matter what I put in this directory in XE3 no custom styles will show up in the IDE.

        • Actually I just realised it was a misread of the location. As per your instructions, its supposed to be the Documents folder not the Embarcadero folder. Oops :)

          • Yes. I should have closed this one off in February when I reread and put the VSF files in the Documents folder. I’m now happily populating my own subset with derived styles. Works like a charm, and I’ve also got run-time VSF file loading working with the application that was giving me all my problems.

  30. Pingback: VCL Styles | Code Couture

  31. Pingback: Delphi Zeichnen auf NonClientArea mit W7 Theme? - Seite 2 - Delphi-PRAXiS

  32. Great tutorial. It might be worth a note that at least as of XE4, they’ve renamed “VCL Style Designer” to “Bitmap Style Designer” and the EXE name is BitmapStyleDesigner.exe so if there’s no VclStyleDesigner.exe that’s why.

  33. Is it possible to restore/enable the shadows around windows while using styles?

  34. Very Thanks!!!!

  35. Hi Rodrigo,

    When I load a *.vsf file and apply the skin, is it possible to change some properties of components?

    Example:

    bool aaa = dxTabbedMDIManager_Main->Active;
    //aaa is TRUE

    //VCL Skin
    TStyleManager::LoadFromFile(“XXXSkin.vsf”);
    TStyleManager::SetStyle(“XXX”);

    aaa = dxTabbedMDIManager_Main->Active;
    //aaa is FALSE

    dxTabbedMDIManager_Main is TdxTabbedMDIManager component.

    I can’t sure whether other properties of components are changed.

    Do you have any idea for this issue?

    Thanks.

    Windows 7 x64
    Embarcadero C++Builder XE3
    DevExpress 13.2.4

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s

Follow

Get every new post delivered to your Inbox.

Join 674 other followers