TStyledBitBtn Demo

Overview

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

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	Auto Glyph
bkOK	OK	mrOk	Checkmark
bkCancel	Cancel	mrCancel	X mark
bkYes	Yes	mrYes	Checkmark
bkNo	No	mrNo	X mark
bkClose	Close	mrClose	X mark
bkAbort	Abort	mrAbort	X mark
bkRetry	Retry	mrRetry	Circular arrow
bkIgnore	Ignore	mrIgnore	Forward arrow
bkHelp	Help	mrNone	Question mark
bkAll	All	mrAll	Double checkmark
bkCustom	(custom)	mrNone	None

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 based on Kind:

• bkOK, bkYes: btn_success (green)
• bkNo, bkAbort: btn_danger (red)
• bkCancel: btn_secondary (gray)
• bkHelp: btn_info (blue)

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.StyleFamily := AStyleFamily;
    Result.Kind := ABitBtn.Kind;  // Automatically sets Caption, ModalResult, Glyph

    if Result.Kind = bkCustom then
    begin
      Result.NumGlyphs := ABitBtn.NumGlyphs;
      Result.Glyph := ABitBtn.Glyph;
    end;
  end;

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

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: Appropriate modal result value
3. Assigns Glyph: Default icon for the kind
4. Chooses StyleClass: For Bootstrap/Angular families, selects appropriate color:
   • Success kinds → Success/Primary colors
   • Cancel/No kinds → Danger/Warn colors
   • Help kind → Info/Accent colors

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)
• Layout: Glyph position (blGlyphLeft, blGlyphRight, etc.)
• Margin: Space between edge and content
• Spacing: Space between glyph and caption
• ModalResult: Dialog result value
• Default: Default button for form
• Cancel: Cancel button for form

See Also

• TStyledBitBtn Reference - Complete technical documentation
• TStyledButton Reference - Base button component
• TStyledSpeedButton Reference - TSpeedButton compatibility