Table of Contents

Buttons and Pickers

Buttons and pickers are the toolbar's content. A button runs a command; a separator groups related buttons visually; a picker is a button that opens a dropdown to choose a value — a font, a size, a color, a bitmap, or an item from your own list. You can add all of them from the design-time context menu, but building them in code is the better choice when the available commands depend on the current document, the user's role, or the selected object.

This chapter covers every built-in element and the typed event each picker raises. Visual styling (fills, the large state, per-button layout, bitmaps) is covered in Appearance and states; on-demand dropdown content and hosting your own controls is covered in Dropdowns and custom controls.

Add buttons and separators

AddButton returns the created TTMSFNCToolBarButton; keep the reference to wire its OnClick or update it later. Its first two arguments are the width and height (-1 lets the toolbar size the button), the next two name normal and large-state bitmaps in a BitmapContainer, and the fifth is the caption. AddSeparator inserts a divider. Every Add… method takes an optional zero-based index; the default -1 appends.

procedure TForm1.ConfigureToolbar;
var
  Button: TTMSFNCToolBarButton;
begin
  TMSFNCToolBar1.AutoAlign := True;
  TMSFNCToolBar1.AutoSize := True;

  Button := TMSFNCToolBar1.AddButton(96, 32, '', '', 'Refresh');
  Button.OnClick := RefreshButtonClick;

  TMSFNCToolBar1.AddSeparator;
  TMSFNCToolBar1.AddFontSizePicker;
  TMSFNCToolBar1.AddColorPicker;
end;

procedure TForm1.RefreshButtonClick(Sender: TObject);
begin
  ShowMessage('Refresh the current view.');
end;
Toolbar with a Refresh button, a separator, and a font-size and color picker Toolbar with a Refresh button, a separator, and a font-size and color picker

After adding or removing elements at runtime, call Build so the toolbar re-arranges once. Button captions accept HTML, so <b>B</b> renders a bold glyph without a bitmap.

The five built-in pickers

Each picker is a specialized button with a dropdown and a typed selection event, so you receive the chosen value directly instead of reading the control back:

Picker Add method Selection event Value
Font name AddFontNamePicker OnFontNameSelected AFontName: string
Font size AddFontSizePicker OnFontSizeSelected AFontSize: Single
Color AddColorPicker OnColorSelected AColor: TTMSFNCGraphicsColor
Bitmap AddBitmapPicker OnBitmapSelected ABitmap: TTMSFNCBitmap
Item (generic) AddItemPicker OnItemSelected AItemIndex: Integer

The font-name, font-size, and item pickers expose Editable: set it to True to let the user type a value instead of only picking from the list. The generic item picker holds its choices in an Items: TStringList you populate yourself — use it for anything from zoom levels to line styles.

procedure TForm1.AddPickers;
var
  fontName: TTMSFNCToolBarFontNamePicker;
  fontSize: TTMSFNCToolBarFontSizePicker;
  textColor: TTMSFNCToolBarColorPicker;
  bullet: TTMSFNCToolBarBitmapPicker;
  zoom: TTMSFNCToolBarItemPicker;
begin
  // Font name picker: a dropdown of installed font families.
  // Editable lets the user type a family name instead of only picking one.
  fontName := TMSFNCToolBar1.AddFontNamePicker;
  fontName.Editable := True;
  fontName.OnFontNameSelected := FontNamePicked;

  // Font size picker: a dropdown of point sizes. SelectedFontSize is a Single.
  fontSize := TMSFNCToolBar1.AddFontSizePicker;
  fontSize.SelectedFontSize := 11;
  fontSize.OnFontSizeSelected := FontSizePicked;

  // Color picker: opens a color selector; SelectedColor is a TTMSFNCGraphicsColor.
  textColor := TMSFNCToolBar1.AddColorPicker;
  textColor.SelectedColor := gcBlack;
  textColor.OnColorSelected := ColorPicked;

  // Bitmap picker: opens a grid of bitmaps and returns the chosen one.
  bullet := TMSFNCToolBar1.AddBitmapPicker;
  bullet.OnBitmapSelected := BitmapPicked;

  // Generic item picker: your own dropdown list (here, zoom levels).
  zoom := TMSFNCToolBar1.AddItemPicker;
  zoom.Items.Add('50%');
  zoom.Items.Add('100%');
  zoom.Items.Add('150%');
  zoom.SelectedItemIndex := 1;
  zoom.OnItemSelected := ZoomPicked;

  TMSFNCToolBar1.Build;
