Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

Which property of TPanel is to be used to get this shadow?

I would like to know how the shadow effect has been implemented in the Get It Package Manager window. The shadow area is marked red.

Is there any property in TPanel to achieve this or is it custom drawn? enter image description here

like image 997
Rabi Jayasawal Avatar asked Sep 12 '25 18:09

Rabi Jayasawal


1 Answers

There is no property of TPanel to create that shadow.

Using Spy++, I can see the GetIt Package Manager window uses 3 standard TPanel objects (which then have other controls inside of them), and there are no other controls between the top TPanel object and the two lower TPanel objects.

I suspect the effect is most likely done by defining a bottom Margin underneath the top TPanel and then custom-drawing a gradient (such as with GraphUtil.GradientFillCanvas()) onto the parent Form within that margin area.

I was able to reproduce the effect in 10.0 Seattle using the following test code:

unit Unit2;

interface

uses
  Winapi.Windows, Winapi.Messages, System.SysUtils, System.Variants, System.Classes, Vcl.Graphics,
  Vcl.Controls, Vcl.Forms, Vcl.Dialogs, Vcl.ExtCtrls;

type
  TForm2 = class(TForm)
    Panel1: TPanel;
    Panel2: TPanel;
    Panel3: TPanel;
    procedure FormPaint(Sender: TObject);
  private
    { Private declarations }
  public
    { Public declarations }
  end;

var
  Form2: TForm2;

implementation

{$R *.dfm}

uses
  GraphUtil;

procedure TForm2.FormPaint(Sender: TObject);
var
  R: TRect;
begin
  R := ClientRect;
  R.Top := Panel1.Top + Panel1.Height;
  R.Bottom := Panel2.Top;
  GradientFillCanvas(Canvas, clGray, clWhite, R, gdVertical);
end;

end.

object Form2: TForm2
  Left = 0
  Top = 0
  Caption = 'Form2'
  ClientHeight = 266
  ClientWidth = 622
  Color = clWhite
  Font.Charset = DEFAULT_CHARSET
  Font.Color = clWindowText
  Font.Height = -11
  Font.Name = 'Tahoma'
  Font.Style = []
  OldCreateOrder = False
  OnPaint = FormPaint
  PixelsPerInch = 96
  TextHeight = 13
  object Panel1: TPanel
    AlignWithMargins = True
    Left = 0
    Top = 0
    Width = 622
    Height = 41
    Margins.Left = 0
    Margins.Top = 0
    Margins.Right = 0
    Align = alTop
    BevelOuter = bvNone
    Caption = 'Panel1'
    ParentBackground = False
    TabOrder = 0
    ExplicitLeft = 224
    ExplicitTop = 128
    ExplicitWidth = 185
  end
  object Panel2: TPanel
    AlignWithMargins = True
    Left = 0
    Top = 47
    Width = 185
    Height = 219
    Margins.Left = 0
    Margins.Bottom = 0
    Align = alLeft
    Caption = 'Panel2'
    TabOrder = 1
    ExplicitLeft = 224
    ExplicitTop = 128
    ExplicitHeight = 41
  end
  object Panel3: TPanel
    AlignWithMargins = True
    Left = 191
    Top = 47
    Width = 431
    Height = 219
    Margins.Right = 0
    Margins.Bottom = 0
    Align = alClient
    Caption = 'Panel3'
    TabOrder = 2
    ExplicitLeft = 224
    ExplicitTop = 128
    ExplicitWidth = 185
    ExplicitHeight = 41
  end
end

screenshot

like image 52
Remy Lebeau Avatar answered Sep 15 '25 12:09

Remy Lebeau