TStyledButtonGroup Demo

Overview

This demo compares TStyledButtonGroup with the standard VCL TButtonGroup, demonstrating how to create modern button groups with individual button styling while maintaining full compatibility.

What You'll Learn

• How to create TStyledButtonGroup dynamically
• Adding styled button items with different styles
• Comparison with standard TButtonGroup
• Using notification badges on group items
• Image and caption alignment options
• Button sizing and layout modes

ButtonGroup Comparison

The demo creates button groups side-by-side:

Standard TButtonGroup (Left)

Shows the classic VCL TButtonGroup for comparison.

TStyledButtonGroup (Right)

Modern styled button group with:

• Individual button styling (Family/Class/Appearance)
• Per-item style customization
• Notification badge support
• Consistent appearance across Windows versions

Dynamic ButtonGroup Creation

Creating Standard ButtonGroup

procedure TfmStyledButtonGroup.CreateButtonGroup;
begin
  FButtonGroup := TButtonGroup.Create(Self);
  FButtonGroup.Parent := Self;
  FButtonGroup.Align := alLeft;
  FButtonGroup.ButtonOptions := [gboFullSize, gboShowCaptions];
  FButtonGroup.Images := VirtualImageList;
  FButtonGroup.ButtonWidth := BUTTON_WIDTH;
  FButtonGroup.ButtonHeight := BUTTON_HEIGHT;
end;

Creating TStyledButtonGroup

procedure TfmStyledButtonGroup.CreateStyledButtonGroup;
begin
  FStyledButtonGroup := TStyledButtonGroup.Create(Self);
  FStyledButtonGroup.Parent := Self;
  FStyledButtonGroup.Align := alLeft;
  FStyledButtonGroup.ButtonOptions := [gboFullSize, gboShowCaptions];
  FStyledButtonGroup.Images := VirtualImageList;
  FStyledButtonGroup.ButtonWidth := BUTTON_WIDTH;
  FStyledButtonGroup.ButtonHeight := BUTTON_HEIGHT;
end;

Adding Button Items

Standard Button Items

function TfmStyledButtonGroup.AddButtonToButtonGroup(
  var AButtonGroup: TButtonGroup;
  const ACaption: string;
  const AImageIndex: Integer): TGrpButtonItem;
begin
  Result := AButtonGroup.Items.Add;
  Result.Caption := ACaption;
  Result.Hint := Format('Hint of %s button.', [ACaption]);
  Result.ImageIndex := AImageIndex;
end;

Styled Button Items

function TfmStyledButtonGroup.AddStyledButtonToButtonGroup(
  var AButtonGroup: TStyledButtonGroup;
  const ACaption: string;
  const AImageIndex: Integer;
  const AFamily: TStyledButtonFamily;
  const AClass: TStyledButtonClass;
  const AAppearance: TStyledButtonAppearance): TStyledGrpButtonItem;
begin
  Result := AButtonGroup.Items.Add;
  Result.Caption := ACaption;
  Result.Hint := Format('Hint of %s button.', [ACaption]);
  Result.ImageIndex := AImageIndex;
  Result.SetButtonStyle(AFamily, AClass, AAppearance);
end;

Per-Item Styling

Each button in the group can have its own style:

// Button 1 - Primary Outline
AddStyledButtonToButtonGroup(FStyledButtonGroup, 'Caption1', 0,
  BOOTSTRAP_FAMILY, btn_primary, BOOTSTRAP_OUTLINE);

// Button 2 - Secondary Outline
AddStyledButtonToButtonGroup(FStyledButtonGroup, 'Caption2', 5,
  BOOTSTRAP_FAMILY, btn_secondary, BOOTSTRAP_OUTLINE);

// Button 3 - Success Outline
AddStyledButtonToButtonGroup(FStyledButtonGroup, 'Caption3', 8,
  BOOTSTRAP_FAMILY, btn_success, BOOTSTRAP_OUTLINE);

// Button 4 - Danger Outline
AddStyledButtonToButtonGroup(FStyledButtonGroup, 'Caption4', 10,
  BOOTSTRAP_FAMILY, btn_danger, BOOTSTRAP_OUTLINE);

Button Options

Full Size Mode (gboFullSize)

Buttons fill the full width of the container:

ButtonGroup.ButtonOptions := ButtonGroup.ButtonOptions + [gboFullSize];

Group Style Mode (gboGroupStyle)

Standard TButtonGroup option that draws the buttons as a group (see the Embarcadero help); with gboFullSize off the width of each button is ButtonWidth:

ButtonGroup.ButtonOptions := ButtonGroup.ButtonOptions + [gboGroupStyle];
ButtonGroup.ButtonWidth := 120;

Show Captions (gboShowCaptions)

Display button captions:

ButtonGroup.ButtonOptions := ButtonGroup.ButtonOptions + [gboShowCaptions];

Notification Badges

The demo includes notification badges on button items:

Enable Badges

procedure TfmStyledButtonGroup.StyledButtonGroupBootstrapGetNotificationBadgeInfo(
  const AButtonItemIndex: Integer;
  var ABadgeContent: string;
  var ASize: TNotificationBadgeSize;
  var APosition: TNotificationBadgePosition;
  var AColor, AFontColor: TColor;
  var AFontStyle: TFontStyles);
