Home

Actual official version: 3.4.0

List of available Components:

Component	Description
	TStyledGraphicButton is a "pure" Graphic Button with Styles (eg. Classic, Bootstrap, Angular, Basic-Color, SVG-Color) with support of ImageList, Action and full configuration of five states: Normal, Pressed, Selected, Hot and Disabled. You can use it also into a TVirtualList component.
	TStyledButton is classic "button control" with Styles (eg. Classic, Bootstrap, Angular, Basic-Color, SVG-Color) with support of ImageList, Action and full configuration of five states: Normal, Pressed, Selected, Hot and Disabled, plus Focus and TabStop support. You can easily replace all of your TButton components.
	TStyledToolbar is a Toolbar that uses StyledToolButton, with full customizable of every button style and full control over the size of the buttons, also when Captions are visible. The width and height of the StyledToolButtons inside, do not depends on Caption size, as in classic TToolBar.
	TStyledDbNavigator is a special "DbNavigator" component, with Styles (eg. Classic, Bootstrap, Angular, Basic-Color, SVG-Color), plus Button captions and better "move" icons in vertical mode.
	TStyledBindNavigator is a special "BindNavigator" component, with Styles (eg. Classic, Bootstrap, Angular, Basic-Color, SVG-Color), plus Button captions and better "move" icons in vertical mode.
	TStyledButtonGroup is a special "ButtonGroup" component with Styles (eg. Classic, Bootstrap, Angular, Basic-Color, SVG-Color) plus ImagePosition, CaptionAlignment and Flat properties, for adding more controls to the appeareance of Buttons.
	TStyledTaskDialog is a special "TaskDialog" component (to replace MessageDlg and TaskDlg) with custom Button Captions and Icons. Using a special Form you can show a full customizable Dialog. Using Skia4Delpghi you can show animated dialogs!

---

For "backward compatibily", you can also use those components.

Component	Description
	TStyledSpeedButton derives from TStyledGraphicButton, and introduce Layout, Margin and Spacing properties, to control Drawing (Icon and Caption) as a standard TSpeedButton. You can also use Glyph and NumGlyphs.
	TStyledBitBtn derives from TStyledButton, and introduce Layout, Margin and Spacing properties, to control Drawing (Icon and Caption) as a standard TBitBtn. You can also use Glyph and NumGlyphs.

Those components uses some properties to Draw Icon and Caption in a different way:

• A Glyph and NumGlyphs for the Icon of the button (not reccomended, because doesn't scale)
• The position of the caption, using ButtonLayout instead and Margin (instead of ImageAlignment and ImageMargins)
• The space between the Icon and the Caption, defined by spacing.

---

New TStyledAnimatedButton Component (beta):

Component	Description
	TStyledAnimatedButton is Styled Button with with "animated icon" using a Skia TSkAnimatedImage component inside. You can select the events that starts the animation, like: AnimateOnMouseOver, AnimateOnClick, AnimateAlways, AnimateOnFocus.

---

Installation

Installation of Packages for Delphi/VCL (from XE6 to Delphi 12)

Open the package group Vcl.StyledComponents.groupproj from the correct folder of your Delphi version (eg. \StyledComponents\Packages\D12).

Then build the run-time package: StyledComponentsXXX and install the design-time package: dclStyledComponentsXXX.

Remember to add the "{Folder}\StyledComponents\source" path to use the components in your application or the library path "{Folder}\StyledComponents\Lib\DXX\WinXX\Release"

Installation of Animated Components for Delphi/VCL (from XE7 to Delphi 12)

If you want to use also the Animated Components, you need Skia4Delphi previously installed in your IDE (In Delphi 12 it's already installed).

Open the package group Vcl.StyledAnimatedComponents.groupproj from the correct folder of your Delphi version (eg. \StyledComponents\Packages\D12).

Then build the run-time package: StyledAnimatedComponentsXXX and install the design-time package: dclStyledAnimatedComponentsXXX.

if you need package for other Delphi version not included (newer than XE6) please add a new Issue

Description of Styled Buttons

TStyledGraphicButton, TStyledButton, TStyledBitBtn and TStyledSpeedButton are designed to expand Button UI styles to break the limits of classic VCL Button components.

The Button Styles defined are not affected by VCLStyles and are also visibile on a "non styled" Windows application, so you can have more than a single Button styled also using VCLStyles.

You can build Rectangular, Rounded or RoundRect or Ellipsis/Circle button as you prefer.

using only three elements you can setup your Button in a very simple way:

• StyleFamily: the main attribute for Styled Button
• StyleClass: a collection of predefined button style
• Style Appearance: eg.Normal or Outline

Component editor for TStyledGraphicButton and StyledButton:

To simplify use of the Styled Buttons, there is a useful "Component Editor" to select three values that defines Button Style:

List of available StyleFamily

• Classic: a collection of Styles similar to VCLStyled TButton
• Bootstrap: a collection of Styles similar to Bootstrap buttons
• Angular-Light: a collection of styles similar to Angular buttons
• Angular-Dark: a collection of styles similar to Angular buttons
• Basic-Color: a collection of styles based to Delphi "normal" and "System" Color collection
• SVG-Color: a collection of styles based to Delphi "AlphaColors" Color collection

Control the default rendering styles for any Styled Buttons, Toolbars and DbNavigator

It's possible to redefine at global application level the default Drawing styles for any Components, adding some line in your project file. For Example:

Add those units in uses of dpr:

  Vcl.StyledButton,
  Vcl.ButtonStylesAttributes,
  Vcl.StyledDbNavigator,
  Vcl.StyledToolbar,

Add those lines after Application.Initialize in dpr code:

  TStyledButton.RegisterDefaultRenderingStyle(btRounded);
  TStyledDbNavigator.RegisterDefaultRenderingStyle(btRounded);
  TStyledToolbar.RegisterDefaultRenderingStyle(btRect);

You can also use a Family/Class/Appearance of any type, for example:

TStyledButton.RegisterDefaultRenderingStyle(btRoundRect, BOOTSTRAP_FAMILY, btn_primary, BOOTSTRAP_NORMAL);

You can also use Interposer Unit (Vcl.StyledComponentsHooks.pas) to easily change all Buttons of your application.

New Notification Badge for buttons

NOTICE: from version 3.3.3 the new NotificationBadge property was added to all of the Styled Buttons.

Read Notification Badge guide to explorer how it works...

New Rounded Button Style

NOTICE: from Version 3.2 the new StyleDrawType: btRoundRect (the new default) has been added.

The "old default" btRounded is now used to show "full-rounded" button (as in new Chrome Refresh 2023 UI), but is not the default.

Before 3.2 version

StyleDrawType btRounded (default)	StyleDrawType btRect	StyleDrawType btEllipse

From 3.2 version

StyleDrawType btRoundRect (default)	StyleDrawType btRect	StyleDrawType btRounded	StyleDrawType btEllipse

Be careful with your existing dfm and code files: if you have stored StyleDrawType = btRounded you must change it with btRoundRect, or remove it, because is the default value.

In this picture the new "full-rounded" Style introduced in 3.2 version, in "VCL-Styled" Style Demo

Examples

• Style Button Examples
• Styled Toolbar Examples
• Styled DbNavigator Examples
• Styled TaskDialog Examples
• Styled Animated Buttons Examples

License

Licensed under the Apache License, Version 2.0, (the "License")