The Road to Delphi

Delphi – Free Pascal – Oxygene


1 Comment

New VCL Styles from DelphiStyles.com

A few days ago KSDev launched a new site, DelphiStyles.com,  this new place offers new FMX and VCL Styles.   I tested the VCL Styles  bundle and are just great,  the themes  looks modern, sleek  and polished.

So if you are looking  for a  professional looking FMX/VCL styles for you application this is the place to go.

Check out the  TOpenDialog component styled using the VCL Style Utils and the  DelphiStyles themes.

Material Black Pearl

Material Oxford Blue

Windows 10 Black Pearl

Windows 10 Oxford Blue

Thanks very much to the guys from DelphiStyle (KSDev) which kindly donated a VCL Styles bundle to The Road to Delphi.

Rodrigo.


5 Comments

VCL Styles Utils and RAD Studio 10 Seattle

This is a summary of the current state of VCL Styles Utils project and RAD Studio 10 Seattle.

  • The library was updated to support RAD Studio 10 Seattle.
  • RAD Studio 10 Seattle add VCL Styling support for the classic common dialogs and for the TWebBrowser component. Using licensed code from the VCL Styles Utils project to Embarcadero.
  • RAD Studio 10 Seattle includes a new select directory dialog using the IFileDialog interface. This dialog also can be styled using the VCL Styles Utils project.

This is the select folder dialog with the Windows native theme

SelectFolder10Native

Select folder dialog with the the Glow VCL Style applied and using the VCL Styles Utils

SelectFolder10VCLStylesUtils

 

 

You can check more information about the VCL Styles Utils project in Github.

Rodrigo.


5 Comments

VCL Styles Utils and NonClient Area – New features

I just added a set of new features to the VCL Styles Utils project

New NC Buttons styles

Two new styles was added to the TNCButton control (nsAlpha and nsGradient). So now you can add Alpha-blended and Gradient buttons to the title bar of the Forms.

NC_AlphaGradient

To add a button in the NC Area, only you need add a TNCControls component to your form and then insert a TNCButton in the collection like so.

  NCControls:=TNCControls.Create(Self);
  NCControls.Add(TNCButton.Create(NCControls));
  NCControls[0].Style       := nsAlpha;
  NCControls[0].ImageStyle  := isNormal;
  NCControls[0].Images      := ImageList1;
  NCControls[0].ImageIndex  := 0;
  NCControls[0].BoundsRect  := Rect(30, 1, 120, 26);
  NCControls[0].Caption     := 'nsAlpha1';
  NCControls[0].Name        := 'nsAlpha1';
  NCControls[0].AlphaColor   := clWebLavender;
  NCControls[0].AlphaHotColor:= clWebAliceBlue;
  NCControls[0].FontColor   := clWhite;
  NCControls[0].HotFontColor:= clYellow;
  NCControls[0].OnClick     := ButtonNCClick;

Support for Custom VCL Styles in the NonClient Area

The TNCControls component was updated to support a different custom VCL Style in the NC Area. Check these screenshots with the glow style (this is the application VCL Style) in the body of the form and a custom VCL Style in the NC Area.

This slideshow requires JavaScript.

To activate a custom style in the NC Area, only you need add a TNCControls component to your form and set the StyleServices property

  NCControls:=TNCControls.Create(Self);
  NCControls.StyleServices := TStyleManager.Style['Sky']; //Set the Sky vcl style to be used to draw the NC Area of the form

You can check the sample application here.


20 Comments

VCL Styles Utils – Major Update (Dialogs, ProgressBar, DateTimePicker, ListView and more)

A Major updated was made to the VCL Styles Utils project. This version include several fixes and new features.

Vcl.Styles.Hooks

The Vcl.Styles.Hooks unit is the most updated part of this new release. This unit is the responsible of hook some of the UxTheme and WinApi methods like DrawThemeBackground, GetSysColor and GetSysColorBrush. Which allows take the control of the painting process for the system themed (and owner-draw) controls.

ListView

This new release fix the highlight color used on the selected items and also replace the themed checkBox by a styled checkbox.

ListView with VCL Styles
2014-11-04 11_08_19-Demo

ListView with VCL Styles + Vcl.Styles.Hooks unit
2014-11-04 11_08_55-Demo

Also was added support for style the Listview groups.

