Changing your application's look and feel with VCL styles and no code

VCL styles are a major new entry in the latest versions of Delphi. They have been introduced in Delphi XE2 and are still one of the less-known features for the good old Delphi developers. However, as usual, some businessmen say looks matter, so the look and feel of your application could be one of the reasons to choose your product over one from a competitor. Consider that with a few mouse clicks you can apply many different styles to your application to change the look and feel of your applications. So why not give it a try?

Getting ready

VCL styles can be used to revamp an old application or to create a new one with a nonstandard GUI. VCL styles are a completely different beast to FireMonkey styles. They are both styles but with completely different approaches and behavior.

To get started with VCL styles, we'll use a new application. Let's create a new VCL application and drag-and-drop some components onto the main form (for example, two TButton components, one TListBox component, one TComboBox component, and a couple of TCheckBox components).

The following screenshot is the resultant form that runs on a Windows 7 machine:

A form without style

How to do it...

Now we've to apply a set of nice styles. To do this, perform the following steps:

1. Navigate to Project | Options. In the resultant dialog, go to Application | Appearance and select all the styles that we want to include in our application.
2. Using the Preview button, the IDE shows a simple demo form with some controls, and we can get an idea about the final result of our styled form. Feel free to experiment and choose the style—or set of styles—that you like. Only one style will be used at a time, but we can link the necessary resources to the executable and select the proper one at runtime.
3. After selecting all the required styles from the list, we've to select one in the combobox at the bottom of the screen. This style will be the default style for our form and will be loaded as soon as the application starts. You can delay this choice and make it at runtime using code if you prefer.
4. Click on OK and hit F9 (or navigate to Run | Run) and your application is styled! The resultant form is shown in the following screenshot:
   

   The same form as the preceding one but with the Iceberg Classico style applied

How it works…

Selecting one or more styles by navigating to Project | Options | Application | Appearance can cause the Delphi linker to link the style resource to your executable. It is possible to link many styles to your executable, but you can use only one style at time. So, how does Delphi know which style you want to use when there are more than one styles? If we check the Project file (the file with the .dpr extension) by navigating to Project | View Source, you can see where and how this little magic happens.

The following lines are the interesting part:

begin
  Application.Initialize;
  Application.MainFormOnTaskbar := True;
 TStyleManager.TrySetStyle('Iceberg Classico');
  Application.CreateForm(TMainForm, MainForm);
  Application.Run;
end.

When we've selected the Iceberg Classico style as the default style, the Delphi IDE adds a line just before the creation of the main form, setting the default style for the application using the TStyleManager.TrySetStyle static method.

TStyleManager is a very important class when dealing with VCL styles. We'll see more about it in the next recipe when we'll learn how to change a style at runtime.

There's more...

Delphi and C++Builder XE6 come with 29 VCL styles available in C:\Program Files (x86)\Embarcadero\Studio\14.0\Redist\styles\vcl\ (with a standard installation).

Moreover, it is possible to create your own styles or modify the existing ones by using the Bitmap Style Designer available at Tools | Bitmap Style Designer menu. The Bitmap Style Designer also provides test applications to test VCL styles.

For more details on how to create or customize a VCL style, check the following link:

http://docwiki.embarcadero.com/RADStudio/XE6/en/Creating_a_Style_using_the_Bitmap_Style_Designer