Button Gestaltung

[Andy Nightingale]

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.

Hallo WP, danke dir erstmal dafür. Sieht gut aus.- leider kann ich die Demo nicht sehen.- wo soll die sein? Grüße

[wp_xyz]

Mist - vergessen... Ist nun im ursprünglichen Beitrag angehängt.

[Andy Nightingale]

Mist - vergessen... Ist nun im ursprünglichen Beitrag angehängt.

Cool.- Danke dir.

[wp_xyz]

Ich habe mir das jetzt nochmal angesehen und finde, dass meine "Quick-and-dirty"-Lösung doch nicht so ideal ist, wenn man 200 Buttons benötigt, aber vor allem, wenn diese auf veschiedenen Formularen sind. Der richtige Weg ist eine eigene Komponente für diese Aufgabe. Zum Glück ist das nicht so schwer, und ich habe im Anhang eine "TImageButton"-Komponente bereitgestellt, die ein Bild aus einer Imageliste anzeigt und auf Mouse-Over und Klicks geringfügig das Aussehen des Bilds ändert. Das beigefügte Demo-Programm funktioniert ohne Installation, aber wenn du die Komponente auf der Palette haben willst, so wie alle anderen Komponenten, musst du das Package "imagebtn_pkg" im "ImageButton"-Ordner installieren - die Komponente ist dann auf der Seite "Misc".

[Andy Nightingale]

Ich habe mir das jetzt nochmal angesehen und finde, dass meine "Quick-and-dirty"-Lösung doch nicht so ideal ist, wenn man 200 Buttons benötigt, aber vor allem, wenn diese auf veschiedenen Formularen sind. Der richtige Weg ist eine eigene Komponente für diese Aufgabe. Zum Glück ist das nicht so schwer, und ich habe im Anhang eine "TImageButton"-Komponente bereitgestellt, die ein Bild aus einer Imageliste anzeigt und auf Mouse-Over und Klicks geringfügig das Aussehen des Bilds ändert. Das beigefügte Demo-Programm funktioniert ohne Installation, aber wenn du die Komponente auf der Palette haben willst, so wie alle anderen Komponenten, musst du das Package "imagebtn_pkg" im "ImageButton"-Ordner installieren - die Komponente ist dann auf der Seite "Misc".

Das ist ja cool.... ich teste das einmal. Bin gespannt. Danke dir.

[Andy Nightingale]

Ich habe mir das jetzt nochmal angesehen und finde, dass meine "Quick-and-dirty"-Lösung doch nicht so ideal ist, wenn man 200 Buttons benötigt, aber vor allem, wenn diese auf veschiedenen Formularen sind. Der richtige Weg ist eine eigene Komponente für diese Aufgabe. Zum Glück ist das nicht so schwer, und ich habe im Anhang eine "TImageButton"-Komponente bereitgestellt, die ein Bild aus einer Imageliste anzeigt und auf Mouse-Over und Klicks geringfügig das Aussehen des Bilds ändert. Das beigefügte Demo-Programm funktioniert ohne Installation, aber wenn du die Komponente auf der Palette haben willst, so wie alle anderen Komponenten, musst du das Package "imagebtn_pkg" im "ImageButton"-Ordner installieren - die Komponente ist dann auf der Seite "Misc".

Hi WP,.- irgend etwas funktioniert nicht richtig. Es hat in MISC den Button kurz angezeigt und beim nächsten laden kommt:

defekt.png (10.48 KiB) 3172 mal betrachtet

[wp_xyz]

Hast du das Package richtig installiert: Unter "Package" die lpk-Datei öffnen, "Verwenden" > "Installieren", die IDE neu übersetzen lassen (dauert ein paar Minuten). Nach dem automatischen Neustart der IDE sollte alles funktionieren.

[Andy Nightingale]

Hast du das Package richtig installiert: Unter "Package" die lpk-Datei öffnen, "Verwenden" > "Installieren", die IDE neu übersetzen lassen (dauert ein paar Minuten). Nach dem automatischen Neustart der IDE sollte alles funktionieren.

Nö habe es ganz normal installiert. Dachte das ich es deinstallieren kann.- aber selbst da spinnt es jetzt rum.

uno.png (11.22 KiB) 3028 mal betrachtet

dos.png (12.67 KiB) 3028 mal betrachtet

[Andy Nightingale]

kann man das irgendwie manuell löschen?

[wp_xyz]

Ich weiß nicht, was du gemacht hast...

Für den Fall, dass ich in dem Upload etwas vergessen habe sollte, habe ich jetzt alles mal probiert, so wie es ein neuer User der Komponente machen sollte, und es funktioniert ohne Probleme:

• zip-Datei aus meinem Beitrag am 2.Mai herunterladen und in irgendein Verzeichnis auspacken.
• Das enthaltene Projekt, project1, in der IDE öffnen, übersetzen und starten. Dieses Projekt ist so geschrieben, dass nichts installiert werden muss. Es MUSS funktionieren: also mit der Maus über die Buttons fahren, dabei sollen die Buttons etwas heller werden, und bei einem Klick sollen sie etwas dunkler werden. Und in dem zweiten Formular, das man öffnen kann, soll alles genauso funktieren.
• Du kannst das Package direkt aus dem ausgepackten Zip-Ordner heraus installieren, aber ich würde raten, den Unterordner "imagebutton" dort hin zu kopieren, wo du normalerweise die installierten Fremdkomponenten hast, z.B. c:\Lazarus_packages. Danach hast du also (mit diesem Beispiel) einen Ordner "c:\Lazarus_packages\imagebutton", und in diesem gibt es eine Datei "imagebtn_pkg.lpk".
• Öffne diese lpk-Datei in der IDE (entweder "Datei" > Öffnen", oder "Package" > "Package-Datei öffnen". Danach auf "Verwenden" und dann "Installieren" klicken. Nun kommt die von dir gezeigte Meldung "Das Package ... war für die Installation vorgemerkt ... Wollen Sie jetzt Lazarus neu kompilieren?". Auf "Ja" klicken, Damit wird die IDE neu übersetzt. Das ist erforderlich, weil sich der ImageButton in die Komponenten-Palette integriert und somit Teil der Lazarus-IDE wird.
• Nach einiger Zeit startet die IDE neu, und du findest die Komponente auf der Seite "Misc" der Palette (ein Viereck mit einem bläulichen runden Kreis - etwas besseres ist mir für das Komponenten-Icon nicht eingefallen).
• Zum Testen erzeuge ein neues, leeres Projekt. Klicke einige ImageButtons auf das Formular. Füge auch eine ImageList hinzu, Doppelklick auf der ImageList, und füge einige Icons zur ImageList (z.B. aus dem Ordner "images/general_purpose" der Lazarus-Installation). Klicke einen der ImageButtons an und setze seine Images-Eigenschaft auf die ImageList und seinen ImageIndex auf 0 (das 1. Bild in der ImageList). Wiederhole mit dem nächsten ImageButton, aber ImageIndex = 1. Usw mit den anderen ImageButtons. Kompilieren und starten - es MUSS funktionieren. Wenn nicht, ist irgendwas in deiner Lazaruinstallation oberfaul, aber darüber unterhalten wir uns, wenn es nötig ist.

[Andy Nightingale]

Ich weiß nicht, was du gemacht hast...

Für den Fall, dass ich in dem Upload etwas vergessen habe sollte, habe ich jetzt alles mal probiert, so wie es ein neuer User der Komponente machen sollte, und es funktioniert ohne Probleme:

• zip-Datei aus meinem Beitrag am 2.Mai herunterladen und in irgendein Verzeichnis auspacken.
• Das enthaltene Projekt, project1, in der IDE öffnen, übersetzen und starten. Dieses Projekt ist so geschrieben, dass nichts installiert werden muss. Es MUSS funktionieren: also mit der Maus über die Buttons fahren, dabei sollen die Buttons etwas heller werden, und bei einem Klick sollen sie etwas dunkler werden. Und in dem zweiten Formular, das man öffnen kann, soll alles genauso funktieren.
• Du kannst das Package direkt aus dem ausgepackten Zip-Ordner heraus installieren, aber ich würde raten, den Unterordner "imagebutton" dort hin zu kopieren, wo du normalerweise die installierten Fremdkomponenten hast, z.B. c:\Lazarus_packages. Danach hast du also (mit diesem Beispiel) einen Ordner "c:\Lazarus_packages\imagebutton", und in diesem gibt es eine Datei "imagebtn_pkg.lpk".
• Öffne diese lpk-Datei in der IDE (entweder "Datei" > Öffnen", oder "Package" > "Package-Datei öffnen". Danach auf "Verwenden" und dann "Installieren" klicken. Nun kommt die von dir gezeigte Meldung "Das Package ... war für die Installation vorgemerkt ... Wollen Sie jetzt Lazarus neu kompilieren?". Auf "Ja" klicken, Damit wird die IDE neu übersetzt. Das ist erforderlich, weil sich der ImageButton in die Komponenten-Palette integriert und somit Teil der Lazarus-IDE wird.
• Nach einiger Zeit startet die IDE neu, und du findest die Komponente auf der Seite "Misc" der Palette (ein Viereck mit einem bläulichen runden Kreis - etwas besseres ist mir für das Komponenten-Icon nicht eingefallen).
• Zum Testen erzeuge ein neues, leeres Projekt. Klicke einige ImageButtons auf das Formular. Füge auch eine ImageList hinzu, Doppelklick auf der ImageList, und füge einige Icons zur ImageList (z.B. aus dem Ordner "images/general_purpose" der Lazarus-Installation). Klicke einen der ImageButtons an und setze seine Images-Eigenschaft auf die ImageList und seinen ImageIndex auf 0 (das 1. Bild in der ImageList). Wiederhole mit dem nächsten ImageButton, aber ImageIndex = 1. Usw mit den anderen ImageButtons. Kompilieren und starten - es MUSS funktionieren. Wenn nicht, ist irgendwas in deiner Lazaruinstallation oberfaul, aber darüber unterhalten wir uns, wenn es nötig ist.

seit ich dein Imagebutton installiert habe kann ich kein Package mehr installieren. Nun habe ich es deinstalliert. Jetzt wollte ich es wieder installieren (so wie du beschrieben hast.- so hab ichs vorher exakt auch getan) nun kommt folgende Warnung:

ups.png (12.18 KiB) 1744 mal betrachtet

was bedeutet das es keine Register Prozedur hat? Soll ich installieren ich will es so anklicken?

[wp_xyz]

Keine Ahnung... Das Package hat definitiv eine Registrierungsprozedur

[Andy Nightingale]

Hallo WP,
ich habe nun mein komplettes Lazarus gelöscht und wieder neu installiert. Echt mühsam.- muß jetzt wieder alle Packages wieder neu installieren. Habe dein Package als erstes installiert.- und siehe da es ist wieder da. Also der Button in MISC. War aber vorher auch schon.- so nach dem 3ten mal gings dann nicht mehr. Bin gespannt. Vielleicht hat ja mit Lazarus etwas nicht gestimmt. Wie machst du das wenn du eine neue Version installierst? Gibt es eine Möglichkeit das man nicht immer wieder alles neu (Packages) installieren muß?
Nochmals herzlichen Dank für deine ganze Zeit und Mühe.- das war und ist echt großartig. Ich hoffe ich bin mal soweit das ich auch das alles so kann wie du. Danke

[wp_xyz]

Gibt es eine Möglichkeit das man nicht immer wieder alles neu (Packages) installieren muß?

Am Installieren kommt man nicht vorbei, denn die Designzeit-Packages müssen in die IDE gelinkt werden. Es gibt im Profil-Verzeichnis ein paar Dateien, in denen Lazarus speichert, welche Packages vorhanden sind, und die man in eine neue Installation rüberkopieren könnte. Aber genaues kann ich dazu nicht sagen, weil ich immer so wenig wie möglich installiere. Und in "echten" Projekten versuche ich, soweit wie möglich, die Fremdkomponenten zur Laufzeit zu erzeugen, so dass man nichts installieren muss. Etwa so wie ich es in dem Demo-Projekt gemacht habe.

[charlytango]

wp_xyz hat völlig recht, das ist aber längst nicht mehr so komplex wie früher.

Am Installieren kommt man nicht vorbei

Die Strategie von wp_xyz ist genau so wie die von vielen hier vermutlich eine gewachsene. Eine durch viele Probleme, crashes und Lösungsversuche geformte. Da hat wohl jeder seine eigene.

Meine ist:
- teste nie neue Packages in einer Lazarus-Installation die du auch produktiv verwendest.
- ich benutze derzeit etliche komplette Lazarus-Installationen in unterschiedlichsten Konfigurationen und Versionen nebeneinander (sind halt aktuell auch RC Versions trunk etc dabei bei denen ich teste ob sie für meine Zwecke funktionieren und stabil genug sind.) Wird eine nicht mehr benötigt, wird einfach das Verzeichnis und der Link zum starten gelöscht .
- eine solche Strategie ist auch mit der offiziellen Lazarus-Installation möglich, ich nutze aber fpcupdeluxe. Auch weil man sich bei dieser Installationsart mit Hilfe der Datei defmods.ini alle gewünschten Packages (aus denen die Lazarus mitliefert) individuell gleich wärend der Installation mit einbauen lassen kann.

- für alle via OPM erreichbaren Packages benutze ich die Möglichkeit, dass man im OPM die zur Installation markierten Packages in eine Datei schreiben kann und aus dieser die Markierungen wieder lädt. Den Rest macht dann OPM.

-für Packages die weder von Lazarus mitgeliefert werden, noch per OPM verfügbar sind gibt es drei Möglichkeiten. Entweder nach wie vor jedes Package einzeln nachinstallieren, oder ein Repository erstellen, auf das OPM zugreifen kann und dann per OPM installieren lassen. Macht per OPM aber nur Sinn wenn es wirklich mehrere sind und du es öfter machst
Die dritte Variante ist die Installation per fpcupdeluxe, denn das kann auch auch GIT Repositories zugreifen und das gewünschte Package gleich mitinstallieren.

Für alle Installationen gilt für mich: Die produktive Lazarus Instanz wird nicht angegriffen und bleibt solange autark bis eine neue Version sie ablöst