TfrImageComboBox: Eine Dropdown-Liste mit Bildern und Textbeschriftungen in FastReport VCL

2026-10-26

Eine übersichtliche Benutzeroberfläche spart dem Anwender Zeit: Wenn neben dem Text einer Option ein verständliches Symbol erscheint — die Flagge eines Landes, das Logo eines Zahlungsdienstleisters, ein farbiger Statusindikator —, dauert die Auswahl des richtigen Punkts Sekunden statt mühsamem Entschlüsseln nüchterner Zeilen. Genau für solche Szenarien wurde in die Komponentensammlung FastEditors VCL, die Bestandteil von FastReport VCL Ultimate, hinzugefügt: das neue Steuerelement — TfrImageComboBox.

TfrImageComboBox — ist ein Editor mit einer Dropdown-Liste, dessen jeder Eintrag einen Schlüsselwert, ein Bild aus TImageList und eine Textbeschriftung kombiniert. Ein direktes Gegenstück in der Standardkomponentenpalette gibt es nicht. Die Komponente unterstützt die horizontale Ausrichtung der Bilder sowie verschiedene Varianten der Verschiebung des Textes in horizontaler und vertikaler Richtung — sowohl in den Listeneinträgen als auch im Editorfeld.

In diesem Artikel gehen wir ausführlich auf die Eigenschaften und Ereignisse der Komponente ein, zeigen typische Anwendungsszenarien in der Benutzeroberfläche und geben ein Schritt-für-Schritt-Beispiel, mit dem Sie noch heute loslegen können.

Funktionen der Komponente

Die Komponente ImageComboBox ist in der IDE auf der Palette von FastEditors VCL verfügbar und dient zur Auswahl von Bildern mit Textbeschriftungen aus einer Dropdown-Liste sowie zur anschließenden Anzeige im Editorfeld.

Die wichtigsten Funktionen von TfrImageComboBox:

Auswahl eines Eintrags aus der Dropdown-Liste mit Bild und Beschriftung sowie Anzeige der gewählten Variante im Editorfeld;
eine Sammlung von Listeneinträgen, wobei jeder Eintrag einen Schlüsselwert, den Bildindex aus der verknüpften TImageList und die zugehörige Beschriftung enthält;
horizontale Ausrichtung der Bilder und flexible Varianten der Verschiebung des Textes in horizontaler und vertikaler Richtung — sowohl in der Liste als auch im Editorfeld;
Suche und Filterung der Dropdown-Liste nach den Textbeschriftungen der Einträge;
getrennt anpassbares Erscheinungsbild für das Editorfeld und für die Liste;
integrierte Unterstützung von FastGrid: die Komponente kann direkt in Tabellenzellen arbeiten.

Betrachten wir die wichtigsten Eigenschaften, die diese Komponente von den anderen Editoren der FastEditors-VCL-Sammlung unterscheiden.

Eigenschaften der Komponente

Eigenschaften für die Auswahl eines Listeneintrags

Value — der aktuelle Schlüsselwert des ausgewählten Listeneintrags. Sie können hier einen Wert vom Typ Variant speichern; wenn die Komponente diesen Wert in der Eintragsammlung findet, zeigt sie automatisch das entsprechende Bild und die Beschriftung im Editorfeld an. Wird der ImageComboBox innerhalb einer Zelle der FastGrid-Komponente verwendet, wird als Value automatisch der Wert dieser Zelle eingesetzt.

ItemIndex — der Index des ausgewählten Eintrags der Dropdown-Liste. Entspricht der Wert Value keinem der Schlüsselwerte der Listeneinträge, ist diese Eigenschaft gleich -1.

Selected — die Eigenschaft, die den ausgewählten Listeneintrag vom Typ TfrImageComboBoxItem enthält.

Eigenschaften für das Verhalten der Dropdown-Liste

Properties.AutoDropDown — bestimmt, ob die Dropdown-Liste automatisch angezeigt werden kann, wenn der Benutzer beginnt, Text im Editorfeld einzugeben.

Properties.DropDownCount — die maximale Anzahl der Zeilen, die in der Dropdown-Liste angezeigt werden. Ist dieser Wert gleich 0, versucht die Komponente, so viele Listeneinträge anzuzeigen, wie auf den Bildschirmmonitor passen.

Properties.ShowDropdownWindow — bestimmt, ob die Anzeige der Dropdown-Liste der Einträge zulässig ist.

