TStyledBitBtn Demo

Overview

This demo compares TStyledBitBtn with the standard VCL TBitBtn, demonstrating full backward compatibility while adding modern styling capabilities.

Component guide: TStyledBitBtn - reference: TStyledBitBtn-Reference.

What You'll Learn

• How TStyledBitBtn maintains TBitBtn compatibility
• Different style families applied to BitBtn components
• How Kind property automatically sets captions, glyphs, and modal results
• Side-by-side comparison with standard TBitBtn

Button Kinds

The demo displays all TBitBtnKind values:

Kind	Caption	ModalResult	Default	Cancel
bkOK	OK	mrOk	True	False
bkCancel	Cancel	mrCancel	False	True
bkYes	Yes	mrYes	True	False
bkNo	No	mrNo	False	True
bkClose	Close	mrNone	False	False
bkAbort	Abort	mrAbort	False	False
bkRetry	Retry	mrRetry	False	False
bkIgnore	Ignore	mrIgnore	False	False
bkHelp	Help	mrNone	False	False
bkAll	All	mrAll	False	False
bkCustom	(custom)	(unchanged)	(unchanged)	(unchanged)

Each Kind also shows its own default glyph (none for bkCustom, which uses the Glyph property).

Layout Comparison

The demo shows multiple columns, each with a different style family:

Column 1: Standard TBitBtn

Shows the original VCL TBitBtn for comparison.

Column 2: TStyledBitBtn (Classic Family)

TStyledBitBtn with DEFAULT_CLASSIC_FAMILY style.

Column 3: TStyledBitBtn (Bootstrap Family)

Buttons automatically styled from the ModalResult of the Kind:

• bkOK: btn_success (green)
• bkYes: btn_primary (blue)
• bkNo, bkIgnore: btn_secondary (gray)
• bkCancel, bkAbort: btn_danger (red)
• bkRetry: btn_warning (yellow)
• bkAll: btn_primary with the Outline appearance
• bkClose, bkHelp: their ModalResult is mrNone, so they use the default style of the family (btn_primary)

Column 4: TStyledBitBtn (Angular Light)

Material Design styling with Angular Light theme.

Column 5: TStyledBitBtn (Angular Dark)

Material Design styling with Angular Dark theme.

Column 6: TStyledBitBtn (Basic-Color Family)

Color-based styling.

Column 7: TStyledBitBtn (SVG-Color Family)

Extended color palette.

Dynamic Button Creation

The demo creates buttons dynamically at runtime:

procedure TfmBitBtn.CreateButtons(
  const AStyleFamily: TStyledButtonFamily;
  const ALeftOffset: Integer);

  function CreateButtonAs(const ABitBtn: TBitBtn): TStyledBitBtn;
  begin
    Result := TStyledBitBtn.Create(Self);
    Result.Parent := Self;
    Result.SetBounds(ABitBtn.Left + Round(ALeftOffset * GetScaleFactor),
      ABitBtn.Top, ABitBtn.Width, ABitBtn.Height);
    Result.StyleFamily := AStyleFamily;
    Result.Caption := ABitBtn.Caption;
    Result.Kind := ABitBtn.Kind;  // Sets ModalResult, Default, Cancel and the glyph

    if Result.Kind = bkCustom then
    begin
      Result.NumGlyphs := ABitBtn.NumGlyphs;
      Result.Glyph := ABitBtn.Glyph;
    end;
    Result.OnClick := ButtonClick;
    Result.OnMouseEnter := ButtonMouseEnter;
    Result.OnMouseLeave := ButtonMouseLeave;
  end;

begin
  CreateButtonAs(btOK);
  CreateButtonAs(btCancel);
  // ... other buttons
end;

procedure TfmBitBtn.FormShow(Sender: TObject);
begin
  CreateButtons(BOOTSTRAP_FAMILY, 220);
  CreateButtons(ANGULAR_LIGHT_FAMILY, 330);
  CreateButtons(ANGULAR_DARK_FAMILY, 440);
  CreateButtons(BASIC_COLOR_FAMILY, 550);
  CreateButtons(SVG_COLOR_FAMILY, 660);
end;

The Classic column is already present at design time.

Click Interaction

Clicking any button shows the corresponding ModalResult:

procedure TfmBitBtn.ButtonClick(Sender: TObject);
var
  LModalResult: Integer;
begin
  if Sender is TStyledBitBtn then
    LModalResult := TStyledBitBtn(Sender).ModalResult;
  StyledShowMessage(Format('ModalResult = %d', [LModalResult]));
end;

Mouse Hover

Hovering over TStyledBitBtn buttons displays their style information:

procedure TfmBitBtn.ButtonMouseEnter(Sender: TObject);
var
  LBtn: TStyledBitBtn;
begin
  if Sender is TStyledBitBtn then
  begin
    LBtn := TStyledBitBtn(Sender);
    Hint := Format('StyleFamily: %s - StyleClass: %s - StyleAppearance: %s',
      [LBtn.StyleFamily, LBtn.StyleClass, LBtn.StyleAppearance]);
  end;
end;

Automatic Styling by Kind

When you set the Kind property, TStyledBitBtn automatically:

1. Sets Caption: Based on kind (OK, Cancel, Yes, No, etc.)
2. Sets ModalResult, Default and Cancel: Appropriate values for the kind
3. Shows the Glyph: the default icon of the kind, when no Glyph is assigned
4. Chooses StyleClass: the style family maps the ModalResult to a class and an appearance (see the Bootstrap column above); the kinds with ModalResult = mrNone (bkClose, bkHelp, bkCustom) use the default style of the family

Custom Kind

For bkCustom, you can:

• Set your own caption
• Assign custom glyph
• Define modal result
• Full control over appearance

Example in the demo:

btCustom.Kind := bkCustom;
btCustom.Caption := 'Custom';
btCustom.Glyph.LoadFromFile('custom.bmp');
btCustom.NumGlyphs := 1;

Key Differences from TBitBtn

While fully compatible, TStyledBitBtn adds:

1. StyleFamily Property: Choose from multiple families
2. StyleClass Property: Select specific color/style
3. StyleAppearance Property: Normal, Outline, Flat, etc.
4. StyleDrawType: Rounded, RoundRect, Rect, Ellipse
5. Modern Rendering: GDI+ antialiased graphics
6. DPI Awareness: Automatic scaling
7. Consistent Look: Independent of VCL Styles

Migration Path

To migrate from TBitBtn to TStyledBitBtn:

// Old code:
// var
//   BitBtn1: TBitBtn;

// New code:
var
  BitBtn1: TStyledBitBtn;

// All TBitBtn properties work the same!
BitBtn1.Kind := bkOK;
BitBtn1.Default := True;

// Plus new styling options:
BitBtn1.StyleFamily := BOOTSTRAP_FAMILY;
BitBtn1.StyleDrawType := btRounded;

Technical Details

Source Location

Demos/source/BitBtnForm.pas

Supported Versions

All Delphi versions (XE6+)

Key Properties Demonstrated

• Kind: TBitBtnKind value
• Glyph: Bitmap glyph (legacy)
• NumGlyphs: Number of images in bitmap (1-4)
• ModalResult: Dialog result value (shown when a button is clicked)
• StyleFamily, StyleClass, StyleAppearance: shown in the hint when the mouse enters a button

Layout, Margin, Spacing, Default and Cancel are available too: see the TStyledBitBtn guide.

See Also

• TStyledBitBtn - Component guide with examples
• TStyledBitBtn Reference - Complete technical documentation
• TStyledButton - The windowed styled button (TButton replacement)
• TStyledSpeedButton - TSpeedButton compatibility