ListView with VCL Styles

2014-11-04 11_11_23-Demo

ListView with VCL Styles + Vcl.Styles.Hooks unit

2014-11-04 11_12_45-Demo

DateTime Controls

The Styling of the TMonthCalendar and TDatetimepicker components is one of the limitations of the VCL Styles, because such components are owner-draw by the system and doesn’t allow to customize the look and feel when the native themes are enabled (for more information read these TMonthCalendar and TDatetimepicker ) also only the newest versions of Delphi includes a partial styling support for such components. With this new release the styling of these controls is now possible.

TDateTimePicker and TMonthCalendar with VCL Styles

2014-11-04 11_29_24-Demo - RAD Studio XE7 - uMain [Running] [Built]

TDateTimePicker and TMonthCalendar with VCL Styles + Vcl.Styles.Hooks unit

2014-11-04 11_54_31-Demo - Embarcadero RAD Studio XE2 - Vcl.Styles.Hooks [Running] [Built]

ProgressBar

Improved support for the TProgressbar component without flicker and with Marquee style.

2014-11-04 14_48_10-Demo

Select Directory Dialog

The styling for the select directory dialog was enhanced adding support for the open and close glyphs and fixing the color of the highlight bar.

VCL Styles Utils

2014-11-04 15_01_14-Browse For Folder

VCL Styles Utils + Vcl.Styles.Hooks unit

2014-11-04 15_01_52-Greenshot

Open/Save Dialog

The VCL Styles support of the Open and Save dialogs was improved adding styling for groups and highlight items. Also a fix for the select folder combobox was introduced.

VCL Styles Utils

2014-11-04 15_12_50-Open

2014-11-04 15_20_49-Open

