Button Gestaltung

[Andy Nightingale]

Hallo Leute,
ich möchte ein paar Buttons mit meinen eigenen Bildern gestalten und zwar mit der ImageList und BitBtn. Wie bekomme ich die Ausenumrandung weg bzw. in der gleichen Farbe wie das Formular damit nur meine Bilder angezeigt werden? Danke im voraus.

eins.jpg (10.09 KiB) 805 mal betrachtet

zwo.jpg (34.63 KiB) 805 mal betrachtet

[theo]

Mit einem TSpeedButton?

[juelin]

Hi Andy,
wenn Du in dem Suchfeld am rechten Rand (in den Komponenten)
z. B. Button ein gibst bekommst Du alle Button angezeigt die es gibt.
Das gilt auch für andere Komponenten wie z. B Edit.......
Musst dann nur noch in den Eigenschaften sehen was die Komponete kann.
Gruß
Jürgen

[Andy Nightingale]

Mit einem TSpeedButton?

Hmmm, wie weiß ich denn dem SpeedButton die Imagelist Bilder zu? Wenn ich im Button den Reiter IMAGE ansehe dann die Imagelist aufrufe erscheint im Button nicht das Bild. Was mache ich da falsch?

[Andy Nightingale]

Hi Andy,
wenn Du in dem Suchfeld am rechten Rand (in den Komponenten)
z. B. Button ein gibst bekommst Du alle Button angezeigt die es gibt.
Das gilt auch für andere Komponenten wie z. B Edit.......
Musst dann nur noch in den Eigenschaften sehen was die Komponete kann.
Gruß
Jürgen

Hallo Jürgen,
danke dir habs gesehen. Aber wie man die Imagelist mit dem Speedbutton verbindet....check ich nicht. Hast du da ein Beispiel? Grüße

[Andy Nightingale]

Hallo Jürgen, Hallo Theo,
habs jetzt fast hinbekommen.

ok.jpg (922 Bytes) 699 mal betrachtet

So siehts gut aus.- nur wenn ich den Button anklicke dann erscheint um den Button das Viereck drumherum.- zwar nur beim klicken.- aber wie bekomme ich das denn beim klicken weg? Das ist doch bestimmt irgendeine Einstellung die ich noch nicht gefunden habe. Eine Ahnung?

[fliegermichl]

Nimm doch statt dem Button ein TImage. Da kann man auch auf das klicken reagieren, es ändert aber seine Darstellung nicht.

[juelin]

Hi Andy,
meinst Du das?
Gruß
Jürgen

[Andy Nightingale]

Nimm doch statt dem Button ein TImage. Da kann man auch auf das klicken reagieren, es ändert aber seine Darstellung nicht.

Eben das ist das Problem.

[Andy Nightingale]

Hi Andy,
meinst Du das?
Gruß
Jürgen

Hallo Jürgen, danke für das Beispiel, aber ich meinte Speedbutton mit der Imagelist und nicht nur ein Image.

[Mathias]

Nimm doch statt dem Button ein TImage. Da kann man auch auf das klicken reagieren, es ändert aber seine Darstellung nicht.

Eben das ist das Problem.

Da ist etwas Handarbeit angesagt. Fange die Ereignisse OnMousexxx ab und verändere das Images je nach Status der Maus.

[Andy Nightingale]

Nimm doch statt dem Button ein TImage. Da kann man auch auf das klicken reagieren, es ändert aber seine Darstellung nicht.

Eben das ist das Problem.

Da ist etwas Handarbeit angesagt. Fange die Ereignisse OnMousexxx ab und verändere das Images je nach Status der Maus.

Ich verstehe das.- aber es sind über 200 verschiedene Buttons in der Anwendung die ich erstellen muß. Deshalb ist eine einfachere Variante doch besser.- Danke aber für die Idee

[juelin]

Hi Andy,
mit TImagelist habe ich auch noch nicht gearbeitet.
Da müßte ich mich im Internet schlau machen.
Aber ich denke, das kannst Du auch.
Gruß
Jürgen

[wp_xyz]

Wenn du beim SpeedButton die Eigenschaft Flat auf true setzt, wird der Standard-Rahmen nicht gezeichnet, nur beim Mouse-Over/Mouse-Down kommt ein Rahmen zur Hervorhebung.

