Nochmal, final: SpeedButton mit Hintergrundfarbe und ohne Rahmen

[Nimral]

Da kommt es wieder, das leidige Thema. Unter Windows hat Windows die Faust auf der Hintergrundfarbe von Buttons, die entsprechende Property Color ist zwar vorhanden, tut aber nix.

Jetzt brauche ich noch einen Button, der einen Web-Button nachäfft:

Web Buttons.png (2.43 KiB) 2025 mal betrachtet

- Links ein Glyph mit Hover Effekt, rechts daneben ein Text der bei Hover die Farbe wechselt. Glyph mit Effekten kann der SpeedButton, Text Color in MouseEnter und MouseLeave einstellen sollte kein Problem sein.
- den Rahmen um den Button los werden.
- Ein "MouseDown" Effekt bei dem der Hintergrund leicht dunkler wird
- Ein "Standard" Effekt bei dem der zuletzt angeklickte Button farblich hervorgehoben wird. Die codetechnische Basis wäre beim Speedbutton dazu auch schon da (Groupindex).

Beides läuft darauf hinaus, die Hintergrundfarbe zu manipulieren - autsch.

Im Testaufbau verwende ich bisher - haut mich tot - als Plan B ein Panel mit Images, die ich ein- uns ausknipse. Alles, auch der Text, sind Bitmaps (ich kann sie in perfekter Größe vom Web-Portal abfotografieren, das ich vom Design her nachahmen soll, was dann nicht mal viel Arbeit ist), aber mir sträuben sich innerlich die Haare, waidmännisch ist das nicht. Gut, toter Fisch ist toter Fisch, ob man ihn nun angeltechnisch sauber mit viel Geduld und Wurm oder mit der "Handgranate" Methode erlegt hat ist ziemlich egal, er schmeckt am Ende gegrillt immer gleich.

Eigentlich wäre ein Speedbutton eine ideale Basis, und für den Speedbutton sah ich, kann ich mich erinnern, irgendwann irgendwo einen erträglich komplizierten Hack um seinen Hintergrund einzufärben (ich meine mich zu erinnern, da wurde nur GetBrush vom TWinControl-Vorgänger überschreiben), der als Basis dienen könnte. Ich kann das Snippet aber im Moment nicht finden, und bin unsicher ob und wenn ja wie ich damit auch die Mauseffekte machen kann. Und ich in nicht sicher, ob ich den Rahmen um den Button los werden kann.

BGRA Einsetzen ist keine Option.

Wie immer dankbar für zweckdienliche Hinweise,

Armin.

[af0815]

Ich habe hier an einen ImageButton viewtopic.php?f=18&t=12956&p=114760&hil ... on#p114760 gearbeitet, vielleicht kannst du da was ausschlachten.

[wennerer]

Hallo Nimral,
ich habe mal versucht deinen Web-Button mit meinem MultiButton nach zustellen. Schaut dann so aus:

Web-ButtonClon.png (4.63 KiB) 1973 mal betrachtet

Falls du Lust hast findest du die Komponente hier: viewtopic.php?f=29&t=13252&p=117959#p117959

Hab schnell noch was umgestellt damit der Hover die Schrift des MessageButtons ändert. Ich hoffe ich hab da auf die schnelle keinen Mist gemacht. In meinem Test hat der Button einen Fokusrahmen. Den kann man aber auch weg machen, einfach HoverFrameWidth auf 0 stellen und die Maße anpassen.

Viele Grüße
Bernd

[Nimral]

Hi bernd, ich würde ihn gerne probieren, aber da fehlt das Package "theOthers"

HG, Armin.

[Winni]

Hi!

Nicht immer das Rad neu erfinden:

Es gibt unter den BGRAcontrols den TBGRASpeedButton:

https://wiki.lazarus.freepascal.org/BGRAControls

Ich glaub, der löst die Probleme.

Die BGRAcontrols können über den Online Package Manager installiert werden.

Winni

[Nimral]

