TfrImageComboBox: выпадающий список с изображениями и текстовыми подписями в FastReport VCL

26.10.2026

Наглядный интерфейс экономит время пользователя: если рядом с текстом варианта выводится понятная иконка — флаг страны, логотип платёжной системы, цветовой индикатор статуса — выбор нужного пункта занимает секунды, а не попытки расшифровки сухих строк. Именно для таких сценариев в набор компонентов FastEditors VCL, входящий в состав FastReport VCL Ultimate, добавлен новый элемент управления — TfrImageComboBox.

TfrImageComboBox — это редактор с выпадающим списком, каждый элемент которого сочетает ключевое значение, изображение из TImageList и текстовую подпись. Прямого аналога в стандартной палитре компонентов у него нет. Компонент поддерживает горизонтальное выравнивание изображений и различные варианты смещения текста по горизонтали и вертикали — как в элементах списка, так и в поле редактора.

В этой статье подробно разберём свойства и события компонента, покажем типовые сценарии его применения в пользовательском интерфейсе и приведём пошаговый пример, с которого можно начать работу уже сегодня.

Возможности компонента

Компонент ImageComboBox доступен в IDE на палитре FastEditors VCL и предназначен для выбора изображений с текстовыми подписями из выпадающего списка и последующего отображения их в поле редактора.

Ключевые возможности TfrImageComboBox:

выбор элемента из выпадающего списка с изображением и подписью и отображение выбранного варианта в поле редактора;
коллекция элементов списка, где каждый элемент содержит ключевое значение, индекс изображения из связанного TImageList и подпись к нему;
горизонтальное выравнивание изображений и гибкие варианты смещения текста по горизонтали и вертикали — как в списке, так и в поле редактора;
поиск и фильтрация выпадающего списка по текстовым подписям элементов;
настраиваемый внешний вид отдельно для поля редактора и отдельно для списка;
встроенная поддержка FastGrid: компонент может работать непосредственно в ячейках таблицы.

Рассмотрим основные свойства, отличающие этот компонент от других редакторов набора FastEditors VCL.

Свойства компонента

Свойства, отвечающие за выбор элемента списка

Value — текущее ключевое значение выбранного элемента списка. Вы можете записать сюда значение типа Variant, и если компонент найдёт это значение в коллекции элементов, то автоматически отобразит соответствующую картинку и подпись в поле редактора. Если ImageComboBox используется внутри ячейки компонента FastGrid, то в качестве Value автоматически подставляется значение этой ячейки.

ItemIndex — индекс выбранного элемента выпадающего списка. Если значение Value не соответствует ни одному ключевому значению элементов списка, это свойство равно -1.

Selected — свойство, содержащее выбранный элемент списка типа TfrImageComboBoxItem.

Свойства, отвечающие за поведение выпадающего списка

Properties.AutoDropDown — определяет возможность автоматически показывать выпадающий список, если пользователь начинает набирать текст в поле редактора.

Properties.DropDownCount — максимальное число строк, отображаемых в выпадающем списке. Если это значение равно 0, компонент попытается отобразить столько элементов списка, сколько уместится на экране монитора.

Properties.ShowDropdownWindow — определяет, допускается ли показ выпадающего списка элементов.

Properties.IncrementalFiltering — определяет, включена ли возможность поиска и фильтрации по текстовым подписям элементов списка.

Свойства, отвечающие за отображение по умолчанию

Эти свойства определяют, что компонент покажет, если значение Value не соответствует ни одному из элементов списка:

Properties.DefaultCaption — задаёт текстовую подпись, которую компонент будет показывать по умолчанию в случае, если Value не соответствует никакому из элементов списка.
Properties.DefaultImageIndex — задаёт индекс изображения в связанном компоненте TImageList. Компонент будет показывать это изображение по умолчанию в случае, если Value не соответствует ни одному из элементов списка.

Свойства, отвечающие за внешний вид

Properties.Layout — набор свойств, управляющих выравниванием текста и изображения в поле редактора.

Properties.DropdownItemLayout — набор свойств, управляющих выравниванием текста и изображения в элементах выпадающего списка.

Properties.DropDownWidth — ширина выпадающего списка. Если она равна 0, выпадающий список имеет такую же ширину, как и сам компонент TfrImageComboBox.

Properties.ImageMargin — отступ, регулирующий положение картинки в поле редактора и в выпадающем списке.