Properties.IncrementalFiltering — bestimmt, ob die Funktion der Suche und Filterung nach den Textbeschriftungen der Listeneinträge aktiviert ist.

Eigenschaften für die Standardanzeige

Diese Eigenschaften bestimmen, was die Komponente anzeigt, wenn der Wert Value keinem der Listeneinträge entspricht:

Properties.DefaultCaption — legt die Textbeschriftung fest, die die Komponente standardmäßig anzeigt, wenn Value keinem der Listeneinträge entspricht.
Properties.DefaultImageIndex — legt den Bildindex in der verknüpften Komponente TImageList fest. Die Komponente zeigt dieses Bild standardmäßig an, wenn Value keinem der Listeneinträge entspricht.

Eigenschaften für das Erscheinungsbild

Properties.Layout — ein Satz von Eigenschaften, der die Ausrichtung von Text und Bild im Editorfeld steuert.

Properties.DropdownItemLayout — ein Satz von Eigenschaften, der die Ausrichtung von Text und Bild in den Einträgen der Dropdown-Liste steuert.

Properties.DropDownWidth — die Breite der Dropdown-Liste. Ist sie gleich 0, hat die Dropdown-Liste dieselbe Breite wie die Komponente TfrImageComboBox selbst.

Properties.ImageMargin — der Abstand, der die Position des Bildes im Editorfeld und in der Dropdown-Liste steuert.

Properties.ItemHeight — die Höhe eines Listeneintrags. Bei einem Wert von 0 wird die Höhe automatisch berechnet. Wenn ein Listeneintrag jedoch manuell unter Verwendung des Ereignisses Properties.OnCustomDrawItem gezeichnet werden soll, ist es zweckmäßig, für diese Eigenschaft einen von 0 verschiedenen Wert festzulegen.

Eigenschaften für die Daten

Properties.ItemImages — die ImageList-Komponente, die die Bilder für die Sammlung der Einträge der Dropdown-Liste enthält. Ist diese Eigenschaft gleich nil, werden keine Bilder angezeigt, aber die Möglichkeit, Text anzuzeigen, bleibt erhalten.

Properties.Items — die Sammlung der Einträge der Dropdown-Liste. Jeder Eintrag hat die folgenden Eigenschaften:

Caption — die Textbeschriftung oder Beschreibung des Bildes;
ImageIndex — der Bildindex aus Properties.ItemImages;
Tag — eine zusätzliche Reservierungseigenschaft vom Typ Integer;
Value — der Schlüsselwert vom Typ Variant, der bei der Auswahl dieses Listeneintrags in die Eigenschaft Value der Komponente geschrieben wird.

Ereignisse

Properties.OnDropDown — das Ereignis, das beim Erscheinen der Eintragsliste ausgelöst wird.

Properties.OnCloseUp — das Ereignis, das beim Schließen der Eintragsliste ausgelöst wird.

Properties.OnCustomDrawItem — das Ereignis für das manuelle Zeichnen der Listeneinträge. Zum Beispiel:

procedure TForm1.frImageComboBox2PropertiesCustomDrawItem(Sender:
  TfrImageComboBoxCustomProperties; ACanvas: TfrCustomCanvas;
  AItemViewInfo: TfrImageComboBoxItemViewInfo; var DefaultDraw: Boolean);
var
  LText: string;
  LTextRect: TRect;
begin
  DefaultDraw := False;
  LText := 'Item ' + Sender.Items[AItemViewInfo.SourceItemIndex].Caption;
  LTextRect := AItemViewInfo.ItemRect;
  ACanvas.FillRect(LTextRect, clWhite);
  ACanvas.DrawFocusRect(LTextRect);
  ACanvas.DrawText(LTextRect, LText);
end;

Diese Eigenschaften ermöglichen es, den visuellen Anzeigestil und das Verhalten getrennt für das Editorfeld und für die Dropdown-Liste anzupassen:

In der Dropdown-Liste lassen sich Bilder anhand des Inhalts der zugehörigen Beschriftungen suchen und filtern: Beginnen Sie einfach, Text im Editorfeld einzugeben, und die Liste zeigt nur die übereinstimmenden Einträge an.

Wo die Komponente eingesetzt werden kann: typische Szenarien

TfrImageComboBox ist besonders dort nützlich, wo die Auswahl aus einer Liste von einem visuellen Bild neben dem Text profitiert. Hier sind typische Elemente der Benutzeroberfläche, in denen die Komponente glänzt:

