Changing the style of your VCL application at runtime

VCL styles are a powerful way to change the appearance of your application. One of the main features of VCL styles is the ability to change the style while the application is running.

Getting ready

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

In this recipe, we'll change the style while the 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…

Style manipulation at runtime is done using the class methods of the TStyleManager class. Follow these steps to change the style of your VCL application at runtime:

1. Create a brand new VCL application and add the Vcl.Themes and Vcl.Styles units to the implementation main form uses section. These units are required to use VCL styles at runtime.
2. Drop on the form a TListBox, two TButton, and a TOpenDialog. Leave the default component names.
3. Go to Project | Appearance and select eight styles of your choice from the list. Leave the Default style to Windows.
4. The TStyleManager.StyleNames property contains names of all the available styles. In the FormCreate event handler, we have to load the already linked styles present in the executable into 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 the ListBox1 using the code as follows:

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

6. The Button2Click event handler should allow the user to select a style from the disk. So, we have to create a folder named styles at the level of our executable and copy a .vsf file from the default style directory, which, in RAD Studio 10.1 Berlin, is C:\Program Files (x86)\Embarcadero\Studio\18.0\Redist\styles\vcl\.
7. After copying, write the following code under the Button2Click event handler. This code allows the user to choose 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 application:

   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 on the right-hand side of the form. The following image shows my application with some styles loaded, some at design time and some from the disk.
9. Hit F9 (or go to Run | Run), and play with your application using and loading styles from the disk:
   

   Figure 2.1: The Style Chooser form with a Torquoise Gray style loaded

How it works…

The TStyleManager class has all the methods we need to:

• Inspect the loaded styles with TStyleManager.StyleNames
• Apply an already loaded style to the running application using the following code:

  TStyleManager.SetStyle('StyleName')

• Check whether a file is a valid style using the following code:

  TStyleManager.IsValidStyle('StylePathFileName')

• Load a style file from the disk using the following code:

  TStyleManager.LoadFromFile('StylePathFileName')

After loading new styles from the disk, the new styles are completely similar to the styles linked in 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 (some third-party controls are not be style aware). If your external components do not support styles, you will end up with some styled controls (the original included in Delphi) and some not styled (your external third-party controls)!

Go to Tools | Bitmap Style Designer. Using a custom VCL style we can also:

• Change application colors, such as ButtonNormal, ButtonPressed, ButtonFocused, ButtonHot, and others
• Override system colors, such as clCaptionText, clBtnFace, clActiveCaption, and so on
• Font color and font name for particular controls familiar to ButtonTextNormal, ButtonTextPressed, ButtonTextFocused, ButtonTextHot, and many others
  

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