Eigene Button Komponente

[.chicken]

Also ich habe nun das Forum und auch Google dazu durchsucht und habe auch einige Sachen gefunden, aber so richtig weitergeholfen hat mir das alles nicht!

Ich würde gerne eine eigene Button Komponente erstellen, die mehr Möglichkeiten zur grafischen Darstellung biete (Bilder etc.)! Ich möchte da einfach selber flexibler werden ;-)

Jetzt weiss ich aber nicht richtig wie ich das angehn soll, wie ich eine Einfache Eigenschaft hinzufügen kann weiss ich nach dem Tutorial auf DSDT, aber wie füg ich zB die Eigenschaft des Bildes hinzu?

Oder, um mal eine andere Komponente zu nennen, wie kann ich einem RichEdit die Möglichkeit von Bildern geben?

Gibts irgendwo ein ausführliches Tutorial für die Erstellung von eigenen Komponenten oder vll speziell eines Buttons? Das was ich gefunden habe war mir einfach nicht ausführlich genug und ging nicht auf genug Dinge ein!

MfG

[mkinzler]

1. Speicherung des Bildes hinzufügen.
2. OwnerDraw implementieren

[.chicken]

Das hilft mir jetzt eben nicht wirklich weiter.
Wie mach ich das denn? :)

[mkinzler]

Eigne dir mal Grundwissen an, dann verstehst du vielleicht auch die Tutorials.

[RavenIV]

Hier ist ein Tutorial für die Komponentenerstellung.
Es vermittelt halt nur Grundlagen.

[.chicken]

Das Problem ist nicht, das ich die Tutorials nicht verstehe, sondern dass es einen Unterschied macht eine Boolsche Variable oder ein Bild hinzuzufügen, oder etwa nicht ;-)?

Edit: Danke für das Tutorial, aber das is das was ich auch schon auf DSDT gefunden habe, wie gesagt hilft mir ur geringfügig weiter!
Danke trotzdem!

[mkinzler]

Zitat:

Das Problem ist nicht, das ich die Tutorials nicht verstehe, sondern dass es einen Unterschied macht eine Boolsche Variable oder ein Bild hinzuzufügen, oder etwa nicht Wink?

Im ersten Schritt nicht. Es ist halt naur die Frage, was du mit dem Bild anstellen willst.

[.chicken]

Ich möchte, dass man ein Bild auswählen kann, mit einen OpenDialog, wie bei TImage.
Das Bild soll dann als Oberfläche des Buttons dargestellt werden, ihn also quasi übermalen!
Und beim OnClick soll sich das Bild zB ändern!

[mkinzler]

Wie gesagt mußt du:
1. den Button um die Eigenschaft erweitern
2. ggf einen PropertyEditor erstellen
3. Den Button selber malen (OwnerDraw)

[Blackheart]

Schau Dir doch mal den Source von BitBtn an der ist doch in etwa so wie Du es möchtest.

[scrat1979]

Hallo .chicken,

IMHO ist es ohne weiteres - ähnlich wie eine Bool-Variable - möglich, ein TImage als Eigenschaft hinzuzufügen. Je nachdem, was Du machen möchtest achte darauf, ein Create im Konstruktor bzw. im Destruktor ein Destroy hinzuzufügen.

Schau doch mal bei Torry.net vorbei, eventuell findest Du dort ähnliche Komponenten und kannst Dir - nachdem Du verstanden hast, wie die Autoren es machen - dann Deine eigene schreiben.

