[gelöst]Wie macht man ein Panel mit Schatten?

[kirchfritz]

Hallo,

kann mir mal jemand auf die Sprünge helfen?
Ich möchte unter Windows in einem Lazarus-Programm auf einer Form mit weißen Hintergrund ein blaues Panel mit Schatten darstellen, ungefähr so (siehe Anhang) soll es aussehen.
Leider weiß ich nicht wie man den Schatten produziert.

Viele Grüße
Fritz Kirch

[charlytango]

aus der Hüfte würde ich sagen: einfach ein gleich großes Panel in Schattenfarbe versetzt hinter das blaue Panel stellen.

Rechtsklick aufs Panel -- Z-Order

[Winni]

Hallo!

Dazu fallen mir zwei Lösungen ein:

a) Nimm ein zweites Panel, lege es darunter.
Versetze es drei oder vier Pixel nach rechts und oben.
Gebe dem zweiten Panel ein leichtes Grau wie clSilver

b) Die 3D Schatten wie sie z.B. bei den Buttons mitgeliefert werden, geht so:
Eine Linie rund um die gesamte Komponente mit 2-4 Pixel Breite
Links und unten: Dunkelgrau
Rechts und oben: Hellgrau
Für ein sauberes Aussehen müssen die Ecken zwischen Hellgrau und Dunkelgrau spitz zulaufen

Winni

[theo]

Oder zeichne einfach das "leere" Muster in OnPaint auf's Panel.
Wenn das Formular weiss ist, sollte das kein Problem sein.
Dann kannst du andere Controls darauf legen.
So hast du auch gleich die Rundungen und Ränder etc.

BlauesPanelMitSchatten.png (5.55 KiB) 1577 mal betrachtet

[kirchfritz]

Zu @Winnis Lösung a)
Ein Schattenpanel druntergelegt sieht halt so aus (siehe Anhang). Einen etwas größeren "BLUR"-Effekt hätte ich schon gerne.

[theo]

Hab's mal ausprobiert als Hintergrundbild mit Controls drauf. Geht doch.

PanelBack.png (32.43 KiB) 1567 mal betrachtet

[kirchfritz]

@theo
Und wie hast Du das PNG erstellt?
Nur für den fall, dass ich eine andere Farbe verwenden will, dass das Panel einen breiteren border haben soll, oder dass der Kunde einen breiteren Schatten haben will.

[kirchfritz]

Wäre auch ein Hintergrund SVG denkbar, welches den Schatten enthält?

[theo]

@theo
Und wie hast Du das PNG erstellt?
Nur für den fall, dass ich eine andere Farbe verwenden will, dass das Panel einen breiteren border haben soll, oder dass der Kunde einen breiteren Schatten haben will.

In diesem Fall habe ich nur deine Vorlage genommen, beschnitten und den Inhalt blau gefüllt.
https://www.gimp.org/

Dann lädst du das Bild im Form.OnCreate oder so in ein TPicture und zeichnest es so:

Code: Alles auswählen

procedure TForm1.Panel1Paint(Sender: TObject);
begin
  TPanel(Sender).Canvas.StretchDraw(Rect(0,0,Panel1.Width,Panel1.Height),Picture.Bitmap);
end;  

Man könnte das Bild auch in eine Ressource legen.

[theo]

Ohne Bild geht es auch. Ist ein wenig verpixelter, aber sieht sonst ganz OK aus.
z.B. so:

Code: Alles auswählen

procedure TForm1.Panel1Paint(Sender: TObject);
const
  R = 50;
var
  Panel: TPanel;
begin
  if not (Sender is TPanel) then exit;
  Panel := TPanel(Sender);

  Panel.Canvas.Brush.Color := $E0E0E0;
  Panel.Canvas.Pen.Color := $E0E0E0;
  Panel.Canvas.RoundRect(6, 6, Panel.ClientWidth , Panel.ClientHeight , R, R);

  Panel.Canvas.Brush.Color := $C0C0C0;
  Panel.Canvas.Pen.Color := $C0C0C0;
  Panel.Canvas.RoundRect(4, 4, Panel.ClientWidth-2, Panel.ClientHeight-2, R, R);

  Panel.Canvas.Brush.Color := $EABA8E;
  Panel.Canvas.Pen.Color := clBlack;
  Panel.Canvas.RoundRect(0, 0, Panel.ClientWidth - 6, Panel.ClientHeight - 6, R, R);   
end; 

[kirchfritz]

Danke @theo!