2014-11-04 15_26_07-ThemedSysControls - Embarcadero RAD Studio XE2 - ThemedSysControls.dproj [Runnin

VCL Styles Utils + Vcl.Styles.Hooks unit

2014-11-04 15_14_27-Open

2014-11-04 15_21_25-Open

2014-11-04 15_25_16-Edit Post ‹ The Road to Delphi - a Blog about programming — WordPress


7 Comments

VCL Styles Utils – Now supports the TTaskDialog component

I’m very pleased to introduce a very exciting new feature to the VCL Styles Utils project. This is the support for style the TTaskDialog component and all the TaskDialog based Message dialogs. This control available since RAD Studio 2007 is a wrapper for the Task Dialogs introduced in Windows Vista and allows to create very rich and flexible dialogs.

Take a look to some sample dialogs.

2014-10-09 09_48_43-VCL Styles Utils - TTaskDialogs Demo

2014-10-09 09_41_40-VCL Styles Utils - TTaskDialogs Demo

2014-10-09 09_42_31-Greenshot

2014-10-09 09_47_41-VCL Styles Utils - TTaskDialogs Demo

2014-10-09 09_47_52-VCL Styles Utils - TTaskDialogs Demo

2014-10-09 09_48_07-VCL Styles Utils - TTaskDialogs Demo

2014-10-09 09_48_19-VCL Styles Utils - TTaskDialogs Demo

2014-10-09 09_48_31-VCL Styles Utils - TTaskDialogs Demo

And now enabling the VCL Styles and just adding the Vcl.Styles.Hooks unit to your project…..

2014-10-09 09_57_33-VCL Styles Utils - TTaskDialogs Demo

2014-10-09 09_58_01-VCL Styles Utils - TTaskDialogs Demo

2014-10-09 09_58_28-VCL Styles Utils - TTaskDialogs Demo

2014-10-09 09_58_55-VCL Styles Utils - TTaskDialogs Demo

2014-10-09 09_52_55-VCL Styles Utils - TTaskDialogs Demo

2014-10-09 09_54_40-VCL Styles Utils - TTaskDialogs Demo

2014-10-09 09_55_11-VCL Styles Utils - TTaskDialogs Demo

2014-10-09 09_55_40-VCL Styles Utils - TTaskDialogs Demo

2014-10-09 09_56_04-VCL Styles Utils - TTaskDialogs Demo

2014-10-09 09_56_42-VCL Styles Utils - TTaskDialogs Demo

You can download a sample application from the project repository.
Also a compiled demo is available here.

If you found any bug please use the issue page of the project.

For a quick tutorial of how use the TTaskDialog component check this great Inofficial TTaskDialog Documentation.

Rodrigo.


7 Comments

A new way to select and apply a VCL Style in Runtime

Typically we use a combobox or listbox to allow to the final user select and appy a VCL Style, Today I will show you a new way using the system menu of the form.

First you need to use the GetSystemMenu WinApi function  to get a  handle to the system menu of the form. Then using the AppendMenu or the InsertMenuItem methods you can customize the system menu, from here you must store the identifier of the new menu item added and finally process the WM_SYSCOMMAND message to launch an action.

Check the next commented code

uses
  System.Rtti,
  System.Classes,
  System.Generics.Collections,
  WinApi.Windows,
  WinApi.Messages,
  Vcl.Themes,
  Vcl.Styles,
  Vcl.Forms;

type
  TMethodInfo=class;

  TProcCallback = reference to procedure(Info : TMethodInfo);
  TMethodInfo=class
   Value1 : TValue;
   Value2 : TValue;
   Method : TProcCallback;
  end;
  TVclStylesSystemMenu=class(TComponent)
  strict private
    FVCLStylesMenu : HMenu;
    FOrgWndProc: TWndMethod;
    FForm : TForm;
    FMethodsDict : TObjectDictionary<NativeUInt, TMethodInfo>;
    procedure CreateMenus;
    procedure DeleteMenus;
    procedure CreateMenuStyles;
    procedure WndProc(var Message: TMessage);
  public
    constructor Create(AOwner: TForm); reintroduce;
    destructor Destroy; override;
  end;

implementation

uses
  Vcl.Controls,
  System.SysUtils;

const
 VCLStylesMenu=WM_USER + 666;

//Add a new Menu Item
function InsertMenuHelper(hMenu: HMENU; uPosition: UINT; uIDNewItem: UINT_PTR; lpNewItem, IconName: LPCWSTR) : BOOL;
var
  LMenuItem : TMenuItemInfo;
begin
  ZeroMemory(@LMenuItem, SizeOf(TMenuItemInfo));
  LMenuItem.cbSize := SizeOf(TMenuItemInfo);
  LMenuItem.fMask  := MIIM_FTYPE or MIIM_ID or MIIM_BITMAP or MIIM_STRING;
  LMenuItem.fType  := MFT_STRING;
  LMenuItem.wID    := uIDNewItem;
  LMenuItem.dwTypeData := lpNewItem;
  Result:=InsertMenuItem(hMenu, uPosition, True, LMenuItem);
end;

//Add a new separator
procedure AddMenuSeparatorHelper(hMenu : HMENU; var MenuIndex : Integer);
var
  LMenuInfo    : TMenuItemInfo;
  Buffer       : array [0..79] of char;
begin
  ZeroMemory(@LMenuInfo, SizeOf(TMenuItemInfo));
  LMenuInfo.cbSize := sizeof(LMenuInfo);
  LMenuInfo.fMask  := MIIM_TYPE;
  LMenuInfo.dwTypeData := Buffer;
  LMenuInfo.cch := SizeOf(Buffer);
  if GetMenuItemInfo(hMenu, MenuIndex-1, True, LMenuInfo) then
  begin
    if (LMenuInfo.fType and MFT_SEPARATOR) = MFT_SEPARATOR then
    else
    begin
      InsertMenu(hMenu, MenuIndex, MF_BYPOSITION or MF_SEPARATOR, 0, nil);
      inc(MenuIndex);
    end;
  end;
end;

{ TVclStylesSystemMenu }

constructor TVclStylesSystemMenu.Create(AOwner: TForm);
begin
  inherited Create(AOwner);
  //Get an instance to the form
  FForm:=AOwner;
  //Init the collection to store the menu ids and callbacks
  FMethodsDict:=TObjectDictionary<NativeUInt, TMethodInfo>.Create([doOwnsValues]);
  //store the original WndProc
  FOrgWndProc := FForm.WindowProc;
  //replace the WndProc of the form 
  FForm.WindowProc := WndProc;
  //Modify the system menu
  CreateMenus;
end;

destructor TVclStylesSystemMenu.Destroy;
begin
  DeleteMenus;
  FForm.WindowProc := FOrgWndProc;
  FMethodsDict.Free;
  inherited;
end;

procedure TVclStylesSystemMenu.CreateMenus;
begin
  CreateMenuStyles;
end;

procedure TVclStylesSystemMenu.DeleteMenus;
begin
   if IsMenu(FVCLStylesMenu) then
   while GetMenuItemCount(FVCLStylesMenu)>0 do
     DeleteMenu(FVCLStylesMenu, 0, MF_BYPOSITION);

   FMethodsDict.Clear;
end;

procedure TVclStylesSystemMenu.CreateMenuStyles;
var
 LSysMenu : HMenu;
 LMenuItem: TMenuItemInfo;
 s : string;
 uIDNewItem, LSubMenuIndex : Integer;
 LMethodInfo : TMethodInfo;
begin
  LSysMenu := GetSystemMenu(FForm.Handle, False);

  LSubMenuIndex:=GetMenuItemCount(LSysMenu);
  AddMenuSeparatorHelper(LSysMenu,  LSubMenuIndex);

  FVCLStylesMenu   := CreatePopupMenu();
  s:='VCL Styles';

  uIDNewItem := VCLStylesMenu;
  ZeroMemory(@LMenuItem, SizeOf(TMenuItemInfo));
  LMenuItem.cbSize := SizeOf(TMenuItemInfo);
  LMenuItem.fMask  := MIIM_SUBMENU or MIIM_FTYPE or  MIIM_ID or MIIM_BITMAP or MIIM_STRING;
  LMenuItem.fType  := MFT_STRING;
  LMenuItem.wID    := VCLStylesMenu;
  LMenuItem.hSubMenu := FVCLStylesMenu;
  LMenuItem.dwTypeData := PWideChar(s);
  LMenuItem.cch := Length(s);
  //Add the new menu item to the system menu
  InsertMenuItem(LSysMenu, GetMenuItemCount(LSysMenu), True, LMenuItem);
  inc(uIDNewItem);
  LSubMenuIndex:=0;

  //Iterate over the registered styles and create a new menu entry for each style 
  for s in TStyleManager.StyleNames do
  begin
    InsertMenuHelper(FVCLStylesMenu, LSubMenuIndex, uIDNewItem,  PChar(s), nil);
    if SameText(TStyleManager.ActiveStyle.Name, s) then
      CheckMenuItem(FVCLStylesMenu, LSubMenuIndex, MF_BYPOSITION or MF_CHECKED);
    inc(LSubMenuIndex);
    inc(uIDNewItem);
    LMethodInfo:=TMethodInfo.Create;
    LMethodInfo.Value1:=s;
    //set the method to execute when the item is clicked
    LMethodInfo.Method:=procedure(Info : TMethodInfo)
                        begin
                          TStyleManager.SetStyle(Info.Value1.AsString);
                        end;
    //register the menu id and the callback function.
    FMethodsDict.Add(uIDNewItem-1, LMethodInfo);
  end;
end;

procedure TVclStylesSystemMenu.WndProc(var Message: TMessage);
var
  LVerb : NativeUInt;
begin
  case Message.Msg of
    //Detect when the window handle is recreated
    CM_RECREATEWND: begin
                      DeleteMenus;
                      FOrgWndProc(Message);
                      CreateMenus;
                    end;
    //Track the system menu calls
    WM_SYSCOMMAND : begin
                     if FMethodsDict.ContainsKey(TWMSysCommand(Message).CmdType) then
                     begin
                      LVerb:=TWMSysCommand(Message).CmdType;
                      FMethodsDict.Items[LVerb].Method(FMethodsDict.Items[LVerb]);
                     end
                     else
                      FOrgWndProc(Message);
                    end
  else
    FOrgWndProc(Message);
  end;
end;

end.

And this the result

Windows

Amakritz

Cobalt

To use this class, only you need create an new instance passing a reference to the form.

procedure TForm1.FormCreate(Sender: TObject);
begin
  TVclStylesSystemMenu.Create(Self);
end;

You can check the full source code here.


13 Comments

VCL Styles Utils, Embarcadero Agreement and Delphi XE6

Embarcadero Agreement

As probably you know, a small part of the VCL Styles utils project was licensed to Embarcadero, via a non-exclusive proprietary license. This means which they can use, modify and distribute the code as part of the VCL, but the Copyright and the Open Source version of the project still belong us. So you can continue using this library in all the Delphi versions supported (XE2-XE6).

Delphi XE6

The VCL Styles utils was updated to support and avoid conflicts with Delphi XE6. Check the next image which show the Open Dialog styled using the New XE6 style Table Dark

Tabla_Dark_Open

Since now the main difference is that you can use the menu style hook which is included as part of the Delphi XE6 VCL Styles, or continue using the menu hook of the library, this is described in the Vcl.Styles.Utils.Menus unit.

{$DEFINE UseVCLStyleUtilsMenu}
{$IF CompilerVersion >= 27} // Use the XE6 menu syshooks by default
  {$UNDEF UseVCLStyleUtilsMenu} // comment this line if you want to use the VCL Styles Utils Menus Hooks instead
{$IFEND}

About the Styled Dialogs

Using the library is the only way to style the system dialogs, currently we support all the Common Dialog Box Types (Color, Find, Font, Open, Page Setup, Print, Replace, Save As).

Check the Common Dialogs styled using the Premium VCL Style Jet.

Jet

But not just the Common dialogs are styled, in fact any dialog (#32770 Class) which uses the windows common controls is supported (of course if the dialog had a owner draw control this cannot be styled). For an example take a look to the next images.

Prompt DataSource Dialog

output_sWoRA1

Select User Dialog

ObjectSelect_4

Note: Some dialogs cannot be styled, because uses the undocumented DirectUIHWND control, these include the new (introduced in windows Vista) Open and Save As dialog and the Task Dialogs

Rodrigo.


3 Comments

VCL Styles for NSIS

Important Update

The new location of this project is https://code.google.com/p/vcl-styles-plugins/

NSIS

The VCL Styles Utils project, now includes  a plugin (dll) to skin the installers created by NSIS (2.46 and 3.0). The current size of the plugin is about 1.6 mb, but when is included (and compressed) in the script only add ~550 Kb to the final installer.

output_A6NOFn

How to use it

To use the plugin in a NSIS installer you must call the LoadVCLStyle function passing the skin name in the .onInit function.

Function .onInit
  InitPluginsDir
  ;Get the skin file to use
  File /oname=$PLUGINSDIR\Amakrits.vsf "..\Styles\Amakrits.vsf"
  ;Load the skin using the LoadVCLStyle function
  NSISVCLStyles::LoadVCLStyle $PLUGINSDIR\Amakrits.vsf
FunctionEnd

To use the plugin in a NSIS Uninstaller you must call the LoadVCLStyle function passing the skin name in the un.onInit function.

Function un.onInit
  InitPluginsDir
  File /oname=$PLUGINSDIR\Amakrits.vsf "..\Styles\Amakrits.vsf"
  ;Load the skin using the LoadVCLStyle function
  NSISVCLStyles::LoadVCLStyle $PLUGINSDIR\Amakrits.vsf
FunctionEnd

For download and more info check the page of the plugin


26 Comments

VCL Styles Utils and Popup Menus – Major Update

As you probably know the VCL Styles doesn’t support  Popup menus, this means if you apply any VCL Style  to your VCL Application  the popup menus will remain with the Windows native look and feel  (exists some workarounds for this like use a TPopupActionBar  as described here, but this only works partially, and doesn’t support the child menus of a TMainMenu) Since Sometime ago the VCL Styles Utils project can help you to overcome this limitation adding support for VCL Styled Popup Menus.

Now we just uploaded a major update to the VCL Styles Utils project. This new version fix all the issues reported via mail and the issue page related the PopUp menus like support for  the Break property, Checkboxes,  Radio Items,  Default items and so on.

Sample images

TMainMenu with VCL Styles

1

TMainMenu with VCL Styles and VCL Styles Utils

2

Popup Menu with VCL Styles

3

Popup Menu with VCL Styles and VCL Styles Utils

4

Right to left Popup Menu with VCL Styles

5

Right to left Popup Menu with VCL Styles and VCL Styles Utils

6

System Menu with VCL Styles

7

System Menu with VCL Styles and VCL Styles Utils

8

To add support for VCL Styled Popup Menus in your Application only you must add these units to your project Vcl.Styles.Utils.Menus, Vcl.Styles.Utils.SysStyleHook and Vcl.Styles.Utils.SysControls.

You can download sample application from here and the source of the Application is here.