Jump to content


Check out our Community Blogs

Register and join over 40,000 other developers!


Recent Status Updates

View All Updates

Photo
- - - - -

Utilizing Application Custom Styles in Delphi XE2

delphi xe2 custom style

  • Please log in to reply
No replies to this topic

#1 Luthfi

Luthfi

    CC Leader

  • Expert Member
  • PipPipPipPipPipPipPip
  • 1320 posts
  • Programming Language:PHP, Delphi/Object Pascal, Pascal, Transact-SQL
  • Learning:C, Java, PHP

Posted 07 January 2013 - 06:19 AM

Overview

Delphi XE2 introduces built-in VCL custom styles. That's mean you can have your VCL-based applications (i.e. VCL forms applications) to look different from Windows style/theme. Some people prefer this not only because their styles might be better looking than those popular styles came with Windows, but alos for consistent look. With custom style, your application will look the same no matter what is the user's current Windows style/theme.

In previous Delphi version you had to rely on third party library to get custom styling for your application. While many of them are good, but since they are not "native" problems still exist. Albeit nearly all of the problems were minor. Like artefact left on forms or controls when changing style, slow painting of the controls, and unreliable calculation of canvas' area.


"Quick" Custom Styling

If all you want is to use a single style for your application, i.e. only to get consistent look of your application, then all you have to do is follow these steps.
  • When your VCL forms project is active, open the project options (menu Project - Options).
  • Browse to Application - Appearance node, like shown below.

    ProjectOptions_ApplicationAppearance.png
  • In the Custom Styles check box list, make sure you check only on of the style. Of course it must be the style that you want.
  • In the Default style combobox, select your style.
  • Click the OK button to close the project options dialog.
And that's it! Run the project, and now it will enjoy the selected style.


Changing Style in Runtime

The solution explained in the previous section does not allow your users to change the style once the application deployed. This section will explain how to have several styles embedded in your application and allowing your users to change the style in runtime.

The basic steps are:
  • Embed the styles
  • Detect the embedded styles in runtime
  • Change the current style to selected one

Embed the Styles

Here you do like you did to "quick" styling like shown in prior section. But this time select multiple styles instead of one. Something like shown below.

ProjectOptions_ApplicationAppearance_SelectMultiStyles.png

Select default style that you think most appropriate, then click OK button. And voila!, the styles will be embedded in your executable's resource.


Detect Embedded Styles in Runtime

For this you will need help from TStyleManager class. It's declared in Vcl.Themes unit. So make sure you use that unit.

TStyleManager got a read-only property named StyleNames. This property gives you array of strings which are names of the styles currently loaded in TStyleManager. So if you want to show the names of available styles, you could use code like this.

var
  i: Integer;
  L: TStrings;
  vStyleNames: TArray<System.string>;
begin
  vStyleNames := TStyleManager.StyleNames;
  L := TStringList.Create;
  try
    for i := 0 to Length(vStyleNames)-1 do
      L.Add(vStyleNames[i]);

    ShowMessage(L.Text);
  finally
    L.Free;
  end;
end;


Change the Current Style

For this, the easiest way is to use one of TStyleManager's following methods. TrySetStyle and SetStyle. With them you need only to pass the style name to change current style. The main difference between these two is that TrySetStyle will not raise exception when the passed style name was invalid or unrecognized. It, however, returns boolean value indicating whether the style successfully changed. It also offers to show error dialog when the style change was failed.

Therefore, assuming you have style name to be applied in variable named vNewStyleName, you can use either one of these codes to change current style.

  • The following code will not show error dialog when style change failed
      if TStyleManager.TrySetStyle(vNewStyleName, false) then
        ShowMessage('Style successfully changed');
    
  • This one shows error dialog if the style name was not recognized
      if TStyleManager.TrySetStyle(vNewStyleName, true) then
        ShowMessage('Style successfully changed');
    
  • This one will raise exception (of class ECustomStyleException) if the style change was not successful.
      TStyleManager.SetStyle(vNewStyleName);
    


Demo Project

I put together a demo project to further illustrate points we discussed above. Find its full source at the end of this article.

Running the Demo Project

  • When first running the demo project you will get something like this. Note the active style is Amakrits, because back in design time we choose it as the default style in Project options.

    Runtime_01_DefaultStyle.png

  • Now click on Cobalt XEMedia button, and the look of our demo project will immediately changed into this.

    Runtime_02_CobaltXEMedia_Style.png

  • The style buttons actually not created in design time. They were created in runtime, in the main form's OnCreate event to be precise. That way we don't have to manually create or delete the buttons in design time should we change loaded/available styles. If you interested, examine TForm1's OnCreate event.
  • If you click Windows button, you will notice that the look of our demo project will be back to use current windows style/theme. It's the same with not using Delphi's custom style. So, should you (or your user) want the application to use the look and feel of current Windows theme, "use" this style.

    Runtime_03_Windows_or_No_Style.png

Attached Files


  • 0




Recommended from our users: Dynamic Network Monitoring from WhatsUp Gold from IPSwitch. Free Download