The Road to Delphi

Delphi – Free Pascal – Oxygene

VCL Style Utils

The VCL Styles Utils is a collection of classes and style hooks, which extend and add new features to the VCL Styles (introduced in Delphi XE2).

Some of the features of this project are

Introduces the Vcl.Styles.Ext unit which extend the TStyleManager Delphi class adding new properties and methods to list, remove and reload the vcl styles. The extension of the TStyleManager class was made using class helpers, because that only you must add the Vcl.Styles.Ext unit to your project to start to use it.

Example to remove a vcl style

  TStyleManager.RemoveStyle('Carbon');

This unit also a define a new class called TCustomStyleExt that descends of the TCustomStyle and allow you to access to the RAW data of the vcl styles like bitmaps, fonts and colors.

For example you can modify the vcl styles colors in this way

  TCustomStyleExt(TStyleManager.ActiveStyle).SetStyleColor(scEdit, clRed);
  TCustomStyleExt(TStyleManager.Style[StyleName]).SetSystemColor(clBtnFace,clLime);
  TCustomStyleExt(TStyleManager.Style[StyleName]).SetStyleColor(scBorder, clBlue);
  TCustomStyleExt(TStyleManager.Style[StyleName]).SetStyleFontColor(sfButtonTextNormal, clYellow);

The Vcl.Styles.Utils unit contain classes to modify existing styles using color operations like Blend, HSL and RGB.

Check this form with the Carbon style applied.

//This code shows how you can add a Overlay blend effect to an existing vcl style
//and then apply the changes in run-time.
procedure TFrmMain.FormCreate(Sender: TObject);
var
  VclStylesUtils : TVclStylesUtils;
  Filters        : TObjectList;
begin
  //create the instance to the  TVclStylesUtils using the carbon vcl style
  VclStylesUtils:=TVclStylesUtils.Create('Carbon');
  //create the filter list to apply
  Filters:=TObjectList.Create;
  try
    //create a TBitmap32BlendOverlay filter and add to the list
    Filters.Add(TBitmap32BlendOverlay.Create(clYellow));
    //set the elements to be affected
    VclStylesUtils.Elements:=VclStylesUtils.Elements+ [vseBitmaps ,vseSysColors, vseStyleColors];
    //set the filters
    VclStylesUtils.SetFilters(Filters);
    //Apply the changes to the style
    VclStylesUtils.ApplyChanges;
    //reload the modified style
    TStyleManager.ReloadStyle('Carbon');
  finally
    VclStylesUtils.Free;
    Filters.Free;
  end;
end;

And this is the result after of apply the above code

Add a new style hook to enable the vcl styles in the TWebBrowser component, more info can be found in this article https://theroadtodelphi.wordpress.com/2012/03/20/delphi-vcl-styles-and-twebbrowser-source-code-released/

Add a new style hook to customize the background and non client area of a form, more info can be found in this article https://theroadtodelphi.wordpress.com/2012/03/26/vcl-styles-adding-background-images-and-colors-to-delphi-forms/

Source Code

The full source code of this project is available in github under the Mozilla Public License 1.1