BTW, ich habe die Grundzüge der Komponentenentwicklung auch erst kürzlich durch Tutorials und hier im Forum (Danke, mkinzler & Co.!) gelernt. Mittlerweile habe auch schon für mich ganz schöne grafische Komponenten entwickelt. Mein Tip: Fange mit nicht-grafischen Komponenten an (einfach mal irgendetwas programmieren, bei mir war es eine FileSearch-Komponente), danach befasse Dich mit Canvas & Co. und erst dann programmiere grafische Komponenten. Fange auch hier mit leichten Aufgaben an, z.B. Label-Komponente mit Rahmen-Eigenschaft, um Dich mit Canvas etwas auseinanderzusetzen und Dich mit den Grundfunktionen vertraut zu machen. Du brauchst nur etwas Geduld, das schaffst Du dann bestimmt! Ich habe ca. 4 Woche gebraucht um anständige Komponenten zu programmieren. Wobei ich bei weitem nicht behaupten möchte daß ich ein Profi darin bin, aber es genügt mir. Ganz wichtig ist es (wie immer gesagt wird), keinen Sourcecode blind abzuschreiben sondern zu verstehen warum der entsprechende Autor etwas so macht. (Grund-)kenntnisse von Canvas sind für grafische Komponenten pflicht, was bei mir die größte "Hürde" war. Hoffe dieser Tip hilft Dir etwas weiter.

Viel Glück,
SCRaT

[.chicken]

Ok, die Eigenschaft füg ich folgendermaßen hinzu:

Delphi-Quellcode:

type
  TGraficButton = TButtonControl
  Privat
    FBitmap: TBitmap;
  Public
  Published
    Picture: TBitmap read FBitmap write FBitmap;
end;

Das mit dem OwnerDraw weiss ich noch nicht wirklich wie ich das machen soll.
Und ein PropertyEditor auch nicht....

Ok, danke ebenfalls an Scrat und Blackheart. Ich werde mir mal Codes im Inet angucken und versuchen mich da rein zu arbeiten. Das Problem dabei ist, das viele davon (glaube ich zumindest) immer viele Funktionen eingebaut haben, die ihc nicht benötige und deswegen nicht mehr durch den Code durchblicke. Könnte ihn natürlich abtippen oder kopieren, aber das will ich ja garnicht, wie gesagt ich will ja flexibel werden ;-)

Ein schönes Tutorial wär trotzdem nicht schlecht ;-)

[zemi]

Hey .chicken, warum machst du das nich einfach folgendermaßen:

Delphi-Quellcode:

procedure Tmainform.button_layerMouseEnter(Sender: TObject);
begin
 button.Visible:=false;
 button_hover.Visible:=true;
end;

procedure Tmainform.button_layerMouseLeave(Sender: TObject);
begin
 if(button_hover.Visible)
  then button_hover.Visible:=false
  else button_down.Visible:=false;
 button.Visible:=true;
end;

procedure Tmainform.button_layerMouseUp(Sender: TObject; Button: TMouseButton;
  Shift: TShiftState; X, Y: Integer);
begin
 button_down.Visible:=false;
 button_hover.Visible:=true;
end;

procedure Tmainform.FormCreate(Sender: TObject);
begin
  with button_layer.Picture.Bitmap do
   begin
    TransparentColor := Canvas.Pixels[1,1];
    TransparentMode := tmFixed;
   end;
end;

procedure Tmainform.button_layerMouseDown(Sender: TObject; Button: TMouseButton;
  Shift: TShiftState; X, Y: Integer);
begin
 button_hover.Visible:=false;
 button_down.Visible:=true;
end;

Erklärung:
button = Grafik des Buttons
button_hover = Grafik des Buttons, wenn Maus drüber ist (onMouseEnter)
button_down = Grafik des Buttons, wenn Maus geklickt ist (onMouseDown)
button_layer = Unsichtbare Grafik, die Events (onmouseenter,...) regelt

Funktionsprinzip:
Es liegen 4 Grafiken übereinander in selber größe:
- 1 für die normale Ansicht mit dem Wert visible:=true;
- 2 weitere für hover und click effekt mit visible:=false;
- ganz oben die Transparente, also nicht Sichtbare Grafik
Die Transparente Grafik regelt mit ihren Events, welche Button-Grafik unter ihr angezeigt werden soll.

Das kannst du mit einem openPictureDlg verbinden und du hast, was du willst.
Der einzige Nachteil ist, dass für jeden Effekt des Buttons eine eigene Grafik existieren muss!

gruß ZeMi

[Hansa]

Zitat:

Zitat von .chicken

Delphi-Quellcode:

type
  TGraficButton = TButtonControl

Und wo ist da die Vorfahr-Komponente ? :shock: Man kann nicht einfach etwas gleichsetzen und dann einfach hingehen, neues hinzuzufügen. :P