Properties.ItemHeight — высота элемента списка. При значении 0 высота вычисляется автоматически. Но если нужно вручную нарисовать элемент списка с использованием события Properties.OnCustomDrawItem, удобно задать для этого свойства отличное от 0 значение.

Свойства, отвечающие за данные

Properties.ItemImages — компонент ImageList, в котором содержатся изображения для коллекции элементов выпадающего списка. Если это свойство равно nil, изображения не будут показываться, но возможность отображать текст сохранится.

Properties.Items — коллекция элементов выпадающего списка. Каждый элемент имеет следующие свойства:

Caption — текстовая подпись или описание картинки;
ImageIndex — индекс изображения из Properties.ItemImages;
Tag — дополнительное резервное свойство типа Integer;
Value — ключевое значение типа Variant, которое записывается в свойство Value компонента при выборе этого элемента списка.

События

Properties.OnDropDown — событие, срабатывающее при появлении списка элементов.

Properties.OnCloseUp — событие, срабатывающее при закрытии списка элементов.

Properties.OnCustomDrawItem — событие для отрисовки элементов списка вручную. Например:

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;

Эти свойства позволяют настроить визуальный стиль отображения и поведение отдельно для поля редактора и для выпадающего списка:

В выпадающем списке можно искать и фильтровать изображения по содержимому соответствующих им подписей: достаточно начать набирать текст в поле редактора, и список покажет только совпадающие элементы.

Где применить компонент: типовые сценарии

TfrImageComboBox особенно полезен там, где выбор из списка выигрывает от визуального образа рядом с текстом. Вот типовые элементы интерфейса пользователя, в которых компонент отлично себя показывает:

Выбор статуса или приоритета — «Новый / В работе / Закрыт», «Низкий / Средний / Высокий» с цветными иконками. Классика для трекеров задач и CRM.
Выбор страны или региона — флаг + название. Удобно в адресных формах, профилях пользователей, настройках доставки.
Выбор валюты — символ или флаг + код (USD, EUR). В финансовых и бухгалтерских проектах.
Выбор типа файла или документа — иконка Word/Excel/PDF + описание. В модулях документооборота и загрузки вложений.
Выбор категории товара или услуги — иконка категории + название. В каталогах, прайс-листах, складском учёте.
Выбор способа оплаты или доставки — логотип платёжной системы или перевозчика + подпись. В оформлении заказа.
Выбор языка или локали — флаг + язык. В настройках приложения.
Выбор роли пользователя — иконка роли или прав + название. В админ-панелях.
Выбор состояния оборудования или датчика — «Норма / Предупреждение / Авария» с цветными индикаторами. В SCADA-системах и мониторинге.
Выбор типа связи или контакта — иконки телефона, email, мессенджера. В карточках клиентов.

Как быстро начать использовать компонент

Подключить TfrImageComboBox к проекту можно за несколько шагов:

Найдите TfrImageComboBox на палитре компонентов FastEditors VCL и поместите его на форму. Если вам необходимо встроить TfrImageComboBox в ячейки FastGrid, вместо этого выберите тип «ImageComboBox» в выпадающем списке Properties нужной колонки.
Поместите на форму стандартный компонент TImageList.
Заполните TImageList изображениями.
Назначьте свойству TfrImageComboBox.Properties.ItemImages компонент TImageList с помощью выпадающего списка в Инспекторе объектов.
Заполните коллекцию TfrImageComboBox.Properties.Items с помощью диалога редактирования свойства или в коде. Например:

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;

И это всё — компонент готов к использованию.

Заключение

TfrImageComboBox превращает обычный выбор из списка в наглядный и удобный элемент интерфейса. Изображения рядом с подписями выглядят выигрышнее, чем строки стандартного TComboBox, а фильтрация выпадающего списка по тексту делает поиск нужного варианта быстрым и естественным.

Добавьте к этому гибкую настройку внешнего вида поля редактора и списка, события для отрисовки элементов вручную и встроенную поддержку FastGrid — и вы получите полноценный инструмент для современных интерфейсов деловых приложений: CRM, трекеров задач, каталогов и систем мониторинга.

Если вашему проекту нужен аккуратный и современный выбор опций с иконками и подписями — попробуйте TfrImageComboBox из набора FastEditors VCL. Для начала работы достаточно поместить компонент на форму, подключить TImageList и заполнить коллекцию Items, как показано в примере выше.

VCL FastReport Delphi Дизайнер FastGrid

26 октября 2026