TComboBox/de: what changed

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

Old	New		Line
1	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	2
3	3		## Beschreibung
4	4
5	5		Eine Kombination aus ein Bearbeitungsfeld und einer Dropdown-Liste, die mehrere Auswahlmöglichkeiten bietet.
6	6
7		-	~~<figure>~~
8		-	~~<img src="Comp_Standard_TComboBox.png" title="Comp_Standard_TComboBox.png" />~~
9		-	~~<figcaption>Comp_Standard_TComboBox.png</figcaption>~~
10		-	~~</figure>~~
	7	+	![](/wiki-images/a/a3/Comp_Standard_TComboBox.png)
11	8
12	9		## Verwendung
13	10
14	11		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	12		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	13
17	14		Nachfolgend ein paar Beispiele zur Verwendung einer ComboBox ComboBox1 auf einem Formular Form1:
18	15
19	16		### ComboBox füllen
20	17
21	18		#### per Objektinspektor
22	19
23	20		- Wählen Sie die ComboBox auf Ihrem Formular mit einem Klick an.
24	21		- Gehen Sie im Objektinspektor im Reiter Eigenschaften auf die Eigenschaft Items.
25	22		- Klicken Sie auf den Button mit den drei Punkten. Der Zeichenketteneditor öffnet sich.
26	23		- Geben Sie Ihre Texte ein und bestätigen Ihre Arbeit mit OK.
27	24
28	25		#### per Code beim Erstellen des Formulars
29	26
30	27		- 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	28		- Im Quelltexteditor fügen Sie nun die gewünschen Auswahltexte ein, für unseres Beispiel schreiben Sie wie folgt:
32	29
33	30		``` pascal
34	31		procedure TForm1.FormCreate(Sender: TObject);
35	32		begin
36	33		ComboBox1.Items.Clear; //Alle vorhandenen Auswahlmöglichkeiten löschen
37	34		ComboBox1.Items.Add('Rot'); //Ein Auswahltext hinzufügen
38	35		ComboBox1.Items.Add('Grün');
39	36		ComboBox1.Items.Add('Blau');
40	37		ComboBox1.Items.Add('Zufallsfarbe');
41	38		end;
42	39		```
43	40
44	41		### Machen, dass nach der Auswahl etwas geschieht
45	42
46	43		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	44
48	45		- Doppelklicken Sie die ComboBox auf dem Formular oder wählen Sie im Objektinspektor das Ereignis OnChange und klicken Sie den Button \[...\] an.
49	46		- 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	47
51	48		``` pascal
52	49		procedure TForm1.ComboBox1Change(Sender: TObject);
53	50		begin
54	51		case ComboBox1.ItemIndex of //welcher Auswahltext (welches Item) wurde aktuell gewählt
55	52		0: Color:=clRed;
56	53		1: Color:=clGreen;
57	54		2: Color:=clBlue;
58	55		3: Color:=Random($1000000);
59	56		end;
60	57		end;
61	58		```
62	59
63	60		- Starten Sie Ihre Anwendung, bei der Auswahl wird die Hintergundfarbe des Formulars geändert.
64	61
65	62		### ComboBox selber zeichnen
66	63
67	64		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	65
69	66		> Note: Parameter von ComboBoxDrawItem:\
70	67		> \
71	68		> Control:\
72	69		> 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	70		>
74	71		> ``` pascal
75	72		> if Control is TComboBox then
76	73		> TComboBox(Control).Canvas.FillRect(ARect);
77	74		> ```
78	75		>
79	76		> Index: Gibt die Item-Stelle an, somit hat man Zugriff auf den Auswahltext (String) `<ComboBox>.Items[Index]`.\
80	77		> ARect: Beschreibt das Rechteck, was zur Zeichnung des Hintergrundes notwendig ist.\
81	78		> State: Status des Items, ob normal, fokusiert, selektiert etc.
82	79
83	80		#### Zeichnen von einem gefüllten Rechteck
84	81
85	82		- Modifizieren Sie am besten das Beispiel [[TComboBox/de\|ComboBox füllen per Code beim Erstellen des Formulars]].
86	83		- Ändern Sie von ComboBox1 im Objektinspektor die Eigenschaft Style auf csOwnerDrawFixed.
87	84		- Erstellen Sie im Objektinspektor den Eventhandler für das Ereignis OnDrawItem, indem Sie auf den Button \[...\] klicken.
88	85		- Folgenden Code fügen Sie dem Eventhandler zu:
89	86
90	87		``` pascal
91	88		procedure TForm1.ComboBox1DrawItem(Control: TWinControl; Index: Integer;
92	89		ARect: TRect; State: TOwnerDrawState);
93	90		var
94	91		ltRect: TRect;
95	92
96	93		procedure FillColorfulRect(aCanvas: TCanvas; myRect: TRect); //Zufallsfarben zeichnen
97	94		var
98	95		y: Integer;
99	96		begin
100	97		for y:=myRect.Top to myRect.Bottom - 1 do begin
101	98		aCanvas.Pen.Color:=Random($1000000);
102	99		aCanvas.Line(myRect.Left, y, myRect.Right, y);
103	100		end;
104	101		end;
105	102
106	103		begin
107	104		ComboBox1.Canvas.FillRect(ARect); //Zuerst Standard - Hintergrund zeichnen
108	105		ComboBox1.Canvas.TextRect(ARect, 22, ARect.Top, ComboBox1.Items[Index]); //Itemtext zeichnen
109	106
110	107		ltRect.Left := ARect.Left + 2; //Kästchen für Farbe zeichnen
111	108		ltRect.Right := ARect.Left + 20;
112	109		ltRect.Top := ARect.Top + 1;
113	110		ltRect.Bottom := ARect.Bottom - 1;
114	111
115	112		ComboBox1.Canvas.Pen.Color:=clBlack;
116	113		ComboBox1.Canvas.Rectangle(ltRect); //Ein Rahmen um die Farbkästchen zeichnen
117	114
118	115		if InflateRect(ltRect, -1, -1) then //Farbkästchen um ein Pixel verkleinern
119	116		if Index = 3 then
120	117		FillColorfulRect(ComboBox1.Canvas, ltRect) //Zufallsfarben zeichnen
121	118		else begin
122	119		case Index of
123	120		0: ComboBox1.Canvas.Brush.Color := clRed;
124	121		1: ComboBox1.Canvas.Brush.Color := clGreen;
125	122		2: ComboBox1.Canvas.Brush.Color := clBlue;
126	123		end;
127	124		ComboBox1.Canvas.FillRect(ltRect); //Farben entsprechend Auswahl zeichnen
128	125		end;
129	126		end;
130	127		```
131	128
132	129		- So könnte Ihr Beispiel dann aussehen:
133	130
134	131		![](/wiki-images/1/1d/ComboBoxBsp1.png) -\> ![](/wiki-images/7/70/ComboBoxBsp2.png)
135	132
136	133		#### Vorangestellte Images
137	134
138	135		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	136
140	137		- Erstellen Sie eine Anwendung analog dem Beispiel [[TComboBox/de\|ComboBox füllen per Code beim Erstellen des Formulars]].
141	138		- Ändern Sie von ComboBox1 im Objektinspektor die Eigenschaft Style auf csOwnerDrawFixed.
142	139		- Fügen Sie eine [[TImageList/de\|TImageList]] von der Komponentenpalette Common Controls auf Ihr Formular hinzu.
143	140		- 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	141		- Fügen Sie nun vier Images der ImageList zu:
145	142		- Doppelklicken Sie ImageList1 oder Linksklicken Sie ImageList1 und wählen Sie ImageList-Editor....
146	143		- 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	144		- haben Sie vier Images zugefügt, bestätigen Sie Ihre Arbeit mit \[OK\].
148	145		- Erstellen Sie im Objektinspektor den Eventhandler für das Ereignis OnDrawItem, indem Sie auf den Button \[...\] klicken.
149	146		- Folgenden Code fügen Sie dem Eventhandler zu:
150	147
151	148		``` pascal
152	149		procedure TForm1.ComboBox1DrawItem(Control: TWinControl; Index: Integer;
153	150		ARect: TRect; State: TOwnerDrawState);
154	151		begin
155	152		ComboBox1.Canvas.FillRect(ARect); //Zuerst Standard - Hintergrund zeichnen
156	153		ComboBox1.Canvas.TextRect(ARect, 20, ARect.Top, ComboBox1.Items[Index]); //Itemtext zeichnen
157	154		ImageList1.Draw(ComboBox1.Canvas, ARect.Left + 1, ARect.Top + 1, Index); //Image entsprechend Index auf Canvas zeichnen
158	155		end;
159	156		```
160	157
161	158		- So könnte Ihr Beispiel dann aussehen:
162	159
163	160		![](/wiki-images/1/1d/ComboBoxBsp1.png) -\> ![](/wiki-images/c/ca/ComboBoxBsp3.png)
164	161
165	162		---
166	163		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