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

Visual Component Library (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 lesser 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 one product over another 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 to give it a try?

Getting ready

VCL styles can be used to revamp an old application or to create a new one with a non-standard 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. So, let's create a new VCL application and drag and drop some components onto the main form (for example, two TButton, one TListBox, one TComboBox, and a couple of TCheckBox).

You can now see the resultant form that is running on my Windows 8.1 machine:

Figure 1.1: A form without style

How to do it…

Now, we've got to apply a set of nice styles by following these steps:

1. Go to Project | Options from the menu. Then, 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 at a time will be used, but we can link the necessary resources into the executable and select the proper one at runtime.
3. After selecting all the required styles from the list, we've got to select one in the combo box at the bottom. 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, hit F9 (or go to Run | Run), and your application is styled:
   

   Figure 1.2: The same form as Figure 1.1 but with the Iceberg Classico style applied

How it works…

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

The following lines are the interesting section:

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 added a line just before the creation of the main form, setting the default style for all the applications using TStyleManager.TrySetStyle static methods.

TStyleManager is very important class when dealing with VCL styles. We'll see more about it in the upcoming recipe, where you'll learn how to change styles at runtime.

There's more…

Delphi and C++ Builder 10.1 Berlin come with 36 VCL styles available in the folder (with a standard installation):

C:\Program Files (x86)\Embarcadero\Studio\18.0\Redist\styles\vcl\

Moreover, it is possible to create your own styles or modify the existing ones using the Bitmap Style Designer. You can access it by going to Tools | Bitmap Style Designer Menu.

For more details on how to create or customize a VCL style, visit http://docwiki.embarcadero.com/RADStudio/en/Creating_a_Style_using_the_Bitmap_Style_Designer.

The Bitmap Style Designer also provides test applications to test VCL styles.