Delphi VCL StyledComponents

Components similar to Delphi VCL Buttons, Panels, Toolbar, DbNavigator, BindNavigator, ButtonGroup and CategoryButtons with Custom Graphic Styles, and an advanced, full-customizable TaskDialog, also with animations!

Actual official version: 4.0.0

---

New Setup for Installation of Components

From 3.8.1 version a new "Installer" read-to-use is located in the Release area: Download the Installer.

The Installer automatically detect your Delphi versions, installa sources, build and installa packages and add source paths.

Documentation

Follow the Project Site to known how to use those components to modernize your Delphi VCL using those components.

---

A brief description

StyledComponents is a set of VCL components for Delphi (32 and 64 bit) that allow you to overcome the limits imposed by standard VCL components, maintaining 100% compatibility of the properties.

You can easily use them, as a replacement for the standard ones, as well as to provide new features.

The main limitations of the buttons and components of the VCL are the shape and color, defined by the operating system.

With StyledComponents you can overcome these limits in a simple way. You can:

• Control the shape of the button
• Control button and border color (without limits) for every button state.
• Use "families" of predefined styles as in the WEB environment (e.g. Angular or Bootstrap)
• Adapt to the colors of the VCL styles, keeping the shape of the button consistent
• The appearance is identical in “Windows” mode or by applying VCL styles to the application

Last, but not least, with StyledTaskDialog you can control appearance of your Message Dialogs in any aspect. Using Skia4Delphi you can also add animated Icons to your messages.

…all available from the Delphi XE6 version (which allows the use of GDI+, used for button drawing).

The most important properties

using only few properties you can setup your Button in a very simple way.

Color attributes:

With three values, you can select predefined ready styles for button color, border and font color:

• StyleFamily: the "Family" of a Style (eg.Classic or Bootstrap or Angular)
• StyleClass: a collection of predefined button style of the selected Family
• Style Appearance: eg.Normal or Outline

Shape attributes:

• StyleDrawType

|btRoundRect (default)|btRect|btRounded|btEllipse| | :-- | :-- | :-- | :-- | |||||

• StyleRoundedCorners: used for RoundRect and Rounded DrawType
• StyleRadius: used for btRoundRect DrawType

In this picture you can see the StyledComponentsDemo application with some examples:

Special Properties:

StyledComponents offers more options then standard components, such as:

• Down, AllowUp and GroupIndex to use them in "group"
• Caption alignment (left, centered, right)
• Presence of Captions (with alignment) and customizable icons via ImageList in TStyledDBNavigator and TStyledBindNavigator
• Ability to change icon position and caption alignment in TStyledButtonGroup and TStyledCategoryButtons
• Different appearance for buttons Items of TStyledToolbar, TStyledButtonGroup and TStyledCategoryButtons
• Notification Badge for all StyledButtons
• AutoClick event (after a Delayed time)
• Animated icons using, TStyledAnimatedButton

…finally, a component for Dialogs is available, completely customizable, which uses custom images or animations and StyledButtons within it, to be 100% consistent with the rest of the application.

Notice: by default the cursor for all Styled Buttons is crHandPoint.

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 appearance of Buttons.| | | TStyledCategoryButtons is a special "CategoryButtons" component with Styles (eg. Classic, Bootstrap, Angular, Basic-Color, SVG-Color) plus ImagePosition, CaptionAlignment and Flat properties, for adding more controls to the appearance 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!| | | TStyledPanel a styled container control based on TCustomPanel with support for Styles (eg. Classic, Bootstrap, Angular, Basic-Color, SVG-Color). It provides full control over background rendering with customizable shape (Rounded, RoundRect, Rect, Ellipse), colors and borders for Normal and Disabled states. Features include Caption alignment, customizable margins, and the ability to switch between styled and VCL rendering.|

---

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.

---

TStyledAnimatedButton Component (using Skia4Delphi):

| 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. |

---

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](https://getbootstrap.com/docs/4.0/components/but