Table of Contents

Buttons and Pickers

Toolbar content can be created from the design-time context menu or from code. Runtime creation is useful when the available commands depend on the current document, user role, or selected object.

Add Buttons and Pickers

Use AddButton, AddSeparator, and the picker helper methods to add the built-in toolbar controls. Keep references to controls that need event handlers or later state updates.

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 button added at runtime

Normal and Large States

The toolbar and its buttons expose State. Use the large state for touch-heavy layouts or mobile-style command surfaces, and provide large bitmap resources when icons need to remain sharp.

Toolbar button rendered in large state

Compact Layouts

For narrow surfaces, enable compact behavior and use the options menu so commands remain reachable when the toolbar no longer has enough width for every control. OnCustomizeCompactToolBar can adjust the generated compact toolbar before users interact with it.

Combining buttons, large state, and compact mode

The following example builds a toolbar with buttons and a separator at runtime, enables the large state for touch layouts, and enables compact mode with an options menu so the toolbar degrades gracefully on narrow surfaces:

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

  // The third argument is the bitmap resource name resolved from BitmapContainer.
  Button := TMSFNCToolBar1.AddButton(-1, -1, 'new', '', 'New');
  Button.BitmapContainer := BitmapContainer1;

  TMSFNCToolBar1.AddSeparator;

  Button := TMSFNCToolBar1.AddButton(-1, -1, 'save', '', 'Save');
  Button.BitmapContainer := BitmapContainer1;

  // Large state for touch-friendly layouts.
  TMSFNCToolBar1.State := esLarge;

  // Compact mode keeps commands reachable on narrow surfaces.
  TMSFNCToolBar1.CanCompact := True;
  TMSFNCToolBar1.Compact := True;
  TMSFNCToolBar1.OnCustomizeCompactToolBar := TMSFNCToolBar1CustomizeCompactToolBar;
end;

procedure TForm1.TMSFNCToolBar1CustomizeCompactToolBar(Sender: TObject;
  ACompactToolBar: TTMSFNCToolBar);
begin
  // Adjust the generated compact toolbar before it is shown.
  ACompactToolBar.AutoSize := True;
end;

See Also