ich finde Deine Lösung mit der PanelPaint-Methode sehr gut.
Noch besser aber schaut's aus, wenn man zwei BGRAShapes (dort sind abgerundete Ecken möglich) übereinanderlegt.
Links im Bild zwei BGRAShapes übereinander, rechts das Ergebnis der PanelPaint - Methode.

Am idealsten wäre natürlich, wenn die Komponente BGRAPanel eine ShadowColor, ShadowWidth, ShadowPosition-Eigenschaft hätte. Aber dazu müsste ich den BGRA-Komponenten-Entwickler überzeugen, dass mein Wunsch umgesetzt wird.
Wird nicht leicht, aber probieren könnte ich's trotzdem. Selber bin ich leider nicht in der Lage die BGRA-Komponenten zu modifizieren. Ich bin froh, wenn sie so funktionieren, wie ich mir das vorstelle.

[theo]

Ist Geschmackssache. Ich empfinde die Pixel hier nicht als stark störend.

Aber du kannst natürlich mit BGRABitmap OnCreate ein Bitmap basteln, welches du dann nur noch OnPaint auf das Panel zeichnest/kopierst.
Eine Art "double buffering".
Das würde ich eigentlich sowieso so machen, ob mit oder ohne BGRA.

[Jorg3000]

Hi!
Bisher kenne ich es nur aus der Theorie: Windows bietet in der WinAPI die Funktion SetLayeredWindowAttributes() und einen Wert CS_DROPSHADOW.
Ich nehme an, dass dies intern z.B. auch zur Anzeige eines Schattens unter einem Hint-Text verwendet wird.
Habe vor einem Jahr mal kurz mit diesen Eigenschaften der WinAPI experimentiert, aber leider kein Resultat hingekriegt.
Falls jemand es hinbekommt, Windows dazu zu bringen einen Schatten unter ein Panel oder Frame zu malen, wäre ich äußerst dankbar.
Grüße, Jörg

[kirchfritz]

Hi!
Bisher kenne ich es nur aus der Theorie: Windows bietet in der WinAPI die Funktion SetLayeredWindowAttributes() und einen Wert CS_DROPSHADOW.
Ich nehme an, dass dies intern z.B. auch zur Anzeige eines Schattens unter einem Hint-Text verwendet wird.
Habe vor einem Jahr mal kurz mit diesen Eigenschaften der WinAPI experimentiert, aber leider kein Resultat hingekriegt.
Falls jemand es hinbekommt, Windows dazu zu bringen einen Schatten unter ein Panel oder Frame zu malen, wäre ich äußerst dankbar.
Grüße, Jörg

Hallo Jörg,
ich habe bei den BGRA-Komponenten das im Anhang befindliche Beispielprogramm gefunden. Dort werden u.a. DROPSHADOW-Schatten für Panels gezeigt.
Vielleicht hilft Dir das weiter.

[Winni]

Hallo!

Solange man etwas graphisch verhübschen möchte und es keine sonstige Funktion hat, braucht man nur die BGRAbitmap.

Wir folgen Theos Idee, die oft angewendet wird.

Wir brauchen eine BGRAbitmap in der TForm1:

Code: Alles auswählen

  TForm1 = class(TForm)
  ...
  private
     tmp: TBGRAbitmap;
   ...

Die ganze Bitmap wird mit 2x RoundRectAntialias und einmal FilterBlurRadial erledigt. Ich gehe von weißem Hintergrund aus:

Code: Alles auswählen

function TForm1.createBGRA4Panel: TBGRAbitmap;
const shadow = 10;
      dist=4;
      rxy=10;
begin
result := TBGRAbitmap.create (Panel2.width,Panel2.height, cssWhite);
result.RoundRectAntialias(dist+shadow, dist+shadow,
                           result.width-dist,result.height-dist,
                           rxy,rxy, cssGray,1,CssGray,[] );
BGRAreplace(result,result.FilterBlurRadial(3,3,rbFast));
result.RoundRectAntialias(dist, dist,
                           panel2.width-dist-shadow,panel2.height-dist-shadow,
                           rxy,rxy, cssBlue, 2,CSSSkyBlue,[]);
end;

In FormCreate die Bitmap erzeugen:

Code: Alles auswählen

procedure TForm1.FormCreate(Sender: TObject);      
...
tmp := createBGRA4Panel;          
...

Und in Panelpaint zeichnen:

Code: Alles auswählen

procedure TForm1.Panel2Paint(Sender: TObject);
begin
  tmp.draw(Panel2.canvas,0,0);
end;

Fertig. Nee, nicht ganz: In formDestroy die BGRAbitmap freigeben.

Und Achtung: Das Panel ist bei mir Panel2!!

Keep on hacking

Winni