The Road to Delphi

Delphi – Free Pascal – Oxygene


Leave a 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.


4 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.