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)
September 1, 2011 at 10:08 pm
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…
September 1, 2011 at 10:22 pm
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?
September 1, 2011 at 10:32 pm
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.
Pingback: ¡Felicidades Septiembre! | Delphi solidario
September 2, 2011 at 4:52 am
Rodrigo, refreshing the page did make the screen-shots visible.
September 2, 2011 at 8:54 am
no screen-shots after refresh!
September 2, 2011 at 4:00 pm
Sorry, It seems a WordPress problem.
September 2, 2011 at 8:56 am
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).
September 2, 2011 at 4:07 pm
Yes, the VCL Styles works even if you have the classic Windows style selected.
September 2, 2011 at 1:08 pm
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
September 4, 2011 at 7:12 pm
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 :)
September 2, 2011 at 1:16 pm
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.
Pingback: Paweł Głowacki : Links to resources about Delphi XE2 and RAD Studio XE2
September 4, 2011 at 1:03 am
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?
Pingback: /*Prog*/ Delphi-Neftalí /*finProg*/ » Una semana más… (13/09/2011)
Pingback: /*Prog*/ Delphi-Neftalí /*finProg*/ » Testeando XE2… (Estilos)
September 22, 2011 at 6:22 am
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?
September 22, 2011 at 9:17 am
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.
September 26, 2011 at 10:29 am
I’d love a Mac OS X looking VCL style!
September 27, 2011 at 2:10 pm
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.
October 18, 2011 at 11:12 pm
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.
October 11, 2011 at 5:30 am
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)
November 8, 2011 at 9:23 am
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?
December 2, 2011 at 9:01 pm
You must create a customstyle hook, to modify the way of the control is drawn.
Pingback: Delphi XE2 – VCL Styles « Savério Vertoni
December 1, 2011 at 4:52 am
hi
when i change style
the color of my label changed to Black but i want some of them be red or …!
help pl!
December 1, 2011 at 9:39 am
According to Embarcadero This is how the Styles feature is intended to work, you can get more info in this QC Report.
December 1, 2011 at 10:07 am
thanks
but i cant find a Solution
Pingback: RAD Studio XE2 정보 모음
January 5, 2012 at 5:14 am
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.
January 5, 2012 at 7:54 am
I fixed this by changing the uses themes to uses VCL.themes, VCL.Styles
Pingback: Delphi Was ist FireMonkey? - Seite 2 - Delphi-PRAXiS
March 20, 2012 at 11:20 am
hi
how i can create customstyle hook for label?
March 20, 2012 at 11:25 am
The TLabel doesn’t have a Style hook beause is not a TWinControl, so the only way is override the paint method.
March 20, 2012 at 11:26 am
thanks!
but how? can you help me?
March 20, 2012 at 11:30 am
Check the code of the TCustomlabel.Paint method to see how it works.
March 20, 2012 at 11:47 am
thanks
but i dont find Paint method in TCustomlabel class!
March 20, 2012 at 11:51 am
Are you sure ? goto the line 2208 in the Vcl.StdCtrls unit (XE2 Update 4)
March 20, 2012 at 1:11 pm
im so sorry
How do I use it in my program؟
thanks
March 20, 2012 at 1:16 pm
Try asking this question in a forum like http://stackoverflow.com , in that way many people will benefit of the answer which you get.
April 23, 2012 at 8:44 am
Nice info. I’m currently not using XE2 yet, but reading this has made me consider to use it.
December 15, 2012 at 5:39 pm
This is an beautiful article. Its hard work that gives birth to technological innovation.
Keep up the good Delphi spirit!
February 5, 2013 at 8:49 pm
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?
February 6, 2013 at 9:56 pm
What do you mean with “I could not find the specified path for XE3”?
April 5, 2013 at 1:52 am
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.
April 5, 2013 at 1:56 am
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 :)
April 5, 2013 at 4:52 am
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.
Pingback: VCL Styles | Code Couture
Pingback: Delphi Zeichnen auf NonClientArea mit W7 Theme? - Seite 2 - Delphi-PRAXiS
May 29, 2013 at 9:58 pm
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.
May 29, 2013 at 10:08 pm
Jessica, one of these days I will update this article. which was written when Delphi XE2 was released :)
August 19, 2013 at 5:06 pm
Is it possible to restore/enable the shadows around windows while using styles?
August 19, 2013 at 5:15 pm
Hi Andrew, what do you mean with “shadows around windows”? can you post a sample image?
September 9, 2013 at 5:56 pm
Don’t see an option to include an image, however it’s simple enough to replicate.
– Create a VCL Forms Application, build it, run it on Windows 7 Aero and you’ll see the shadows around Form1.
– Change the project to use a VCL Style, build it, run it on Windows 7 with Aero and you’ll see there are no shadows.
I’ve tried setting the WindowsClass with CS_DROPSHADOW, but that seems to have no effect.
September 10, 2013 at 12:52 am
Do you try the answer of this question http://stackoverflow.com/questions/18324571/show-the-window-shadow-when-using-vcl-styles/18346275#18346275 ?
September 10, 2013 at 5:55 pm
Yes. I have that in place at the moment, but it does not create the same shadow on Windows 7 as the form without the style. Plus, if a form is on top of another form, there is no shadow at all where they overlap.
I did read that there is a problem with the Z-Order of the shadow, in that they are always drawn behind the main form. There is an answer posted http://stackoverflow.com/questions/3530051/borderless-tform-with-drop-shadow/3537748#3537748
This whole thing comes about because of comments we are receiving from our customers that say the child and popup forms that our app generates are hard to distinguish from the main form, especially with certain styles, because of the lack of shadows.
December 6, 2013 at 7:34 pm
Very Thanks!!!!
June 12, 2014 at 3:01 am
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
July 7, 2014 at 9:52 pm
Sorry but I can’t help you with this issue :( , you must try on the DevExpress forums.
March 23, 2016 at 12:13 am
Andrew Hayes, do you find something more about form shadows with vcl styles enabled?. CS_DROPSHADOW have some problems, like zorder and fails in animation effect on Windows 7