end;

procedure TForm1.FontNamePicked(Sender: TObject; AFontName: string);
begin
  Memo1.TextSettings.Font.Family := AFontName;
end;

procedure TForm1.FontSizePicked(Sender: TObject; AFontSize: Single);
begin
  Memo1.TextSettings.Font.Size := AFontSize;
end;

procedure TForm1.ColorPicked(Sender: TObject; AColor: TTMSFNCGraphicsColor);
begin
  Memo1.TextSettings.FontColor := AColor;
end;

procedure TForm1.BitmapPicked(Sender: TObject; ABitmap: TTMSFNCBitmap);
begin
  { Apply the chosen bitmap, e.g. insert it as a bullet glyph in your document. }
end;

procedure TForm1.ZoomPicked(Sender: TObject; AItemIndex: Integer);
begin
  { AItemIndex is the selected row in the picker's Items list (0 = 50%, 1 = 100%). }
end;
Toolbar showing font-name, font-size, color, bitmap, and item pickers Toolbar showing font-name, font-size, color, bitmap, and item pickers

Combining buttons and pickers into a formatting bar

A real formatting bar mixes command buttons with pickers that all act on the same target. The example below adds HTML-captioned bold and italic buttons, a separator, and the font-name, font-size, and color pickers — every element driving the same memo's text settings:

procedure TForm1.BuildFormattingBar;
var
  btnBold, btnItalic: TTMSFNCToolBarButton;
  fontName: TTMSFNCToolBarFontNamePicker;
  fontSize: TTMSFNCToolBarFontSizePicker;
  textColor: TTMSFNCToolBarColorPicker;
begin
  TMSFNCToolBar1.BeginUpdate;
  try
    // Button captions accept HTML, so a bold/italic glyph needs no bitmap.
    btnBold := TMSFNCToolBar1.AddButton(32, 32, '', '', '<b>B</b>');
    btnBold.OnClick := ToggleBold;
    btnItalic := TMSFNCToolBar1.AddButton(32, 32, '', '', '<i>I</i>');
    btnItalic.OnClick := ToggleItalic;

    TMSFNCToolBar1.AddSeparator;

    // Pickers share the same target: the memo's current text settings.
    fontName := TMSFNCToolBar1.AddFontNamePicker;
    fontName.SelectedFontName := 'Segoe UI';
    fontName.OnFontNameSelected := ApplyFontName;

    fontSize := TMSFNCToolBar1.AddFontSizePicker;
    fontSize.SelectedFontSize := 11;
    fontSize.OnFontSizeSelected := ApplyFontSize;

    textColor := TMSFNCToolBar1.AddColorPicker;
    textColor.OnColorSelected := ApplyColor;
  finally
    TMSFNCToolBar1.EndUpdate;
  end;
  TMSFNCToolBar1.Build;
end;

procedure TForm1.ToggleBold(Sender: TObject);
begin
  Memo1.TextSettings.Font.Style := Memo1.TextSettings.Font.Style + [TFontStyle.fsBold];
end;

procedure TForm1.ToggleItalic(Sender: TObject);
begin
  Memo1.TextSettings.Font.Style := Memo1.TextSettings.Font.Style + [TFontStyle.fsItalic];
end;

procedure TForm1.ApplyFontName(Sender: TObject; AFontName: string);
begin
  Memo1.TextSettings.Font.Family := AFontName;
end;

procedure TForm1.ApplyFontSize(Sender: TObject; AFontSize: Single);
begin
  Memo1.TextSettings.Font.Size := AFontSize;
end;

procedure TForm1.ApplyColor(Sender: TObject; AColor: TTMSFNCGraphicsColor);
begin
  Memo1.TextSettings.FontColor := AColor;
end;
Formatting bar with bold and italic buttons, a separator, and font-name, font-size, and color pickers Formatting bar with bold and italic buttons, a separator, and font-name, font-size, and color pickers

Common mistakes

  • Forgetting Build after runtime changes. Adding elements without a final Build (or without a BeginUpdate/EndUpdate pair) can leave the toolbar laid out for its previous content. Batch the Add… calls, then Build once.
  • Reading the control back instead of using the event value. The picker events already hand you the selected font, size, color, bitmap, or index — use the argument rather than querying SelectedFontName/SelectedColor afterward.
  • Expecting AddButton bitmap arguments to be file names. The third and fourth arguments are bitmap names resolved through the button's BitmapContainer; set BitmapContainer first (see Appearance and states).

See Also