[Mackhack]

Zitat:

Zitat von .chicken

Ich würde gerne eine eigene Button Komponente erstellen, die mehr Möglichkeiten zur grafischen Darstellung biete (Bilder etc.)! Ich möchte da einfach selber flexibler werden ;-)

Gibts irgendwo ein ausführliches Tutorial für die Erstellung von eigenen Komponenten oder vll speziell eines Buttons? Das was ich gefunden habe war mir einfach nicht ausführlich genug und ging nicht auf genug Dinge ein!

Du solltest mal Sunlight Anhauen. Der hat eine eigene Kompo geschrieben mit x verschiedenen Buttons!

[.chicken]

Also danke nochmal für die Antworten! Also vorerst: Komponenten finden, die dem ähneln was ich möchte ist sicher nicht schwer, aber was eigenes auf die Beine zu stellen ist schöner :)

Ja also so wie du das meintest, Zemi hatte ich das ungefähr vor, nur halt in einer eigenen Komponente (wenn ich dich richtig verstanden habe, dann wolltest du das einfach mit einzelnen Bildern machen?).

Ich werd da ma weiter dran arbeiten :)

Danke soweit ;-)

[.chicken]

Kann mir mal bitte kurz einer erklären wie ich mienem Button die OwnerDraw Eigenschaft zuweise? Habe mir nun verschiedene Beispiele im Internet angesehn, aber nichts gefunden wie ich dem TButton ganz einfach OwnerDraw zuweise...
Das können doch nur 2-3Zeilen Code sein!?

[Hansa]

Zitat:

Zitat von .chicken

Also vorerst: Komponenten finden, die dem ähneln was fahr zu benennen.ich möchte ist sicher nicht schwer, aber was eigenes auf die Beine zu stellen ist schöner :)

Genau deshalb gibt es OOP. Dass man das selber machen kann. Also vorhandene Komponenten um gewisse Fähigkeiten zu erweitern. Das geht aber eben nicht ohne den Vorfahr zu benennen. Bisher sieht man nichts davon.

[.chicken]

Alsooo...mein erster Ansatz war ja

Delphi-Quellcode:

type
  TGraphicButton = class(TGraphicControl) //sry hatte hier das class vergessen

Jetzt denke ich aber ich leite es doch von TButton ab:

Delphi-Quellcode:

type
  TGraphicButton = class(TButton)

So, wie setz ich da denn jetzt OwnerDraw auf True??
Im OnCreate? Und mit welchem Befehl, konnte keinen finden!

Danke soweit!

[Hansa]

Ist Dir klar, dass erst ab jetzt eine Diskussion "wie und was" Sinn macht ? :P Wir sind schon auf Seite 2 und trotz mehrmaligem Nachfragen ist erst jetzt geklärt, das von TButton abgeleitet werden soll. Alles andere würde wohl auch wenig Sinn machen. :???: Tip am Rande : gucke im SwissDelphiCenter. Da ist ein farbiger Button zu besichtigen. Da sieht man zumindest mal, auf was überhaupt zu achten ist.

[Nils_13]

Wäre GraphicControl nicht besser zu stylen ?

[.chicken]

Ja hab ich auch gedacht ob das nich vielleicht besser ist, aber ich meine der Button heisst doch nicht umsonst Button hab ich mir gedacht?

SwissDeplphiCenter habe ich mir gerade angesehen!
Für mich sind da doch eigentlich nur folgende Zeilen Code relevant? (jetzt aufs OwnerDraw bezogen!)

Delphi-Quellcode:

procedure TColorButton.CreateParams(var Params: TCreateParams);
begin
  inherited CreateParams(Params);
  with Params do Style := Style or BS_OWNERDRAW;
end;

Oder meinte ihr ich sollte doch bei GraphicControl bleiben?

Achso, sonst is noch das Problem, dass wenn ich eine Bitmap Property hinzufüge, soweit zwar alles funktioniert, ich kann sie aber nicht im Object Inspector hinzufügen. Also ich lade da ein Bild rein, aber wenn ich dann auf OK klicke, ist hinterher kein Bild drin und ich krieg ne AV!