begin
  if (AButtonItemIndex = 0) then
    ABadgeContent := IntToStr(FNotificationCount + 10)
  else if (AButtonItemIndex = 1) then
  begin
    AColor := clBlue;
    ABadgeContent := IntToStr(FNotificationCount + 20);
  end;
end;

Animated Badges

The demo uses a timer to update badge counts:

procedure TfmStyledButtonGroup.BadgeTimerTimer(Sender: TObject);
begin
  Inc(FNotificationCount);
  StyledButtonGroupBootstrap.Repaint;  // Force badge update
end;

Image and Caption Alignment

Caption Alignment

// Left-aligned captions
ButtonGroup.CaptionAlignment := taLeftJustify;

// Centered captions
ButtonGroup.CaptionAlignment := taCenter;

// Right-aligned captions
ButtonGroup.CaptionAlignment := taRightJustify;

Image Alignment

// Image on left
ButtonGroup.ImageAlignment := iaLeft;

// Image on right
ButtonGroup.ImageAlignment := iaRight;

// Image on top
ButtonGroup.ImageAlignment := iaTop;

// Image on bottom
ButtonGroup.ImageAlignment := iaBottom;

// Image centered (no caption)
ButtonGroup.ImageAlignment := iaCenter;

Interactive Controls

The demo includes controls to modify appearance:

Control	Function
Width Trackbar	Adjust button width (in gboGroupStyle mode)
Height Trackbar	Adjust button height
Show Caption	Toggle caption visibility
Full Size	Toggle full-size mode
Show Icon	Toggle icon visibility
Caption Alignment	Change caption alignment
Image Alignment	Change image position

Button Click Handling

Handle button clicks with the OnButtonClicked event:

procedure TfmStyledButtonGroup.ButtonGroupButtonClicked(
  Sender: TObject;
  Index: Integer);
begin
  if Sender is TButtonGroup then
  begin
    if TButtonGroup(Sender).Items[Index] is TGrpButtonItem then
      StyledShowMessage(TGrpButtonItem(TButtonGroup(Sender).Items[Index]).Caption);
  end;
end;

Design-Time Button Group

The demo also shows button groups created at design-time:

Classic Style ButtonGroup

• Default VCL appearance
• All standard features

Bootstrap Style ButtonGroup

• Bootstrap styling
• Notification badges
• Custom colors per item

Key Features

1. Per-Item Styling

Each button can have different:

• StyleFamily
• StyleClass
• StyleAppearance
• Colors
• Icons

2. Notification Badges

Display badges on items:

• Numeric counts
• Custom text
• Custom colors
• Custom positions

3. Flexible Layout

• Vertical or horizontal
• Full-size or fixed-width
• Customizable spacing

4. Item Selection

// Get selected item
SelectedIndex := ButtonGroup.ItemIndex;

// Set selected item
ButtonGroup.ItemIndex := 2;

Creating ButtonGroup Programmatically

Complete example:

var
  BtnGroup: TStyledButtonGroup;
  Item: TStyledGrpButtonItem;
begin
  // Create button group
  BtnGroup := TStyledButtonGroup.Create(Self);
  BtnGroup.Parent := Self;
  BtnGroup.Align := alLeft;
  BtnGroup.Images := ImageList1;
  BtnGroup.ButtonOptions := [gboFullSize, gboShowCaptions];

  // Add styled items
  Item := BtnGroup.Items.Add as TStyledGrpButtonItem;
  Item.Caption := 'Home';
  Item.ImageIndex := 0;
  Item.SetButtonStyle(BOOTSTRAP_FAMILY, btn_primary, BOOTSTRAP_NORMAL);

  Item := BtnGroup.Items.Add as TStyledGrpButtonItem;
  Item.Caption := 'Settings';
  Item.ImageIndex := 1;
  Item.SetButtonStyle(BOOTSTRAP_FAMILY, btn_secondary, BOOTSTRAP_NORMAL);
end;

Key Differences from TButtonGroup

TStyledButtonGroup adds:

1. Per-Item Styling: Each item can have unique Family/Class/Appearance
2. Notification Badges: Built-in badge support
3. Consistent Rendering: Same look across Windows versions
4. Modern Appearance: Bootstrap, Angular, or custom styles
5. Better DPI Support: Automatic scaling
6. Extended Customization: More visual options

Technical Details

Source Location

Demos/source/StyledButtonGroupForm.pas

Supported Versions

All Delphi versions (XE6+)

Key Properties

Property	Description
Items	Collection of button items
ItemIndex	Currently selected item index
ButtonOptions	Layout and display options
ButtonWidth	Button width (gboGroupStyle mode)
ButtonHeight	Button height
Images	ImageList for icons
CaptionAlignment	Caption text alignment
ImageAlignment	Icon position
StyleFamily	Default style family for items
StyleClass	Default style class for items

Key Events

Event	Description
OnButtonClicked	Fires when item is clicked
OnGetNotificationBadgeInfo	Provides badge information

See Also

• TStyledButtonGroup - Description and examples
• TStyledButtonGroup Reference - Complete technical documentation
• TStyledCategoryButtons Reference - Categorized button group
• TStyledButton Reference - Base button component