BGRA hab ich etwas Muffe, ich hab jetzt noch knapp 24 Stunden bis Abgabe, und noch eine komplette GUI zu machen und diverse Module zusammenzudengeln --> ich möchte nur noch mit Packages arbeiten, die entweder klein sind und der Author greifbar (Bernd ...), oder wo ich mich mit meinen Kenntnissen halbwegs bewegen kann.

Kommt Zeit, kommt BGRA!

Armin.

[wennerer]

Endschuldigung,
ich habe meine Komponenten alle in einem Package (TheOthers). Hab die Anforderung gelöscht und mit TheMultiButton ersetzt. Jetzt sollte das Beispiel gehen.

Viele Grüße
Bernd

[wennerer]

Die Komponente musst du dir halt vom Link holen.

Viele Grüße
Bernd

[Nimral]

Kab mir mal "release06" geschnappt, das scheint die Jüngste zu sein?

[wennerer]

ja, hab ich grad rein gestellt.

[Michl]

Weiß nicht ob's interessant ist, aber mit Lazarus Bordmitteln könntest du auch einen CustomDrawn Button nehmen. Du müsstest das Package unter Package -> Install/Uninstall Package -> customdrawn installieren, um so einen Button im FormDesigner zu platzieren.

Könnte dann z.B. so aussehen (schnell zusammengeklickt):

[Michl]

Ach verdammt, habe überlesen, daß kein Rahmen da sein soll. Dann geht es ohne Verbiegungen nicht. Sorry for the noise!

[Edit]OK, die Verbiegung wäre gering, einen CodeBlock auskommentieren und eine Zeile ändern

[Nimral]

Ich nage noch an Bernds Multibutton.

Wow, da steckt echt Arbeit drinnen! Chapeau!

Von ein paar Kleinigkeiten abgesehen habe ich bisher nur einen großen Schmerz: Hover scheint die Hintergrundfarbe des Buttons nicht zu ändern (Lazarus 2.0.12. x32 / WIndows 10 x64).

HoverOn ist aktiviert, HoverFontColor färbt die Beschriftung, aber der utton bleibt ungerührt Petrol statt wie ich HoverColor eingestellt habe clRed. Ich habe verschiedene Werte für HoverAlphaBValue probiert (0,100,200), aber keinerlei Änderung der Buttonfarbe damit erzielt.

Muss ich noch was tun damit der Hover den Button umfärbt?

HG, Armin.

P.S. was genau ist eigentlich die Motivation für den 2. Button? Ich habe ihn im Moment einfach mal auf Visible=false gestellt, ich hoffe nicht, dass ich damit das Hover Problem verursacht habe? Egal. Ich meine, wenn ich einen button auf dem Button brauche, könnte ich eigentlich einfach einen drüber positionieren, oder?

[wennerer]

Der Hover färbt nur den HoverFrame.
Änder mal die Paint so, das sollte für deine Zwecke passen:

Code: Alles auswählen

procedure TMultiButton.Paint;
var aImage : TImage;
    tmpBmp : TBitmap;
    TeRec  : TRect;
begin
 if (csDesigning in ComponentState = false) and (FVisible = false) then exit;
 if canvas.Font <> FFont then
 Canvas.Font.Color:= Font.Color;
 //Hover