Edit2: Ahso, wenn ich das richtig verstanden habe, dann muss ich die WindowsMessages abfangen, die wegen dem Zeichnen des Buttons gesendet werden und darin eine eigenen Prozedur schreiben?
Oder sehe ich das falsch?

[Khabarakh]

Zitat:

Zitat von .chicken

Ja hab ich auch gedacht ob das nich vielleicht besser ist, aber ich meine der Button heisst doch nicht umsonst Button hab ich mir gedacht?

Die WinAPI hats leider nicht so mit den objektorientierten Ansätzen ;) . Kompletter Neubau ist oft leider die beste Lösung.

[Hansa]

Zitat:

Zitat von .chicken

Oder meinte ihr ich sollte doch bei GraphicControl bleiben?

Also das auf keinen Fall ! :warn:

[.chicken]

Also der eine sagt das der andere was anderes...^^

Warum sollte ich denn auf keinen Fall dabei bleiben?
Und was empfiehlst du mir sonst? Einfach TButton?

Brauch man denn für OwnerDraw doch soviel Quelltext? Also habe mal den Teil von SwissDelphi kopiert

Delphi-Quellcode:

procedure TColorButton.CreateParams(var Params: TCreateParams);
begin
  inherited CreateParams(Params);
  with Params do Style := Style or BS_OWNERDRAW;
end;

um zu sehen ob das der Code ist den ich brauche, aber der Button wird trotzdem noch normal gezeichnet.

Ich finde einfach keine simple Erklärung, wie ich TButton die OwnerDraw Eigenschaft zuweise. Die ganzen Quelltexte helfen mir da irgendwie nicht soviel...

Denkt jetzt bitte nicht ich will fertigen Code, das will ich auf keinen Fall, aber nur an den Quelltexten versteh ich einfach nicht wie ich das mache!

Danke soweit.

Edit: Achso und noch ne Frage. Wenn ich nun verschiedene Buttons, mit verschiedenen Symbolen brauche, also zB ConnectButton und DisconnectButton und sowas...dann könnten das ja ziemlich viele Bilder werden die ich da brauche! Macht es Sinn das dann manuell zu zeichnen?

Und wie krieg ichs nun hin, dass ich im ObjectInspector auch die Bilder einfügen lassen kann?

[Hansa]

Deine Delphi-Version ist unklar. Sind die VCL - Quellen vorhanden oder nicht ?

[.chicken]

Also Delphi Version is 7 SecondEdition Professional.

Mit VCL Quellen meinst du die Quelltexte der Komponenten? Also TButton in diesem Fall? Ja also kann ihn normal benutzen, deswegen denke ich mal schon!?

[.chicken]

Kann sich vielleicht nochmal wer dazu äußern? :)
Danke

[Hansa]

Nimm doch einen Speedbutton oder leite davon ab. Zumindest die Button-Grafik wäre damit bereits erledigt. Was solls denn noch sein ?

[.chicken]

Ja aber Speedbutton macht das mit der Buttongrafik nicht wirklich schön finde ich! Der Border und so sind immernoch zu sehen. Möchte eigentlich, dass nur meine eigene Grafik angezeigt wird (und, sollte ich das nun lieber selbst zeichnen oder ein Bitmap nehmen?).
Ansonsten, also vielleicht eine Hover-Grafik, Mouse-Down-Grafik, dann brauch ich eigentlich nurnoch das OnClick-Event...vll noch ne Einstellung für die Grafiken (wenn ich sie denn dann nicht selbst zeichne), ob sie sich der Größe des Buttons anpassen oder ihre OriginalGröße behalten.

Mehr fällt mir momentan eigentlich nicht ein ;-)

[Apollonius]

Dass nur deine eigene Grafik gezeichnet wird? Verstehe ich was falch oder kann/sollte man das mit TImage machen?

[.chicken]

Wieso denn mit TImage? Warum kann ich das nicht einfach mit TBitmap machen? Brauche eigentlich nur Bitmaps!

[mkinzler]

Er meint eine TImage statt TButton

[.chicken]

