Changing the style of your VCL application at runtime

VCL styles are a powerful way to change the appearance of your application, but using them only as design-time tools is way too limited. One of the main features of a VCL style is the ability to change the style while an application is running.

Tip

Downloading the example code

You can download the example code files for all Packt books you have purchased from your account at http://www.packtpub.com. If you purchased this book elsewhere, you can visit http://www.packtpub.com/support and register to have the files e-mailed directly to you.

Getting ready

Because a VCL style is simply a particular kind of binary file, we can allow our users to load their preferred style at runtime, and we can even provide new styles—publishing them on a website or sending them by an e-mail to our customers.

In this recipe, we'll be able to change the style while an application is running using a style already linked at design time or let the user choose between a set of styles deployed inside a folder.

How to do it…

Styles manipulation at runtime is done using the class methods of the TStyleManager class:

1. Create a brand new VCL application and add the Vcl.Themes and Vcl.Styles units to the main implementation form. These units are required to use VCL styles at runtime.
2. Drop on the form a TListBox component, two TButton components, and two TOpenDialog components. Leave the default component names.
3. Go to Project | Appearance and select eight styles of your choice from the list. Leave the Default style option to Windows.
4. The TStyleManager.StyleNames property contains all names of the available styles. In the FormCreate event handler, we have to load the already linked styles present in the executable to the listbox to let the user choose one of them. So, create a new procedure called StylesListRefresh with the following code and call it from the FormCreate event handler:

   procedure TMainForm.StylesListRefresh;
   var
     stylename: string;
   begin
     ListBox1.Clear;
     // retrieve all the styles linked in the executable
     for stylename in TStyleManager.StyleNames do
     begin
       ListBox1.Items.Add(stylename);
     end;
   end;
   

5. In the Button1Click event handler, we've to set the current style according to the one selected from ListBox1 using the following code:

     TStyleManager.SetStyle(ListBox1.Items[ListBox1.ItemIndex]);

6. The Button2Click event handler should allow the user to select a style from disk. So, we have to create a folder named styles at level of our executable and copy a few .vsf files from the default style directory which is C:\Program Files (x86)\Embarcadero\Studio\14.0\Redist\styles\vcl\ in RAD Studio XE6.
7. After copying the files, write the following code under the Button2Click event handler. This code allows the user to chose a style file directly from the disk. Then you can select one of the loaded styles from the listbox and click on Button1 to apply it to the application. The code is as follows:

   if OpenDialog1.Execute then
   begin
     if TStyleManager.IsValidStyle(OpenDialog1.FileName) then
     begin
       //load the style file
       TStyleManager.LoadFromFile(OpenDialog1.FileName);
       //refresh the list with the currently available styles
       StylesListRefresh; 
       ShowMessage('New VCL Style has been loaded');
     end
     else
       ShowMessage('The file is not a valid VCL Style!');
     end;
   end;
   

8. Just to have an idea of how the different controls appear with the selected style, drag-and-drop some controls to the right-hand side of the form. The following screenshot shows an application with some styles loaded, some at design time and some from the disk. Hit F9 (or go to Run | Run) and play with your application using and loading styles from the disk.
   

   The Style Chooser form with a Turquoise Gray style loaded

How it works…

The TStyleManager class has all the methods we need:

• Inspect the loaded styles with TStyleManager.StyleNames
• Apply an already loaded style to the running application using TStyleManager.SetStyle('StyleName')
• Check if a file is a valid style with TStyleManager.IsValidStyle('StylePathFileName')
• Load a style file from disk using TStyleManager.LoadFromFile('StylePathFileName')

After loading new styles from the disk, these new styles are completely similar to the styles linked to the executable during the compile and link phases and can be used in the same way.

There's more...

Other things to consider are third-party controls. If your application uses third-party controls, take care with their style support. If your external components do not support styles, you will end up with some controls styled (the original included in Delphi) and some not (your external third-party controls)!

By navigating to Tools | Bitmap Style Designer and using a custom VCL style, we can also perform the following actions:

• Change the application's colors (for example, ButtonNormal, ButtonPressed, ButtonFocused, ButtonHot, and so on)
• Override the system's colors (for example, clCaptionText, clBtnFace, clActiveCaption, and so on)
• Change the font color and font name for particular controls (for example, ButtonTextNormal, ButtonTextPressed, ButtonTextFocused, ButtonTextHot, and so on)

The following screenshot shows the Bitmap Style Designer window while working on a custom style:

The Bitmap Style Designer while it is working on a custom style