Sign in Join
Wiki copytemporary

TComboBox/de: what changed

Revision 0 to 1. Removed lines have a minus sign; added lines have a plus sign.

Title: TComboBox/de

OldNewLine
1+Diese Seite erklärt, wie man die [[doc:lcl/stdctrls/tcombobox.html|TComboBox]] Komponente verwendet. Auf etwas klicken bedeutet immer ein Linksklick, ein Rechtsklick wird explizit erwähnt.
2+
3+## Beschreibung
4+
5+Eine Kombination aus ein Bearbeitungsfeld und einer Dropdown-Liste, die mehrere Auswahlmöglichkeiten bietet.
6+
7+<figure>
8+<img src="Comp_Standard_TComboBox.png" title="Comp_Standard_TComboBox.png" />
9+<figcaption>Comp_Standard_TComboBox.png</figcaption>
10+</figure>
11+
12+## Verwendung
13+
14+Um eine [[doc:lcl/stdctrls/tcombobox.html|TComboBox]] auf einem [[TForm/de|Formular]] zu nutzen, kann man sie einfach auf der Komponentenpalette *Standard* auswählen und, mit einem Klick auf das Formular, platzieren.\
15+Die, in der ComboBox hinterlegten, [[String/de|Strings]] sind in der Eigenschaft *Items* hinterlegt, die vom Typ TStrings ist. Somit können Sie Strings der ComboBox zuweisen oder entfernen, wie bei einer [[TStringList-TStrings Tutorial/de|TStringList]] oder ihres Vorfahrens [[TStringList-TStrings Tutorial/de|TStrings]].
16+
17+Nachfolgend ein paar Beispiele zur Verwendung einer ComboBox *ComboBox1* auf einem Formular *Form1*:
18+
19+### ComboBox füllen
20+
21+#### per Objektinspektor
22+
23+- Wählen Sie die ComboBox auf Ihrem Formular mit einem Klick an.
24+- Gehen Sie im Objektinspektor im Reiter Eigenschaften auf die Eigenschaft *Items*.
25+- Klicken Sie auf den Button mit den drei Punkten. Der Zeichenketteneditor öffnet sich.
26+- Geben Sie Ihre Texte ein und bestätigen Ihre Arbeit mit *OK*.
27+
28+#### per Code beim Erstellen des Formulars
29+
30+- Estellen Sie den Eventhandler für *OnCreate*, indem Sie das Formular *Form1* anklicken, im Objektinspektor den Reiter Ereignisse wählen, das Ereignis *OnCreate* wählen und den Button \[...\] klicken.
31+- Im Quelltexteditor fügen Sie nun die gewünschen Auswahltexte ein, für unseres Beispiel schreiben Sie wie folgt:
32+
33+``` pascal
34+procedure TForm1.FormCreate(Sender: TObject);
35+begin
36+ ComboBox1.Items.Clear; //Alle vorhandenen Auswahlmöglichkeiten löschen
37+ ComboBox1.Items.Add('Rot'); //Ein Auswahltext hinzufügen
38+ ComboBox1.Items.Add('Grün');
39+ ComboBox1.Items.Add('Blau');
40+ ComboBox1.Items.Add('Zufallsfarbe');
41+end;
42+```
43+
44+### Machen, dass nach der Auswahl etwas geschieht
45+
46+Wie alle Komponenten, stellt auch die TComboBox verschiedene [[Event order/de|Ereignisse]] zur Verfügung, die aufgerufen werden, wenn der Nutzer diese verwendet. Um auf eine Änderung der Auswahl in der ComboBox zu reagieren, können Sie das Ereignis *OnChange* nutzen:
47+
48+- Doppelklicken Sie die ComboBox auf dem Formular oder wählen Sie im Objektinspektor das Ereignis *OnChange* und klicken Sie den Button \[...\] an.
49+- Der Eventhandler wird erstellt, nun können Sie Ihren gewünschten Quellcode einfügen, in unserem Beispiel wollen wir die Hintergrundfarbe des Formulars verändern:
50+
51+``` pascal
52+procedure TForm1.ComboBox1Change(Sender: TObject);
53+begin
54+ case ComboBox1.ItemIndex of //welcher Auswahltext (welches Item) wurde aktuell gewählt
55+ 0: Color:=clRed;
56+ 1: Color:=clGreen;
57+ 2: Color:=clBlue;
58+ 3: Color:=Random($1000000);
59+ end;
60+end;
61+```
62+
63+- Starten Sie Ihre Anwendung, bei der Auswahl wird die Hintergundfarbe des Formulars geändert.
64+
65+### ComboBox selber zeichnen
66+
67+Allgemein ist es günstig, die ComboBox in dem vom Nutzer eingestellen [Thema](http://de.wikipedia.org/wiki/Skin_%28Computer%29) darstellen zu lassen. Will man jedoch auch von diesem Standard abweichen und die Combobox nach eigenem Wunsch zeichnen (z.B. kleine Images vor die Auswahltexte stellen), kann man dies im Ereignis *OnDrawItem* bewerkstelligen. Wie das geht, können Sie jetzt ausprobieren:
68+
69+> **Note:** **Parameter von ComboBoxDrawItem:**\
70+> \
71+> **Control:**\
72+> Falls mehrere Controls (z.B. mehrere ComboBoxen) auf diesen Eventhandler zugreifen, weiß man, welches diesen Event geworfen hat. Man könnte in unserem Beispiel statt **`ComboBox1.Canvas.FillRect(ARect)`** auch **`TComboBox(Control).Canvas.FillRect(ARect)`** schreiben, wobei man zuvor möglichst noch abfragen sollte, ob es ich um eine TComboBox handelt:
73+>
74+> ``` pascal
75+> if Control is TComboBox then
76+> TComboBox(Control).Canvas.FillRect(ARect);
77+> ```
78+>
79+> **Index:** Gibt die Item-Stelle an, somit hat man Zugriff auf den Auswahltext (String) **`<ComboBox>.Items[Index]`**.\
80+> **ARect:** Beschreibt das Rechteck, was zur Zeichnung des Hintergrundes notwendig ist.\
81+> **State:** Status des Items, ob normal, fokusiert, selektiert etc.
82+
83+#### Zeichnen von einem gefüllten Rechteck
84+
85+- Modifizieren Sie am besten das Beispiel [[TComboBox/de|ComboBox füllen per Code beim Erstellen des Formulars]].
86+- Ändern Sie von *ComboBox1* im Objektinspektor die Eigenschaft *Style* auf *csOwnerDrawFixed*.
87+- Erstellen Sie im Objektinspektor den Eventhandler für das Ereignis *OnDrawItem*, indem Sie auf den Button \[...\] klicken.
88+- Folgenden Code fügen Sie dem Eventhandler zu:
89+
90+``` pascal
91+procedure TForm1.ComboBox1DrawItem(Control: TWinControl; Index: Integer;
92+ ARect: TRect; State: TOwnerDrawState);
93+var
94+ ltRect: TRect;
95+
96+ procedure FillColorfulRect(aCanvas: TCanvas; myRect: TRect); //Zufallsfarben zeichnen
97+ var
98+ y: Integer;
99+ begin
100+ for y:=myRect.Top to myRect.Bottom - 1 do begin
101+ aCanvas.Pen.Color:=Random($1000000);
102+ aCanvas.Line(myRect.Left, y, myRect.Right, y);
103+ end;
104+ end;
105+
106+begin
107+ ComboBox1.Canvas.FillRect(ARect); //Zuerst Standard - Hintergrund zeichnen
108+ ComboBox1.Canvas.TextRect(ARect, 22, ARect.Top, ComboBox1.Items[Index]); //Itemtext zeichnen
109+
110+ ltRect.Left := ARect.Left + 2; //Kästchen für Farbe zeichnen
111+ ltRect.Right := ARect.Left + 20;
112+ ltRect.Top := ARect.Top + 1;
113+ ltRect.Bottom := ARect.Bottom - 1;
114+
115+ ComboBox1.Canvas.Pen.Color:=clBlack;
116+ ComboBox1.Canvas.Rectangle(ltRect); //Ein Rahmen um die Farbkästchen zeichnen
117+
118+ if InflateRect(ltRect, -1, -1) then //Farbkästchen um ein Pixel verkleinern
119+ if Index = 3 then
120+ FillColorfulRect(ComboBox1.Canvas, ltRect) //Zufallsfarben zeichnen
121+ else begin
122+ case Index of
123+ 0: ComboBox1.Canvas.Brush.Color := clRed;
124+ 1: ComboBox1.Canvas.Brush.Color := clGreen;
125+ 2: ComboBox1.Canvas.Brush.Color := clBlue;
126+ end;
127+ ComboBox1.Canvas.FillRect(ltRect); //Farben entsprechend Auswahl zeichnen
128+ end;
129+end;
130+```
131+
132+- So könnte Ihr Beispiel dann aussehen:
133+
134+![](/wiki-images/1/1d/ComboBoxBsp1.png) -\> ![](/wiki-images/7/70/ComboBoxBsp2.png)
135+
136+#### Vorangestellte Images
137+
138+In diesem Beispiel werden wir ein paar Images in eine [[TImageList/de|TImageList]] laden und diese vor die Items der Combobox zeichnen. Es ist ein einfaches Beispiel, welches nur generell zeigen soll, wie Sie verfahren können. Details, wie das Prüfen, ob das entsprechende Image vorhanden ist usw. führe ich in diesem Beispiel explizit nicht aus. Dies müsste von Ihnen je nach Notwendigkeit vorgenommen werden.
139+
140+- Erstellen Sie eine Anwendung analog dem Beispiel [[TComboBox/de|ComboBox füllen per Code beim Erstellen des Formulars]].
141+- Ändern Sie von *ComboBox1* im Objektinspektor die Eigenschaft *Style* auf *csOwnerDrawFixed*.
142+- Fügen Sie eine [[TImageList/de|TImageList]] von der Komponentenpalette *Common Controls* auf Ihr Formular hinzu.
143+- Voreingestellt ist in *ImageList1* die Höhe *Height* und Breite *Width* von je 16 Pixel. Dies lassen wir so. Damit die Images ordentlich in unsere Combobox passen, stellen wir im Objektinspektor die Eigenschaft *ItemHeight* von *ComboBox1* auf *18*.
144+- Fügen Sie nun vier Images der ImageList zu:
145+ - Doppelklicken Sie *ImageList1* oder Linksklicken Sie *ImageList1* und wählen Sie *ImageList-Editor...*.
146+ - Klicken Sie auf *Hinzufügen* und wählen Sie ein Image aus (unter \<Lazarusverzeichnis\>/images/... sind diverse Images bzw. Icons in der Größe 16x16px zu finden).
147+ - haben Sie vier Images zugefügt, bestätigen Sie Ihre Arbeit mit \[OK\].
148+- Erstellen Sie im Objektinspektor den Eventhandler für das Ereignis *OnDrawItem*, indem Sie auf den Button \[...\] klicken.
149+- Folgenden Code fügen Sie dem Eventhandler zu:
150+
151+``` pascal
152+procedure TForm1.ComboBox1DrawItem(Control: TWinControl; Index: Integer;
153+ ARect: TRect; State: TOwnerDrawState);
154+begin
155+ ComboBox1.Canvas.FillRect(ARect); //Zuerst Standard - Hintergrund zeichnen
156+ ComboBox1.Canvas.TextRect(ARect, 20, ARect.Top, ComboBox1.Items[Index]); //Itemtext zeichnen
157+ ImageList1.Draw(ComboBox1.Canvas, ARect.Left + 1, ARect.Top + 1, Index); //Image entsprechend Index auf Canvas zeichnen
158+end;
159+```
160+
161+- So könnte Ihr Beispiel dann aussehen:
162+
163+![](/wiki-images/1/1d/ComboBoxBsp1.png) -\> ![](/wiki-images/c/ca/ComboBoxBsp3.png)
164+
165+---
166+*From the Free Pascal wiki, page "TComboBox/de", as it stood on 2020-02-29 after a change by Trev, out of the wiki's dump of 2024-05-26. Copyright stays with the author who wrote it, according to the old wiki's [[Licensing]] page. If you have concerns about this material, [message the admin](/wiki-contact).*

Back to history