Hm...das klingt eigentlich logisch... :D
Aber wäre das nicht das gleiche wie mit dem GraphicControl? Da meinte doch auch wer ich sollte das nicht verwenden!

[Hansa]

Zitat:

Zitat von .chicken

Aber wäre das nicht das gleiche wie mit dem GraphicControl? Da meinte doch auch wer ich sollte das nicht verwenden!

Das war ich. :P Aus folgendem Grund : Rad nicht neu erfinden !

[dizzy]

1) Leite am besten von TButtonControl oder TWinControl ab. Direkt von TButton abzuleiten ist eher weniger elegant, zumindest aber ist die VCL so konstruiert, dass es zu den meisten Standard-Controls eine "Custom"-Variante gibt, die direkter Vorfahr der bekannten Komponenten ist. An manchen Stellen in der OH wird empfohlen, von diesen statt der eigentlichen Klassen abzuleiten.
Man hat durch das Design bedingt dann auch noch die Möglichkeit, einzelne Properties nicht zu publishen, wenn sie nicht benötigt werden.

2) Du bekommst deine AV beim laden eines Bitmaps sehr wahrscheinlich, weil du das Bitmap nicht erzeugt hast. Jeder nicht-elementare Datentyp (von Records und Arrays mal abgesehen) muss erzeugt werden, sonst gibts auffe Rübe :)

Delphi-Quellcode:

type
  TMyButton = class(TWinControl)
  private
    FBitmap: TBitmap;
  public
    constructor Create(AOwner: TComponent); override;
    destructor Destroy; override;
  end;

implementation

constructor TMyButton.Create(AOwner: TComponent);
begin
  inherited;
  FBitmap := TBitmap.Create;
end;

destructor TMyButton.Destroy;
begin
  FBitmap.Free;
  inherited;
end;

Damit wird dein Bitmap mit Erstellung deines Buttons erzeugt, und beim Entfernen mit entfernt. Grundsätzlich gilt: Was man im Konstruktor erzeugt, muss im Destruktor auch wieder freigegeben werden. (Es gibt einige wenige Ausnahmen, aber das ist idR sehr speziell und erstmal völlig unwichtig hier.)

3) Lass dich von Hansas Erbsenzählerei nicht verunsichern :P

4) Wenn du, wie vorgeschlagen, von TWinControl ableitest, brauchst du dir um OwnerDraw keine Gedanken zu machen. Einfach die Methode "Paint" überschreiben, und in dieser tun, was du willst. Zum Beispiel ein Bitmap auf den Canvas zeichnen! :)
Ähnlich kannst du mit den Click-Handlern verfahren, wobei du dort zwei Möglichkeiten hast, ein anderes Bild zu malen. Entweder du zeichnest direkt im Handler, oder du setzt eine Statusvariable, und löst einen Repaint aus. In der Paint-Methode müsstest du dann diese Variable auswerten, und je nach Status das jeweilige Bitmap zeichnen. (Bei der ersten Variante bin ich nicht sicher, ob dir von sonstwo ausgelöste Repaints das zweite Bitmap gleich wieder mit dem im Paint gezeichneten übernageln.)
Hier würde es übrigends eher Sinn machen, MouseDown/Up zu verwenden, und nicht Click. Ein Click ist immer die Kombination aus Down und Up, nicht nur einfach Down.

5) Für eine eigene Button-Komponente von TButton ableiten macht wenig Sinn, we du die Grafik komplett selber übernimmst, und keine spezifischen Eigenschaften von Windows-Buttons brauchst (ModalResult z.B.). TGraphicControl als Vorfahr hingegen halte ich für nicht ausreichend, mit Blick auf spätere Verwendung und Erweiterung. Ein GraphicControl hat kein Windows-Handle, womit einem bereits die Möglichkeit genommen wäre in einer späteres Ausbaustufe u.U. mit Regions zu arbeiten um nicht-rechteckige Controls zu erstellen. So nett die Idee aber jetzt auch klingt: Kümmer dich frühstens um sowas, wenn du das minimale Gerüst fertig hast. Das ist zwei Schritte in die Zukunft gedacht.

6) Fröhlich Wochenend :spin2:

[elundril]

ähhhm wenn ich da auch was sagen darf: Ich würd nicht Bitmap nehmen sondern TGraphic oder Tpicture weil man dann jedes Bildformat reinladenkann das Delphi kennt. (z.B: Bitmaps, Jepgs, usw.)

korrigiert mich bitte wenn ich falsch liege!

lg el

[.chicken]

Ja, aber ich brauche erstmal nur Bitmap, aber das kann ich ja hinterher noch erweitern! ;-)

Ok danke für eure Hilfe! Dann weiss ich jetzt einigermaßen was ich machen muss allerdings:
Die Bitmaps habe ich schon createt und zwar sowohl die Property als auch das dazugehörige Bild (also Bild und FBild sozusagen).
Die create ich beide im Constructor meines Buttons aber ich versuch nu erstma weiter ;-)

[.chicken]

Sorry, aber brauche hier doch nochmal eure Hilfe!
Also habe folgenden Code:

Delphi-Quellcode:

unit GraphicButton;

interface

uses
  SysUtils, Classes, Controls, Graphics, Types;

type
  TGradientStyle = (gsVertical, gsHorizontal);

  TGraphicButton = class(TCustomControl)
  private
    FBorderSize: Integer;
    FBorderColor,
    FColor: TColor;
    FPicture: TBitmap;
    property Canvas;
    procedure SetPicture(Value: TBitmap);
  protected
  public
    constructor Create(AOwner: TComponent); override;
    destructor Destroy; override;
    procedure Repaint; override;
  published
    property BorderSize: Integer read FBorderSize write FBorderSize;
    property BorderColor: TColor read FBorderColor write FBorderColor;
    property Color: TColor read FColor write FColor;
    property Picture: TBitmap read FPicture write SetPicture;
  end;

procedure Register;

implementation

constructor TGraphicButton.Create(AOwner: TComponent);
begin
  inherited Create(AOwner);

  FPicture := TBitmap.Create;
  Picture := TBitmap.Create;
end;

destructor TGraphicButton.Destroy;
begin
  FPicture.Free;
  Picture.Free;
end;

procedure TGraphicButton.Repaint;
begin
  Canvas.Pen.Width := BorderSize;
  Canvas.Pen.Style := psInsideFrame;
  Canvas.Pen.Color := BorderColor;
  Canvas.Brush.Color := Color;
  Canvas.Rectangle(0, 0, Width, Height);
end;

procedure TGraphicButton.SetPicture(Value: TBitmap);
begin
  FPicture.Assign(Value);
  Repaint;
end;


procedure Register;
begin
  RegisterComponents('Eigene', [TGraphicButton]);
end;

end.

Funktioniert aber garnicht! Erstens kann ich immernoch kein Bild laden! Die Prozedur SetPicture wird allerdings aufgerufen, weil danach der Button gemalt wird (mit Farbe). Außerdem wird sonst mein Button nicht gezeichnet, also auch nicht im kompilierten Programm.

Beim Beenden des Programms wird ein Fehler ausgegeben, was, denke ich mal, am Free der Images liegt...

[TStringlist]

Die eigentliche "Picture"-Property hat da im Constructor und Destructor nichts verloren (...weil Properties natürlich als solches nicht createt bzw. gefreet zu werden brauchen). Außerdem fehlt im Destructor noch ein "inherited" als letzte Zeile.

Btw, die <property canvas>-Zeile im Deklarationsteil deiner Componente kannst Du dir sparen. Auf das TCustomControl-Canvas kannst Du auch ohne die einfach so zugreifen.

..und im Übrigen würde ich auch gleich den "PaintHandler" überschreiben, anstatt das Repaint. Imo hast Du nur mit einem überschriebenen "PaintHandler" nachher die volle Kontrolle über das, was dann bei einer jeden ankommenden wm_paint-Message zur Darstellung deines Buttons (und seiner Zustände) so alles zusammengemalt werden muss, als da wäre z.B.: Grundfläche initialisieren, die unterschiedlichen Rahmen (ob gedrückt o. nicht), eine Caption oder (wie bei dir) ein Picture, einen Focusring...