29 thoughts on “VCL Style Utils

  1. Is there a possibility to apply a style only to one controle, like a button and leave the rest of the form or whole application in Windows VCL Style?
    Thanks, nice work btw.

  2. Great Job!!!

    I am using FastReport and Delphi XE3, both are working perfectly.
    Now there is a problem, when I enable VCL Styles FastReport is not getting themed properly, it might be because of the TWebBrowser component. Also, there is an issue with the toolbar, its borders are transparent.

    See the screenshot

  3. Where can I download these units?

  4. Thank you, just downloaded :) I am a delphi programmer too (not at your level). If I can help you with development I’d be glad!

  5. Pingback: Delphi VirtualTreeView mit VCL Styles - Wie dreieckige Knotenaufklappelemente darstellen? - Delphi-PRAXiS

  6. Does this only work on Delphi, or can I use it with C++Builder as well?

  7. Is it possible to apply styles to IProgressDialog window http://www.bayden.com/delphi/iprogressdialog.htm ?

  8. Thanks for fixing a lot of bugs in the styles. I have added the utils package to XE6 which fixes the menu painting but when I highlight a submenu then move the cursor it jumps to the bottom menu item. Have you seen this or is it fixed in XE7 maybe. If not how can I help you with it.

  9. Pingback: Gimmie Shelter | burningrump

  10. Hi, I use the vcl.styles in Delphi XE7 and it works fine.
    I have a problem in the TClientDatasetGrid, when the row is selected.
    When a field contans a ‘T’ a show a √

    code: in dbgListDrawColumnCell(…)
    Canvas.FillRect(rect);
    if b = ‘U’
    then begin
    x := (Rect.Left + Rect.Right – ilstGridIcons.Width) div 2;
    y := (Rect.Top + Rect.Bottom – ilstGridIcons.Height) div 2;
    ilstGridIcons.draw(Canvas, x, y, 2);

    This worked fine in older Delphi versions, but using vcl.styles in the selected row in show the √ and the T .
    I also present negative integers as 9999– instead of -9999
    Here are now also bothe the -9999 and 9999– show in the same field.

    code: (in dbgListDrawColumnCell(…)
    var
    s : string;
    x, y : integer;
    c : TColumn;
    r: TRect;
    begin
    c := Column;

    if (Column.Field is TNumericField)
    then begin

    s := Field2Text(Column.field as TNumericField);

    if RightStr(s,2) = ‘–‘
    then begin
    if dbgList.Canvas.Brush.Color clRed
    then dbgList.Canvas.Font.Color := clRed
    else dbgList.Canvas.Font.Color := clWindow;

    dbgList.Canvas.Font.Style := [fsbold]
    end
    else dbgList.Canvas.Font.Style := [];
    r := Rect;
    r.Empty;
    x := Rect.Right – dbgList.Canvas.TextWidth(s) – 2; // 2 pixels space
    y := (Rect.Top + Rect.Bottom – dbgList.Canvas.TextHeight(s)) div 2 ;
    r.Right := x;
    r.top := y;
    if (gdSelected in state)
    then dbgList.Canvas.TextRect(R, x, y, s)
    else dbgList.Canvas.TextRect(Rect, x, y, s);

    I think I have to clear the old value?
    Or is there another solution?

  11. I am having problems with the coloring of hyperlinks in CHM help files when I am using the style utils are added to my project. The hyperlinks appear gold and are very hard to read. I have a simple app that has the style set to auric. I added alll of the files in the VCL-Styles-Utils directory to the project. The problem is not present if those files are not included. Is there a style hook that needs to be initialized or a unit that I need to add to the uses clause? Thank you.

    • Please report this in the issue page of the project including a sample image.

      • Further digging has led me to conclude that the problem is particular to help files of mine that started out as HLP and have been ported into CHM via several help authoring tools. In other words, I think I have some nonstandard settings. I am trying to come up with a minimal, complete example that can be posted. I will open an issue when I have created the example. I have found that the problem disappears if I don’t include vcl.styles.hooks in the project. I would be ok with not having my help files styled and would prefer to be able to include all of your files in my projects without any restrictions. Is there some way that I could “deregister” styling of CHMs while still including all of your units? I use HTMLHelpViewer to display my CHMs.

  12. Hi Rodrigo,

    First of all my respect to all your work. I would like to report another issue related to the CHM files. I am using XE5 and started using your Vcl.Styles.Utils series recently. I noted that the Vcl.Styles.Utils.ComCtrls was giving me problems. The problem is not with the text of the help file itself, but instead with the contents list and search option. This part of the screen keeps being rewritten continuously resulting in a flickering image. The units I use are dated 9\7\2015.

  13. Hi,
    how to make “TRANSPARENT” the background of edit components?
    Thanks in advance!
    Stefano

  14. Sorry if I don’t searched all examples and documentation. But… i can apply a style to one form only and leave the application with another style/without style?

  15. Hello,

    Impressive work! I try to make vcl.styles work for DevExpres grids. Most of it works OK, byt for some reason, vcl.styles does not draw column header tekst, selected cell text and row indicators for DevExpress grids in the correct color.

    For column header text, I noticed that DevExpress uses DrawThemeText, which results (for Carbon Style) in black text on dark grey background.

    What would be the way to fix this? I tried to modify Detour_UxTheme_DrawThemeText, but I was unable to change font color only, while leaving font style as-is.

    Suggestions/ideas are highly appreciated.

    Best regards, Ronald

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s