Marco Tech Blog

Even if they have been in the product for a few versions, styles have seen several improvements (like the recent addition of menu styling in XE6). But what is a VCL Style? Here is a tentative definition:

A style is a collection of painting rules you can dynamically apply to an entire Windows application, changing the size and appearance of various elements, the fonts, and the color scheme used by VCL controls for painting.

Styles extend the concept of themes, in which the styling was provided at the operating system level. Styles in a VCL application can be set (and changed) both at design time and at run time.

Adding Styles to an Application

You can embed a style inside an application using resources, or you can refer to an external file with the style information. By default, you pick the design-time style(s) in the Appearance page of the Project Options:

 

In this page you can pick a few styles (either by Embarcadero or some you've added) to be embedded as resources in your applications. You can also select one of the styles to be the default one, activated as the program starts. Below you can see a trivial application at design time and the same application running with the “Auric” style selected in the dialog shown above:

 

As you can see, the program hasn't got the standard Windows look and feel. Notice that most elements will be styled, but not all of them. Notable exclusions the OS dialogs (there are some external tools to style them but they do have issues in Win64).
In general styles work with both TWinControl and TGraphicsControl descendants and any third party tool that supports theming, which is most of the recent or recently updated components. In general, if a control supports themes, it should also work or when styled.

Dynamically Changing Styles

To work on styles at run-time you use the TStyleManager class, defined in the Vcl.Themes unit. You generally use class methods and properties, rather than creating an instance. For example, you can get a list of styles using the StyleNames property, as in the following code fragment:

procedure TStylesForm.btnListStylesClick(Sender: TObject);
var
  str1: string;
begin
  for str1 in TStyleManager.StyleNames do
    ListBox1.ITems.Add(str1);
end;

You can load new styles from external files using the LoadFromFile and LoadFromResource methods of the TStyleManager. The selection of the current style takes place using the SetStyle method, which takes a string with the style name as parameter, so we can apply it to the list box elements after a double-click:

procedure TStylesForm.ListBox1DblClick(Sender: TObject);
begin
  TStyleManager.SetStyle(
    Listbox1.Items[ListBox1.ItemIndex]);
end;

So we can change the user interface of the application in many different ways, as visible in the next image, where I've picked two completely different styles, Ruby Graphite and Smokey Quartz.

 

Notice that the product ships with many styles and a few more are generally sold, but can be downloaded for free as part of promotions.

Creating or Customizing a Style

How can we modify an existing style or create a brand new one? Delphi includes a specific “Bitmap Style Designer” application (linked from the IDE Tools menu), which can also be freely distributed to external graphical designers. The designer is displayed below:

For each style, the Style Designer has five sections:

• The Objects section includes a set of “properties” for the various elements of the user interface like forms, buttons, panel borders, and so on. There are hundreds of settings you can customize, which are saved like in a DMF file. In the first image above, for example, I’ve selected the “face” of a button.
• The Images section has a single large image comprising all graphical elements of the style, as shown below:

• The Fonts section has the fonts used by the various controls.
• The Colors section has the various control's colors like en edit or a button.
• The SysColors section has the color for standard windows elements, like the commonly used clBtnFace

Armed with this information you can design your custom styles or adapt the existing ones, and make your program more modern looking and a bit more colorful.

Menu Styling in XE6

The most relevant, recent addition to styling was done in XE6. That version included a significant number of fixes and improvements and new technology to support styling of the main menu, pull down menus, popup menus and the Windows system menu. In other words, all menu elements of your VCL application will now match the selected style.

Here is an example of a styled menu:

 

The best thing is there is nothing you have to do to enable this, as it just works. However, in case of problems, you can disable it by configuring the system hooks:

TStyleManager.SystemHooks := TStyleManager.SystemHooks - [shMenus];

Styling and the Windows Modern UI

Another interesting element of styling is that the VCL supports special styles that will make your traditional Win32 and Win64 applications adopt the so-called Modern UI (originally known as “Metro”) and look very much like the WinRT applications supported by Windows 8:

 

Notice there is a specific option in the IDE that allows you to convert an existing VCL application to what Embarcadero calls “Metropolis UI”, plus 4 specific styles based on the standard Modern UI chromes (Blue, Green, Gray, Dark). If you create a “Metropolis” VCL application, its main form will also be a full screen borderless form, but you can tweak that part as you prefer.

While Microsoft originally kept a distinction between the desktop applications (like those you built in Delphi) and their “traditional” UI and the new breed of WinRT application and the Modern UI, that distinction has been blurring since Windows 8 was introduced.

In Windows 8.1, for example, there are already some of the traditional UI elements (like a close button showing up within a “fake” application title bar) mixed into Modern UI applications. According to some leaked information (so nothing official there) it is expected that Windows 9 will allow WinRT/Modern UI applications running within a window – something you can achieve today with Delphi XE7, given these two types of applications will become basically undistinguishable.

In other words, with proper styling your VCL applications are ready for Windows 8, and most likely also for Windows 9, with no major rewrite but simply by properly modernizing the UI using styles.