Search code examples
delphilayout

Delphi VCL application layout changes when switching theme


I have a toy program and it looks like this:

This is the code:

unit Unit1;

interface

uses
  Winapi.Windows, Winapi.Messages, System.SysUtils, System.Variants,
  System.Classes, Vcl.Graphics,
  Vcl.Controls, Vcl.Forms, Vcl.Dialogs, Vcl.StdCtrls, Clipbrd, System.Actions,
  Vcl.ActnList, Vcl.Themes, Vcl.StdActns;

type
  TForm1 = class(TForm)
    txt: TMemo;
    ActionList1: TActionList;
    act_change_theme: TAction;
    act_clear_text: TAction;
    is_autocopy: TCheckBox;
    is_autotrim: TCheckBox;
    procedure act_change_themeExecute(Sender: TObject);
    procedure FormCreate(Sender: TObject);

  private
    { Private declarations }
  public
    { Public declarations }
  end;

var
  Form1: TForm1;

var
  is_dark: Boolean;

implementation

{$R *.dfm}

procedure TForm1.act_change_themeExecute(Sender: TObject);
begin
  if is_dark then
  begin
    TStyleManager.TrySetStyle('Windows', false);
    is_dark := false;
  end
  else
  begin
    TStyleManager.TrySetStyle('Carbon', false);
    is_dark := true;
  end;

end;


procedure TForm1.FormCreate(Sender: TObject);
begin
  is_dark := true;
end;
end.

When I change the theme using shortcut Ctrl+d, the layout changes a little bit.

How can I have a fixed layout? You can download the project from https://www.dropbox.com/s/gtbwis1c6p9j57l/editor.rar?dl=1


Solution

  • Windows 10 paints the border of a window with a 1 pixel wide line in dark color immediately outside of the client area. In addition, outside of this 1 pixel line it paints a 6 or 7 pixels wide light shadow or optionally fully transparent. (The shadow / no shadow is selectable from Performance settings.

    Most, if not all (I didn't check) styles, paint the border in a more traditional way, with a clearly visible 7 pixels wide border.

    Here, an example of Windows 10 (no style):

    enter image description here

    And here a dark style (Carbon):

    enter image description here

    Finally also the Light style

    enter image description here

    To use the Light and the Carbon styles gives a similar looking light and dark layout.