(* if ((HoverOn=true) and (Hover=true)) or
    ((HoverOn=true) and(Focused=true)) then
 begin
  try
   tmpBmp             := TBitmap.Create;
   tmpBmp.PixelFormat := pf32bit;
   tmpBmp.SetSize(width,height);
   tmpBmp.Canvas.Brush.Color:= FHoverColor;
   tmpBmp.Canvas.FillRect(0,0,width,height);

   BmpToAlphaBmp(tmpBmp,FHoverAlBlVal);
   canvas.Draw(0,0,tmpBmp);


  finally
   tmpBmp.Free;
  end;
 end;     *)

 if ((HoverOn=true) and (Hover=true)) then canvas.Font.Color:= FHoverFontColor;
 //Zeichnet den Button mit Hintergrund
 DrawTheButton;

 //Komponentenname
 if not CaptionChange then FCaption := self.Name;

 //Caption

 if pressed then
 canvas.Font.Color:= FPressedFoCol;
 TeRec:= rect(Hotspot.Left+FBorderWidth,Hotspot.Top+FBorderWidth,
              Hotspot.Right-FBorderWidth,Hotspot.Bottom-FBorderWidth);
 canvas.TextRect(TeRec,TeRec.Left+FCapLeft,TeRec.Top+FCapTop,
                 FCaption,FTextStyle);

 //Zeichnet die Border
 if FShowBorder then DrawABorder;

 //Zeichnet das Bild
 try
  aImage := TImage.Create(nil);

  FImageList.DrawForControl(canvas,FImageLeft+FBLeft,FImageTop+FBTop,FImageIndex,FImageWidth,aImage,gdeNormal);
 finally
  aImage.Free;
 end;
 //Hover
 if ((HoverOn=true) and (Hover=true)) then
 begin
  try
   tmpBmp             := TBitmap.Create;
   tmpBmp.PixelFormat := pf32bit;
   tmpBmp.SetSize(width,height);
   tmpBmp.Canvas.Brush.Color:= FHoverColor;
   tmpBmp.Canvas.FillRect(0,0,width,height);

   BmpToAlphaBmp(tmpBmp,FHoverAlBlVal);
   canvas.Draw(0,0,tmpBmp);


  finally
   tmpBmp.Free;
  end;
 end;


 //zeichnet den MessageButton
 if FMessageButton.FVisible then
  begin
   with FMessageButton do
    begin
     DrawMessageButton;
     //zeichnet die Caption
     canvas.Font.Assign(FFont);

     if (HoverOn=true) and (MessageHover=true) then
     Canvas.Font.Color:=  FHoverFontColor ;

     canvas.TextRect(Hotspot,Hotspot.Left+FCapLeft,Hotspot.Top+FCapTop,
                     FCaption,FTextStyle);

     //Zeichnet das Bild
     try
      aImage := TImage.Create(nil);
      FImageList.DrawForControl(canvas,Hotspot.Left+FImageLeft,Hotspot.Top+FImageTop,
                 FImageIndex,FImageWidth,aImage,gdeNormal);
     finally
      aImage.Free;
     end;
     //Zeichnet die Border
     if FShowBorder then DrawMessageBorder;

     if (FHoverOn=true) and (MessageHover=true) then DrawMessageHover;

     if pressed and FShowPressed  then
      self.canvas.Draw(Hotspot.Left,Hotspot.Top,MessagePressedBmp);

   end;
 end;

 //Enable
 if not FEnabled then
 begin
  try
   tmpBmp             := TBitmap.Create;
   tmpBmp.PixelFormat := pf32bit;
   tmpBmp.SetSize(width,height);
   tmpBmp.Canvas.Brush.Color:= FDisabledColor;
   tmpBmp.Canvas.FillRect(0,0,width,height);

   BmpToAlphaBmp(tmpBmp,FDisabledAlpBV);
   canvas.Draw(0,0,tmpBmp);
  finally
   tmpBmp.Free;
  end;
 end;

end;     

[Winni]

Hi!

Na gut - Dann keine BGRAbitmap.

Dann die alte TrickKiste:

* FormCreate:
SpeedButton.Flat auf true
SpeedButtom.Glyph.setSize ( SpeedButton. width, SpeedButton.Height);
SpeedButtom.caption := '';

Damit ist schon mal die Umrandung weg.

Status feststellen: Normal oder HOver: in private ne variable
HOver ist der Status zwischen SpeedButton.OnEnter und SpeedButton.OnExit

OnPaint:
lokale PNG erzeugen (TPortableNetworkGraphic): die kann auch transparenz.
Hat aber genau wie eine Bitmap einen Canvas.

Raufkopieren bzw Hintergrund zeichnen und beschriften mit Canvas.TextOut
Wenn alles fertig ist mit Canvas.CopyRect auf den Glyph.Canvas kopieren.

Wenn kein resize des Speedbuttons vorgenommen werden soll, kann man die PNG auch bei FormCreate erzeugen und bei FormDestroy freigeben.

Fertig.

Winni


PS.: Im Anhang ein Beispiel, wie man SpeedButtons selbst zeichnen kann - in Abhängigkeit vom Status