Table of Contents

Toolbar Layout and Responsive Resizing

TTMSFNCRibbonToolBar is the main content area within each ribbon page. It hosts buttons and other controls and automatically compacts itself as the form width decreases.

Adding toolbars

Add a toolbar to a page container at design time (right-click → Add Toolbar) or in code:

tb := TMSFNCRibbon1.PageControl.PageContainers[0].AddToolBar('Clipboard');

Add controls to the toolbar using the Add* methods inherited from TTMSFNCToolBar:

btn := tb.AddButton;
tb.AddSeparator;
tb.AddFontNamePicker;
tb.AddFontSizePicker;
tb.AddColorPicker;
tb.AddBitmapPicker;
tb.AddItemPicker;
A ribbon with one toolbar in full layout

Button layout modes

TTMSFNCRibbonToolBarButton.Layout selects one of four presentation styles:

Value Appearance
bblNone Default — the button adapts to the available space.
bblLarge Tall button with the bitmap stacked above the text label. Uses LargeLayoutBitmaps if available.
bblLabel Compact button with the bitmap to the left of the text.
bblBitmap Bitmap only — no visible text.
Buttons configured with bitmaps for each layout mode
Toolbar with large-layout buttons

Responsive resizing

By default each toolbar has two states: full layout and compact layout. As the form shrinks, the rightmost toolbar collapses to compact first, then the next, and so on.

Three toolbars in full layout
Rightmost toolbar compacted
All toolbars compacted

When a toolbar is in compact mode, clicking it opens a dropdown showing the full layout:

Compact toolbar dropdown with full controls

Intermediate layout steps

When buttons have bblLarge layout, the toolbar can resize through intermediate steps before going compact:

  1. bblLarge → bblLabel → bblBitmap → compact
Toolbar at bblLabel layout step
Toolbar at bblBitmap layout step
Toolbar in compact mode

Constraining layout resizing

Use MinimumLayout and MaximumLayout to lock individual buttons at a specific step:

// Configure button layouts with MinimumLayout/MaximumLayout constraints
procedure TForm1.FormCreate(Sender: TObject);
var
  tb: TTMSFNCRibbonToolBar;
  btn: TTMSFNCRibbonToolBarButton;
  I: Integer;
begin
  for I := 0 to 2 do
  begin
    tb := TMSFNCRibbon1.PageControl.PageContainers[0].AddToolBar('Toolbar ' + IntToStr(I));

    // This button stays large — never shrinks below bblLarge
    btn := tb.AddButton;
    btn.BitmapContainer := TMSFNCBitmapContainer1;
    btn.Layout := bblLarge;
    btn.MinimumLayout := bblLarge;
    btn.Bitmaps.AddBitmapName('Home.png');
    btn.LargeLayoutBitmaps.AddBitmapName('Home_Large.png');
    btn.Text := 'Home';

    // This button starts at label layout and goes no larger
    btn := tb.AddButton;
    btn.BitmapContainer := TMSFNCBitmapContainer1;
    btn.Layout := bblLabel;
    btn.MaximumLayout := bblLabel;
    btn.Bitmaps.AddBitmapName('Notepad.png');
    btn.LargeLayoutBitmaps.AddBitmapName('Notepad_Large.png');
    btn.Text := 'Notepad';
  end;

  // Prevent a specific toolbar from ever going into compact mode
  // tb.CanCompact := False;
end;
Mixed layout constraints — large buttons stay large, label buttons cap at label
Property Description
Layout Current display mode.
MinimumLayout The smallest layout the button will shrink to.
MaximumLayout The largest layout the button will grow to.
CompactLayout Layout used when the toolbar is displayed from its compact dropdown. Default matches MaximumLayout.
CanCompact Set to False on TTMSFNCRibbonToolBar to prevent that toolbar from ever entering compact mode.

Large bitmaps

When Layout = bblLarge, the component switches to LargeLayoutBitmaps if available, falling back to the standard Bitmaps collection otherwise:

btn.BitmapContainer := TMSFNCBitmapContainer1;
btn.Layout := bblLarge;
btn.Bitmaps.AddBitmapName('Cut.png');         // used in label/bitmap/compact
btn.LargeLayoutBitmaps.AddBitmapName('Cut_Large.png'); // used in bblLarge

Combining toolbars, button layout modes, and responsive resizing

Add two toolbars to the first page, mix large and label layout buttons, constrain how far each button shrinks, and prevent one toolbar from ever entering compact mode:

procedure TForm1.FormCreate(Sender: TObject);
var
  tbClip, tbFont: TTMSFNCRibbonToolBar;
  btnCut, btnPaste, btnFont: TTMSFNCRibbonToolBarButton;
begin
  tbClip := TMSFNCRibbon1.PageControl.PageContainers[0].AddToolBar('Clipboard');
  tbFont := TMSFNCRibbon1.PageControl.PageContainers[0].AddToolBar('Font');

  // Clipboard: large paste, compact cut
  btnPaste := tbClip.AddButton;
  btnPaste.Text   := 'Paste';
  btnPaste.Layout := bblLarge;
  btnPaste.MinimumLayout := bblLabel;   // stops shrinking at label, never bitmap-only

  btnCut := tbClip.AddButton;
  btnCut.Text   := 'Cut';
  btnCut.Layout := bblLabel;
  btnCut.MinimumLayout := bblBitmap;

  // Font toolbar never collapses to compact
  tbFont.CanCompact := False;
  btnFont := tbFont.AddButton;
  btnFont.Text   := 'Bold';
  btnFont.Layout := bblLabel;

  // Large bitmaps for the paste button in bblLarge state
  btnPaste.BitmapContainer := TMSFNCBitmapContainer1;
  btnPaste.Bitmaps.AddBitmapName('paste_small');
  btnPaste.LargeLayoutBitmaps.AddBitmapName('paste_large');
end;

Full ribbon: theme, QAT, groups, and shortcut hints together

The combination above wires toolbars and layout. The end-to-end snippet adds theming, the QAT, page-level groups, and shortcut-hint generation so you can see how the ribbon-wide options interact:

// Combined: theme, pages, toolbars with layout constraints,
// QAT, groups, and shortcut hints.
procedure TForm1.FormCreate(Sender: TObject);
var
  tb: TTMSFNCRibbonToolBar;
  btn: TTMSFNCRibbonToolBarButton;
  g: TTMSFNCRibbonGroup;
begin
  // Theme first so all subsequent additions inherit it
  TMSFNCRibbon1.Theme := rbtLightBlue;
  TMSFNCRibbon1.BitmapContainer := TMSFNCBitmapContainer1;

  // QAT below the ribbon to free space for groups
  TMSFNCRibbon1.QATMode := rqmBelowRibbon;
  TMSFNCRibbon1.QAT.AddButton.BitmapContainer := TMSFNCBitmapContainer1;

  // Pages
  TMSFNCRibbon1.PageControl.Pages.Clear;
  TMSFNCRibbon1.PageControl.AddPage('Home');
  TMSFNCRibbon1.PageControl.AddPage('Insert');
  TMSFNCRibbon1.PageControl.AddPage('Format');

  // Page shortcut hints
  TMSFNCRibbon1.PageControl.Pages[0].ShortCutHint := 'H';
  TMSFNCRibbon1.PageControl.Pages[1].ShortCutHint := 'I';
  TMSFNCRibbon1.PageControl.Pages[2].ShortCutHint := 'F';

  // Home toolbar — Clipboard group
  tb := TMSFNCRibbon1.PageControl.PageContainers[0].AddToolBar('Clipboard');
  tb.ShortCutHint := 'C';

  btn := tb.AddButton;
  btn.Layout := bblLarge;
  btn.MinimumLayout := bblLarge;
  btn.Text := 'Paste';
  btn.BitmapContainer := TMSFNCBitmapContainer1;
  btn.LargeLayoutBitmaps.AddBitmapName('Paste_Large.png');
  btn.ShortCutHint := 'V';

  btn := tb.AddButton;
  btn.Layout := bblLabel;
  btn.MaximumLayout := bblLabel;
  btn.Text := 'Cut';
  btn.BitmapContainer := TMSFNCBitmapContainer1;
  btn.Bitmaps.AddBitmapName('Cut.png');
  btn.ShortCutHint := 'X';

  btn := tb.AddButton;
  btn.Layout := bblLabel;
  btn.MaximumLayout := bblLabel;
  btn.Text := 'Copy';
  btn.BitmapContainer := TMSFNCBitmapContainer1;
  btn.Bitmaps.AddBitmapName('Copy.png');
  btn.ShortCutHint := 'C2';

  // Contextual group spanning Insert and Format tabs
  g := TMSFNCRibbon1.Groups.Add;
  g.Text := '<b>Table Tools</b>';
  g.StartPageIndex := 1;
  g.EndPageIndex := 2;
end;

See also