TStyledToolButton
| Component | Description |
|---|---|
 | TStyledToolButton is the button of the TStyledToolbar: a styled graphic button (no window handle, no keyboard focus) with the behaviour of the TToolButton: push button, check button, drop-down button, separator and divider. |
Unit: Vcl.StyledToolbar. Inheritance: TGraphicControl > TCustomStyledGraphicButton > TStyledToolButton. Platforms: Win32 and Win64.
When to use it
Use it inside a TStyledToolbar in place of TToolButton. The button takes from the toolbar the images, the size, the style (Family/Class/Appearance, shape, radius), the cursor and the Flat / ShowCaptions / List settings, and you can override any of them on a single button.
Differences from the VCL TToolButton
| Aspect | TToolButton | TStyledToolButton |
|---|---|---|
| Parent | TToolBar | TStyledToolbar |
| Size | width from the caption | ButtonWidth x ButtonHeight of the toolbar (or its own Width) |
| Look | VCL Style / theme | Family / Class / Appearance, shape, five state attributes (ButtonStyleNormal...), notification badge |
| Styles | tbsButton, tbsCheck, tbsDropDown, tbsSeparator, tbsDivider, tbsTextButton | the same, except tbsTextButton (raises an exception when assigned) |
| Radio group | Grouped (+ Marked) | Grouped with Style = tbsCheck (Marked is only stored, for compatibility) |
| Menu | MenuItem, DropdownMenu | MenuItem, DropDownMenu and the OnDropDownClick event |
Wrap | wraps the toolbar row | published as the WordWrap of the caption |
Button styles (Style)
| Value | Behaviour |
|---|---|
tbsButton | normal push button (default) |
tbsCheck | toggle button: stays pressed (Down) after the click; with Grouped the buttons of the same group work as radio buttons |
tbsDropDown | split button: the arrow shows the DropDownMenu; its width is ButtonWidth plus the width of the arrow |
tbsSeparator | empty space (default width 6) |
tbsDivider | like the separator, used as a visual division between groups |
A separator or divider is always disabled, has no image and no caption, and its width is not forced to ButtonWidth.
Style inheritance
StyleFamily, StyleClass, StyleAppearance, StyleDrawType, StyleRadius, StyleShadowSize, Images and Flat are copied from the toolbar when the button is inserted, and they follow the toolbar when it changes as long as the button has the same value of the toolbar. Assign a different value to the button to override it. The values equal to the ones of the toolbar are not saved in the .dfm.
Caption is drawn only if the toolbar has ShowCaptions = True. With captions the image is placed according to ImageAlignment (default iaTop); with List = True it goes on the left (on the right in right-to-left); without captions it is centered.
Design-time use and Component Editor
Select a button and right-click it: Styled Button Editor... opens the Component Editor to choose Family/Class/Appearance and shape of the single button. To add buttons use the verbs of the toolbar (Add StyledToolbar Button, Add StyledToolbar Separator). ImageIndex and ImageName (Delphi 10.4+) have the usual image property editors.
Examples
Push button with image and event:
if Toolbar.NewButton(LButton) then
begin
LButton.Caption := 'Save';
LButton.ImageIndex := 5;
LButton.Hint := 'Save file';
LButton.ShowHint := True;
LButton.OnClick := SaveClick;
end;Check button:
if Toolbar.NewButton(LBold, tbsCheck) then
begin
LBold.Caption := 'B';
LBold.AllowAllUp := True;
LBold.OnClick := BoldClick; //read LBold.Down inside the handler
end;Radio group of check buttons (only one is down):
for I := 0 to 2 do
if Toolbar.NewButton(LButton, tbsCheck) then
begin
LButton.Grouped := True;
LButton.Caption := Format('Align %d', [I]);
LButton.ImageIndex := 10 + I;
end;
Toolbar.Buttons[0].Down := True;Drop-down button:
if Toolbar.NewButton(LButton, tbsDropDown) then
begin
LButton.Caption := 'File';
LButton.DropDownMenu := FilePopupMenu;
LButton.OnDropDownClick := FileDropDownClick; //before the menu is shown
end;Separator and notification badge:
Toolbar.NewButton(LSep, tbsSeparator);
if Toolbar.NewButton(LButton) then
begin
LButton.ImageIndex := 10;
LButton.NotificationBadge.NotificationCount := 5;
LButton.NotificationBadge.Color := clRed;
end;Single button with its own style:
LButton.SetButtonStyle(BOOTSTRAP_FAMILY, btn_danger, BOOTSTRAP_NORMAL);More examples in StyledToolbar-Examples.
Demo and reference
- Demo: StyledToolbarDemo
- Reference: TStyledToolButton-Reference