TStyledToolbar - Technical Reference

Overview

TStyledToolbar is a styled toolbar control that uses TStyledToolButton components. It provides full customization of button styles and precise control over button dimensions.

Class Hierarchy

TWinControl
  └─ TFlowPanel
      └─ TStyledToolbar

Unit

Vcl.StyledToolbar

Description

TStyledToolbar extends TFlowPanel to create a toolbar container for TStyledToolButton components. Unlike the standard VCL TToolBar, button dimensions are controlled by ButtonWidth and ButtonHeight properties rather than being automatically sized based on caption length.

All buttons in the toolbar can share the same style (Family, Class, Appearance) or each button can have its own custom style.

Key Features

• Flow layout: Buttons flow horizontally or vertically
• Fixed button size: ButtonWidth and ButtonHeight control all buttons
• Uniform styling: Apply same style to all buttons
• Per-button customization: Individual buttons can override toolbar style
• Separators and dividers: Visual separation between button groups
• ShowCaptions: Toggle visibility of all button captions
• Wrapable: Buttons wrap to next line when toolbar is too narrow
• Style families: Classic, Bootstrap, Angular, Basic-Color, SVG-Color support

Main Properties

Toolbar Layout

Property	Type	Description
ButtonWidth	Integer	Width of all toolbar buttons (default: 23)
ButtonHeight	Integer	Height of all toolbar buttons (default: 22)
ShowCaptions	Boolean	Show/hide captions on all buttons (default: False)
Wrapable	Boolean	Allow buttons to wrap to next row (default: True)
Indent	Integer	Left indent for first button (default: 1)
AutoSize	Boolean	Auto-size toolbar based on content

Styling Properties

Property	Type	Description
StyleFamily	TStyledButtonFamily	Default style family for all buttons
StyleClass	TStyledButtonClass	Default style class for all buttons
StyleAppearance	TStyledButtonAppearance	Default appearance for all buttons
StyleDrawType	TStyledButtonDrawType	Default button shape (btRect, btRoundRect, btRounded, btEllipse)
StyleRadius	Integer	Default corner radius for buttons
StyleRoundedCorners	TRoundedCorners	Which corners to round

Button Management

Property	Type	Description
ButtonCount	Integer	Number of buttons in toolbar (read-only)
Buttons[Index]	TStyledToolButton	Access to individual buttons (read-only)

Backward Compatibility

Property	Type	Description
Flat	Boolean	Flat appearance for all buttons
Images	TCustomImageList	ImageList shared by all buttons
DisabledImages	TCustomImageList	Disabled images for all buttons

Main Methods

RegisterDefaultRenderingStyle (Class Method)

Sets the default rendering style for all TStyledToolbar instances.

class procedure RegisterDefaultRenderingStyle(
  const ADrawType: TStyledButtonDrawType;
  const AFamily: TStyledButtonFamily = DEFAULT_CLASSIC_FAMILY;
  const AClass: TStyledButtonClass = DEFAULT_WINDOWS_CLASS;
  const AAppearance: TStyledButtonAppearance = DEFAULT_APPEARANCE;
  const AStyleRadius: Integer = DEFAULT_RADIUS); virtual;

Usage Examples

Basic Toolbar

var
  Toolbar: TStyledToolbar;
  Btn: TStyledToolButton;
begin
  Toolbar := TStyledToolbar.CreateStyled(Self,
    BOOTSTRAP_FAMILY,
    btn_secondary,
    BOOTSTRAP_NORMAL);
  Toolbar.Parent := Self;
  Toolbar.Align := alTop;
  Toolbar.ButtonWidth := 32;
  Toolbar.ButtonHeight := 32;
  Toolbar.Images := ImageList1;

  // Add button
  Btn := TStyledToolButton.Create(Toolbar);
  Btn.Parent := Toolbar;
  Btn.ImageIndex := 0;
  Btn.Hint := 'New';
  Btn.ShowHint := True;
end;

Toolbar with Captions

Toolbar := TStyledToolbar.CreateStyled(Self,
  ANGULAR_LIGHT_FAMILY,
  acl_primary,
  ANGULAR_RAISED);
Toolbar.Align := alTop;
Toolbar.ShowCaptions := True;
Toolbar.ButtonWidth := 80;
Toolbar.ButtonHeight := 36;

Btn := TStyledToolButton.Create(Toolbar);
Btn.Parent := Toolbar;
Btn.Caption := 'New';
Btn.ImageIndex := 0;

Toolbar with Separators

// Button 1
Btn1 := TStyledToolButton.Create(Toolbar);
Btn1.Parent := Toolbar;
Btn1.Caption := 'Cut';

// Separator
Sep := TStyledToolButton.Create(Toolbar);
Sep.Parent := Toolbar;
Sep.IsSeparator := True;
Sep.Width := 8;

// Button 2
Btn2 := TStyledToolButton.Create(Toolbar);
Btn2.Parent := Toolbar;
Btn2.Caption := 'Copy';

Per-Button Style Override

Toolbar := TStyledToolbar.CreateStyled(Self,
  BOOTSTRAP_FAMILY,
  btn_secondary,
  BOOTSTRAP_NORMAL);

// This button uses toolbar defaults
BtnNormal := TStyledToolButton.Create(Toolbar);
BtnNormal.Parent := Toolbar;
BtnNormal.Caption := 'Normal';

// This button overrides with custom style
BtnPrimary := TStyledToolButton.Create(Toolbar);
BtnPrimary.Parent := Toolbar;
BtnPrimary.Caption := 'Primary';
BtnPrimary.StyleClass := btn_primary;  // Override!

Important Notes

• Fixed Size: Unlike VCL TToolBar, button size doesn't change with caption width
• Flow Layout: Based on TFlowPanel, not TToolBar
• ButtonWidth/Height: Controls ALL buttons unless individually overridden
• ShowCaptions: Global setting, individual buttons can't override
• Images: Can set ImageList at toolbar level (shared) or per-button

See Also

• TStyledToolButton - Individual toolbar button
• TStyledButton - Standard styled button