Wenn du das nicht willst, musst du etwas programmieren (aber darum geht's ja!). Ein TImage würde ich nicht nehmen, das ist mir für diese Aufgabe zu schwergewichtig. Eine TPaintbox tut's auch.

Also:

• Klicke eine TImageList aufs Formular. Setze Width und Height auf die Werte für die Größe deiner Button-Icons. Doppelklick auf der ImageList --> Füge die Bilder für die "Buttons" der Imagelist hinzu.
• Klicke aufs Formular so viele TPaintbox-Instanzen wie du brauchst. Mache sie so groß, wie die Icons. Trage für jede Paintbox den ImageIndex des anzuzeigenden Bildes in der Allzweck-Eigenschaft "Tag" ein.
• Um das Image anzuzeigen, markierst du alle Paintboxen und klickst auf den '...' neben der OnPaint-Eigenschaft. Dort trägst du folgenden Event-Handler ein, der für alle Paintboxen gelten soll - das ist der Code, mit dem sich jede Paintbox selbst zeichnet. Aus dem Sender-Parameter kannst du ableiten, welche Paintbox gerade gezeichnet wird - durch einen Type-Cast kannst du direkt auf die Paintbox zugreifen. Die Anzeige des Bildes erfolgt im wesentlichen durch Aufruf der Methode Draw der ImageList. der erste Parameter ist der canvas der Paintbox, auf dem gemalt werden soll, dann kommen X und Y der linken oberen Ecke des Bildes, sowie der ImageIndex, den du ja im Tag gespeichert hast. Der letzte Parameter schließlich ist ein TGraphicsDrawEffect-Wert, der bestimmt, wie das Bild je nach Mauszustand verändert werden soll: Normalzustand = gdeNormal, Maus über der Paintbox --> gdeHighlighted (= etwas heller als normal), Maus geklickt --> gdeShadowed (etwas dunkler als normal). Ob die Maus über der Paintbox ist, kann man durch Abfrage der Mouse.CursorPos rauskriegen, allerdings muss man diesen Wert von Bildschirm-Koordinaten auf die Paintbox herunterrechnen. Ob die linke Maustaste gedrückt ist, ist etwas umständlicher. Ich merke mir dafür im OnMouseDown-Ereignis den Tag-Wert der Paintbox und vergleiche diesen in OnPaint mit dem aktuellen Tag (siehe unten).

  Code: Alles auswählen

  procedure TForm1.PaintBox1Paint(Sender: TObject);
  var
    imgIndex: Integer;
    effect: TGraphicsDrawEffect;
    paintbox: TPaintbox;
    P: TPoint;
  begin
    paintbox := Sender as TPaintbox;
    imgIndex := paintbox.Tag;
    P := paintbox.ScreenToClient(Mouse.CursorPos);
    if PtInRect(paintbox.ClientRect, P) then
    begin
      if FMouseDownIndex = paintbox.Tag then   // Mouse down
        effect := gdeShadowed
      else
        effect := gdeHighlighted;
    end else
      effect := gdeNormal;
    ImageList1.Draw(paintbox.Canvas, 0, 0, imgIndex, effect);
  end;

• Nun muss man noch die ganze Maussteuerung machen, also: wenn die Maus in eine Paintbox hinein oder herausbewegt wird, muss die Paintbox neu gezeichnet werden (Paintbox.Invalidate). Oder wenn die Maustaste gedrückt wird, muss man sich den Tag als Identifikation der Paintbox merken (FMouseDownIndex) und die Paintbox neu zeichnen. Genauso, wenn die Maustaste losgelassen wird - das setzen wir FMouseDownIndex auf einen Wert zurück, der sonst nirgendwo als Tag verwendet wird, am besten auf -1. Alle Paintboxen können sich dieselben Event-Handler teilen:

  Code: Alles auswählen

  procedure TForm1.PaintBox1MouseUp(Sender: TObject; Button: TMouseButton; Shift:
    TShiftState; X, Y: Integer);
  begin
    FMouseDownIndex := -1;
    (Sender as TPaintbox).Invalidate;
  end;
  
  procedure TForm1.PaintBox1MouseLeave(Sender: TObject);
  begin
    (Sender as TPaintbox).Invalidate;
  end;
  
  procedure TForm1.PaintBox1MouseEnter(Sender: TObject);
  begin
    (Sender as TPaintbox).Invalidate;
  end;
  
  procedure TForm1.PaintBox1MouseDown(Sender: TObject; Button: TMouseButton; Shift
    : TShiftState; X, Y: Integer);
  begin
    if Button = mbLeft then
    begin
      FMouseDownIndex := (Sender as TPaintbox).Tag;
      (Sender as TPaintbox).Invalidate;
    end;
  end;
  
  procedure TForm1.FormCreate(Sender: TObject);
  begin
    FMouseDownIndex := -1;
  end;

Das ganze gibt es als kleines Demo im Anhang.

[Mathias]

Ich verstehe das.- aber es sind über 200 verschiedene Buttons in der Anwendung die ich erstellen muß. Deshalb ist eine einfachere Variante doch besser.- Danke aber für die Idee

Das muss du nicht 200x machen. Vererbe das TImage ZB. in TImageButton.
Dem gibst du dein Standard Images mit. Wen du mit der Maus darüber fährst, verdunkelst du das Images ein wenig. Wen der Mausbutton unten ist machst es noch dunkler.
Dieser Effekt siehst du zB. in Chrome oder Firefox sehr gut wen man mit der Maus über Buttons fährt und klicjt, welche sich in der Kopfleiste befinden.

So nebenbei sind das alles Rahmenlose Buttons.