Auswahl des Status oder der Priorität — «Neu / In Bearbeitung / Geschlossen», «Niedrig / Mittel / Hoch» mit farbigen Symbolen. Klassiker für Aufgabenverfolgung und CRM.
Auswahl des Landes oder der Region — Flagge + Name. Praktisch in Adressformularen, Benutzerprofilen und Liefereinstellungen.
Auswahl der Währung — Symbol oder Flagge + Code (USD, EUR). In Finanz- und Buchhaltungsprojekten.
Auswahl des Datei- oder Dokumenttyps — Word/Excel/PDF-Symbol + Beschreibung. In Dokumentenmanagement- und Anhangs-Upload-Modulen.
Auswahl der Produkt- oder Dienstleistungskategorie — Kategoriesymbol + Name. In Katalogen, Preislisten und Lagerverwaltung.
Auswahl der Zahlungs- oder Lieferart — Logo des Zahlungsdienstleisters oder Spediteurs + Beschriftung. Bei der Bestellung.
Auswahl der Sprache oder des Gebietsschemas — Flagge + Sprache. In den Anwendungseinstellungen.
Auswahl der Benutzerrolle — Symbol der Rolle oder der Rechte + Name. In Admin-Panels.
Auswahl des Zustands von Ausrüstung oder Sensor — «Normal / Warnung / Störung» mit farbigen Indikatoren. In SCADA-Systemen und im Monitoring.
Auswahl der Kommunikations- oder Kontaktart — Symbole für Telefon, E-Mail und Messenger. In Kundenkarten.

So schnell kommen Sie mit der Komponente los

TfrImageComboBox lässt sich in wenigen Schritten in ein Projekt einbinden:

Suchen Sie TfrImageComboBox auf der Komponentenpalette von FastEditors VCL und platzieren Sie es auf dem Formular. Wenn Sie TfrImageComboBox in Zellen von FastGrid einbetten müssen, wählen Sie stattdessen den Typ «ImageComboBox» in der Dropdown-Liste Properties der gewünschten Spalte.
Platzieren Sie die Standardkomponente TImageList auf dem Formular.
Füllen Sie die TImageList mit Bildern.
Weisen Sie der Eigenschaft TfrImageComboBox.Properties.ItemImages die Komponente TImageList über die Dropdown-Liste im Objektinspektor zu.
Füllen Sie die Sammlung TfrImageComboBox.Properties.Items über den Dialog zur Bearbeitung der Eigenschaft oder im Code. Zum Beispiel:

procedure TForm1.FormCreate(Sender: TObject);
var
  I: Integer;
  LItem: TfrImageComboBoxItem;
begin
  frImageComboBox1.BeginUpdate;
  try
    for I := 0 to 9 do
    begin
      LItem := frImageComboBox1.Properties.Items.Add;
      LItem.Caption := 'Item ' + IntToStr(I);
      LItem.ImageIndex := I;
      LItem.Value := I;
    end;
  finally
    frImageComboBox1.EndUpdate;
  end;
end;

Und das war alles — die Komponente ist einsatzbereit.

Fazit

TfrImageComboBox verwandelt die gewöhnliche Listenauswahl in ein übersichtliches und bequemes Element der Benutzeroberfläche. Bilder neben den Beschriftungen sehen vorteilhafter aus als die Zeilen eines Standard-TComboBox, und die Textfilterung der Dropdown-Liste macht die Suche nach der passenden Variante schnell und natürlich.

Fügen Sie dazu noch die flexible Anpassung des Erscheinungsbilds von Editorfeld und Liste, die Ereignisse für das manuelle Zeichnen der Einträge und die integrierte FastGrid-Unterstützung hinzu — und Sie erhalten ein vollwertiges Werkzeug für moderne Oberflächen von Geschäftsanwendungen: CRM, Aufgabenverfolgung, Kataloge und Überwachungssysteme.

Wenn Ihr Projekt eine saubere und moderne Optionsauswahl mit Symbolen und Beschriftungen benötigt — probieren Sie TfrImageComboBox aus der Sammlung FastEditors VCL aus. Für den Einstieg genügt es, die Komponente auf das Formular zu platzieren, die TImageList anzubinden und die Sammlung Items wie im obigen Beispiel zu füllen.

VCL FastReport Designer Delphi FastGrid

26. Oktober 2026