TComboBox

│ Deutsch (de) │ English (en) │ español (es) │ suomi (fi) │ français (fr) │ 日本語 (ja) │

>> LCL Components >> TComboBox

This page explains how to use the TComboBox component. When I mention to click on something, unless I explicitly say to right-click, you always left-click on the item in question.

Description

A combination of an edit box and a (drop-down) list allowing one of several options to be chosen.

Usage

To use a TComboBox on a form, you can simply select it on the Standard component pallet and place it by clicking on the form.

In the ComboBox, the stored strings are stored in the property Items, that is of type TStrings. Thus you can assign or remove strings in the ComboBox, as in a TStringList or its parent TStrings.

Here are a few examples to use a combobox ComboBox1 on a form Form1:

Fill ComboBox

by the Object Inspector

• Select the ComboBox on your form with one click.
• Go in the Object Inspector in the Properties tab on the property Items.
• Click on the button with the three dots. The String Editor opens.
• Enter your text and confirm your work with OK.

by code when you create the form

• Create the OnCreate event handler for the form, by clicking on your form, use the Object Inspector, the tab events, select the OnCreate event and click the button [...] or double click the button in the form.
• In the source editor, you now insert the desired selection texts, for our example, you write as follows:

procedure TForm1.FormCreate(Sender: TObject);  
begin
  ComboBox1.Items.Clear;             //Delete all existing choices
  ComboBox1.Items.Add('Red');        //Add an choice
  ComboBox1.Items.Add('Green');
  ComboBox1.Items.Add('Blue');
  ComboBox1.Items.Add('Random Color');  
end;

Make that something happens after the selection

Like all components, even the TComboBox provides various events, that are called when the user use the combobox. To respond to a change of the selection in the ComboBox, you can use the OnChange event:

• Doubleclick the ComboBox on the form or choose the OnChange event in the Object Inspector and click on the button [...].
• The event handler is created, now you can insert your desired source, in our example we want to change the background color of the form:

procedure TForm1.ComboBox1Change(Sender: TObject);
begin
  case ComboBox1.ItemIndex of  //what entry (which item) has currently been chosen
    0: Color:=clRed;
    1: Color:=clGreen;
    2: Color:=clBlue;
    3: Color:=Random($1000000);
  end;
end;

• Start your application, the selection changes the background color of the form.

Own drawed ComboBox

In general, it is advantageous to let the ComboBox represent in theme by the setting of the user. In some cases (for example, to program a game with a colorful surface), you can deviate from this standard and draw the according to your own choice. How this works, you can try now:

  Note: Parameters of ComboBoxDrawItem:

Control:
If multiple controls (E.g. multiple ComboBoxes) access this event handle, you know which threw this event. You could in our example, instead of ComboBox1.Canvas.FillRect(ARect) also TComboBox(Control).Canvas.FillRect(ARect) write, where you should query still possible before, whether it is a TComboBox:

  if Control is TComboBox then
    TComboBox(Control).Canvas.FillRect(ARect);

Index: Specifies the item location, so you have access to the string <ComboBox>.Items[Index].
ARect: Describes the rectangle, which is necessary for drawing the background.
State: Status of the items, whether normal, focused, selected etc.

Draw a filled rectangle

in progress --Michl 22:14, 2 June 2014 (CEST)

• Modifizieren Sie am besten das Beispiel ComboBox füllen per Code beim Erstellen des Formulars.
• Ändern Sie von ComboBox1 im Objektinspektor die Eigenschaft Style auf csOwnerDrawFixed.
• Erstellen Sie im Objektinspektor den Eventhandler für das Ereignis OnDrawItem, indem Sie auf den Button [...] klicken.
• Folgenden Code fügen Sie dem Eventhandler zu:

procedure TForm1.ComboBox1DrawItem(Control: TWinControl; Index: Integer;
  ARect: TRect; State: TOwnerDrawState);
var
  ltRect: TRect;

  procedure FillColorfulRect(aCanvas: TCanvas; myRect: TRect);              //Zufallsfarben zeichnen
  var
    y: Integer;
  begin
    for y:=myRect.Top to myRect.Bottom - 1 do begin
      aCanvas.Pen.Color:=Random($1000000);
      aCanvas.Line(myRect.Left, y, myRect.Right, y);
    end;
  end;

begin
  ComboBox1.Canvas.FillRect(ARect);                                         //Zuerst Standard - Hintergrund zeichnen
  ComboBox1.Canvas.TextRect(ARect, 22, ARect.Top, ComboBox1.Items[Index]);  //Itemtext zeichnen

  ltRect.Left   := ARect.Left   + 2;                                        //Kästchen für Farbe zeichnen
  ltRect.Right  := ARect.Left   + 20;
  ltRect.Top    := ARect.Top    + 1;
  ltRect.Bottom := ARect.Bottom - 1;

  ComboBox1.Canvas.Pen.Color:=clBlack;
  ComboBox1.Canvas.Rectangle(ltRect);                                       //Ein Rahmen um die Farbkästchen zeichnen

  if InflateRect(ltRect, -1, -1) then                                       //Farbkästchen um ein Pixel verkleinern
    if Index = 3 then
      FillColorfulRect(ComboBox1.Canvas, ltRect)                            //Zufallsfarben zeichnen
    else begin
      case Index of
        0: ComboBox1.Canvas.Brush.Color := clRed;
        1: ComboBox1.Canvas.Brush.Color := clGreen;
        2: ComboBox1.Canvas.Brush.Color := clBlue;
      end;
      ComboBox1.Canvas.FillRect(ltRect);                                    //Farben entsprechend Auswahl zeichnen
    end;
end;

• So könnte Ihr Beispiel dann aussehen:

->

Vorangestellte Images

In diesem Beispiel werden wir ein paar Images in eine 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.

• Erstellen Sie eine Anwendung analog dem Beispiel ComboBox füllen per Code beim Erstellen des Formulars.
• Ändern Sie von ComboBox1 im Objektinspektor die Eigenschaft Style auf csOwnerDrawFixed.
• Fügen Sie eine TImageList von der Komponentenpalette Common Controls auf Ihr Formular hinzu.
• 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.
• Fügen Sie nun vier Images der ImageList zu:
  • Doppelklicken Sie ImageList1 oder Linksklicken Sie ImageList1 und wählen Sie ImageList-Editor....
  • 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).
  • haben Sie vier Images zugefügt, bestätigen Sie Ihre Arbeit mit [OK].
• Erstellen Sie im Objektinspektor den Eventhandler für das Ereignis OnDrawItem, indem Sie auf den Button [...] klicken.
• Folgenden Code fügen Sie dem Eventhandler zu:

procedure TForm1.ComboBox1DrawItem(Control: TWinControl; Index: Integer;
  ARect: TRect; State: TOwnerDrawState);
begin
  ComboBox1.Canvas.FillRect(ARect);                                         //Zuerst Standard - Hintergrund zeichnen
  ComboBox1.Canvas.TextRect(ARect, 20, ARect.Top, ComboBox1.Items[Index]);  //Itemtext zeichnen
  ImageList1.Draw(ComboBox1.Canvas, ARect.Left + 1, ARect.Top + 1, Index);  //Image entsprechend Index auf Canvas zeichnen
end;

• So könnte Ihr Beispiel dann aussehen:

->

---

Return To: LCL Components

— Previous: TListBox

Next: TScrollBar

--Michl 22:14, 2 June 2014 (CEST)