Table of Contents

Dropdowns and Custom Controls

A toolbar is rarely just buttons. Real command surfaces mix in compact editors, filters, color pickers, and command palettes that should stay next to the commands they affect. TTMSFNCToolBar supports this in two ways: it can host an arbitrary control inline through AddCustomControlClass, and any toolbar button can open dropdown content through its DropDownControl and DropDownKind properties. Use a hosted control when an editor should live permanently on the toolbar (a search box, a zoom spin edit); use a button dropdown when the editor should appear on demand and collapse away again (a color selector, a filter panel). This guide covers both, then shows them working together on one toolbar.

Host a Custom Control

Use AddCustomControlClass when the toolbar should create and own the embedded control. You pass the control class; the toolbar instantiates it, inserts it into the layout, and returns the instance so you can configure it. Because the toolbar owns the control, it participates in toolbar layout and alignment like any built-in element.

procedure TForm1.AddSearchEditToToolbar;
var
  Edit: TEdit;
begin
  Edit := TMSFNCToolBar1.AddCustomControlClass(TEdit) as TEdit;
  Edit.Width := 180;
  Edit.Text := 'Search';
end;

Button Dropdowns

Use DropDownControl when a button should open a dedicated editor or selector. Assign the control that should appear in the popup, size it with DropDownWidth and DropDownHeight, and set DropDownKind to choose how the button behaves: ddkNormal opens the popup from anywhere on the button, ddkDropDown adds a separate arrow while the main area still fires OnClick, and ddkDropDownButton splits the button into a main action and a distinct drop-down button.

procedure TForm1.ConfigureToolbarDropdown;
var
  Button: TTMSFNCToolBarButton;
begin
  Button := TMSFNCToolBar1.AddButton(120, 32, '', '', 'Color');
  Button.DropDownKind := ddkDropDownButton;
  Button.DropDownControl := TMSFNCColorPicker1;
  Button.DropDownWidth := 220;
  Button.DropDownHeight := 260;
end;
Toolbar context menu for adding controls

Combining a hosted control with a dropdown button

A single toolbar can carry both an always-present editor and an on-demand dropdown. The example below hosts a search edit through AddCustomControlClass, adds a separator, then adds a button that opens a color picker as dropdown content:

procedure TForm1.ConfigureToolbar;
var
  SearchEdit: TEdit;
  Button: TTMSFNCToolBarButton;
begin
  // Toolbar-owned custom control: created and inserted by the toolbar.
  SearchEdit := TMSFNCToolBar1.AddCustomControlClass(TEdit) as TEdit;
  SearchEdit.Width := 180;
  SearchEdit.Text := 'Search';

  TMSFNCToolBar1.AddSeparator;

  // Button that opens an existing color picker as dropdown content.
  Button := TMSFNCToolBar1.AddButton(120, 32, '', '', 'Color');
  Button.DropDownKind := ddkDropDownButton;
  Button.DropDownControl := TMSFNCColorPicker1;
  Button.DropDownWidth := 220;
  Button.DropDownHeight := 260;
end;

Common pitfalls

  • Expecting an AddCustomControl overload for existing controls. The toolbar hosts controls it creates and owns via AddCustomControlClass(AControlClass); pass the class, then configure the returned instance — do not try to insert a pre-existing control instance.
  • A dropdown that never opens. DropDownControl must be assigned and DropDownKind left at a value that exposes a trigger; with the control unset, the button behaves like a normal button.
  • Unsized dropdown content. Set DropDownWidth/DropDownHeight; a dropdown control with no explicit size can render too small to use.

See Also