Have an amazing solution built in RAD Studio? Let us know. Looking for discounts? Visit our Special Offers page!

Customizing and Creating VCL Styles

Delphi, C++Builder and RAD Studio include various VCL styles out of the box. These can be used for your Windows applications and customized via the included Bitmap Style Designer (Tools->Bitmap Style Designer). You can also create a new style from scratch. The easiest way to get started with a brand new style is to use the VCL style template in the Bitmap Style Designer as a guide. Below is a general outline of the steps required.

  • a) File->’New style for VCL or FireMonkey’ to start with a template
  • b) File->Open to select an existing .vsf style (i.e. Carbon.vsf or Auric.vsf) for editing
  • Expand the Images node and click on ‘style.png’
  • Click ‘Export’ to export the png to a folder on your hard drive
  • Open the png with the graphics program of your choice. In my case, I used Photoshop
  • After you are done editing the style/creating a new style, select the style.png in the Style Designer, click update and select the updated png to replace the existing png
  • Select each style element, and create a selection outline for each bitmap associated with a specific Bitmap property (hot, pressed etc.) in the Inspector
  • Save the vsf style and apply it to your VCL application

In my case, I wanted to customize the CharcoalDarkSlate.vsf VCL style that can be found in C:\Users\Public\Documents\RAD Studio\12.0\Styles

I opened the png in Photoshop. You can design several states for each graphic via the Bitmap property in the Inspector, i.e. Bitmap, BitmapHot, BitmapPressed, BitmapFocused etc.. In my example, I decided to change the style of the system close button from a dark circle to a blue square.


After creating the new shapes in Photoshop, I pasted them into the style.png. You can just place them over the existing circular buttons and cover them, or remove those from the graphic beforehand. We are going to select an outline for each button later on, so either approach works. Key is to keep the transparency of the style.png file.


I also update the style of the trackbar to a brown/wooden theme.


After completing the style changes, I saved my new style.png file, went back to the style in the Style Designer and clicked on Update. I then browsed to the location of my new style, selected it and clicked OK.

To make sure the new close buttons are properly mapped, expand the Objects-Form node until you have the sysButtons-btnClose node selected:

In the Inspector, select the … next to Bitmap. The Bitmap Property Editor appears. This editor allows you to select the outline of your clickable button. Click to select the left top corner of the button via a simple mouse click. Then, to select the bottom right corner (to create the entire outline), control-click onto the bottom right of the square button. Repeat this process for each of the Bitmap options in the Object Inspector for the selected style element.

When you are done, click ‘Save’ and preview your style in the VCL Style Viewer by clicking F9 in the Bitmap Style Designer.

Below is an example of what the Trackbar styling looks like.

To be able to utilize this style in your VCL applications, place the .vsf file into C:\Users\Public\Documents\RAD Studio\12.0\Styles

As my final step, I created a new VCL application in the IDE and placed the Trackbar component onto my form. Via Project->Options->Application->Appearance, I selected my custom style from the list, and also made sure it was selected as the ‘Default Style’ in the drop-down menu and clicked OK to select the style.

In order to see the style, you will need to run your application since VCL styles are shown at runtime.

For additional information, please see http://docwiki.embarcadero.com/RADStudio/XE5/en/VCL_Styles_Overview



What's New for RAD Studio 11

Reduce development time and get to market faster with RAD Studio, Delphi, or C++Builder.
Design. Code. Compile. Deploy.
Start Free Trial   Upgrade Today

   Free Delphi Community Edition   Free C++Builder Community Edition

About author

Director of Product Management, Developer Tools Idera, Inc.
Related posts
CodeDelphiRAD Studio

All You Need To Know About Using Low Code REST

DelphiRAD Studio

Everything You Need To Modernize With RAD Server

DelphiNewsRAD Studio

Announcing DelphiCon 2021!

C++DelphiIDENewsRAD Studio

New in RAD Studio 11: High DPI IDE and Form Designing!

Leave a Reply

This site uses Akismet to reduce spam. Learn how your comment data is processed.