search

EtheaDev / StyledComponents

Components similar to Delphi VCL Buttons, Toolbar, DbNavigator, BindNavigator, ButtonGroup and CategoryButtons with Custom Graphic Styles, and an advanced, full-customizable TaskDialog, also with animations!
Apache License 2.0
144 stars 34 forks source link
bootstrap button delphi dialogs

readme

# Delphi VCL StyledComponents License

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

Actual official version: 3.6.5

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:

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:

Shape attributes:

btRoundRect (default) btRect btRounded btEllipse
RoundRect Classic_Normal_Windows_btRect Rounded Ellipse

New properties:

StyledComponents offers more options then standard components, such as:

…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 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 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 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 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 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 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 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 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
OK_SPEEDBUTTON_128.png 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.
OK_BITBTN_128.png 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:

TStyledAnimatedButton Component (using Skia4Delphi):

Component Description
OK_ANIMATED_BUTTON_128.png 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:

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

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 Template unit to create your custom Family Styles

NOTICE: from version 3.5.4 the StyledTaskDialog support is now full compatible with TTaskDialog, adding use of CommandLinks and more... The defalt size of Icons/Animations for Dialogs now is 64x64 pixel (at 96 dpi).

NOTICE: from version 3.5.3 there is a new unit "Vcl.TemplateButtonStyles.pas" you can use to create your own Family of Button Styles, as explained here

New RoundedCorners options

NOTICE: from version 3.5.0 the new RoundedCorners property was added to all of the Styled Buttons, to enable/disable Rounding drawing, as showed in this example:

RoundedCorners

New Notification Badge for buttons

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

NotificationBadge

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

New AutoClick/AutoClickDelay for buttons

NOTICE: from version 3.6.3 you can activate the AutoClick flag to invoke the Click event of the StyledButton, after a AutoClickDelay time, as showed in the AutoClick Demo:

Also the StyledTaskdialog can use this function to AutoClick and close the Dialog.

AutoClickDemo

Read AutoClick/Delay guide to explorer how it works...

New Rounded Button Style

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

RoundedButtons.jpg

In this picture the Component Editor selecting "Boostrap" styles and StyleRadius 18: Style Appearance can be Normal or Outline

StyledButtonComponentEditorBootstrap.jpg

In this picture, the Component Editor selecting "AngularUI" styles: Style Appearance can be Flat, Raised, Basic, Stroked

StyledButtonComponentEditorAngular.jpg

In this picture, the Component Editor selecting "Classic" styles: Style Appearance can be Normal or Outline

StyledButtonComponentEditor.jpg

In this picture, the Component Editor selecting "Basic-Colors" styles and Rounded StyleDrawType: Style Appearance are Normal and Outline

StyledButtonComponentEditorRounded.jpg

In this picture, the Component Editor selecting "SVG-Color" styles: Style Appearance can be Normal or Outline

StyledButtonComponentEditorSVG.jpg

Look at the Demo Folder:

Demos\StyledButtonsDemo\DelphiNNN\StyledButtonsDemo.dpr

A simple demo to show the use of Buttons in many different ways...

StyledButtonDemoBootstrap.jpg

In the demo you can test many different ways to obtain Styled Button, Icon, FAB...

StyledButtonDemoAngular.jpg

Demos\StyledButtonsDemo\Delphi11+\StyledButtonInControlList

A simple demo to show how to use StyledGraphicButton into a ControlList (only for D11+)

StyledButtonInControlListDemo.jpg

Demos\StyledButtonsDemo\Delphi10_4+\StyledButtonsVCLStyled.dpr

A simple demo to show how StyledButton with "Classic" Family is compatible with VCL Styles (only for D10.4+)

StyledButtonsVCLStyled.jpg

Demos\StyledAnimatedButtonsDemo\DelphiXE7+\AnimatedButtonsTest.dpr

A simple demo to show StyledAnimatedButton and StyledAnimatedTaskDialog (available from Delphi XE7+ using Skia4Delphi)

StyledAnimatedButtonsDemo.jpg

Demos\RoundedCornersDemo\DelphiXXX\StyledRoundedCornersExamples.dpr

A simple demo to show StyledRoundedCorners options applied to many Styled Components

StyledRoundedCornersDemo.jpg

Description of StyledToolBar

TStyledToolbar (and TStyledToolButtons) shows a Toolbar like a classic TToolbar but with the same Style attributes that can be assigned to Styled Graphic Buttons.

In the StyledToolbar demo, you can see how to use this component, compared to the classic Delphi TToolBar.

In this picture, the Toolbar Demo compares the StyledToolbar and the classic Toolbar

StyledToolbarDemo.jpg

The major differece is based on the control of the "size" of buttons when "ShowCaptions" is True: in standard Toolbar, the dimension is defined by the larger caption. In the StyledToolbar the dimension is always defined by "ButtonWidth" property.

Description of StyledDbNavigator and StyledBindNavigator

TStyledDbNavigator (with TStyledNavButton buttons) shows a Navigator like a classic TDbNavigator but with the same Style attributes that can be assigned to Styled Graphic Buttons.

TStyledBindNavigator (with TStyledNavButton buttons) shows a Navigator like a classic TBindNavigator but with the same Style attributes that can be assigned to Styled Graphic Buttons.

In the TStyledDbNavigator demo, you can see how to use those components, compared to the classic Delphi TDbNavigator and TBindNavigator.

In this picture, the StyledDbNavigator and StyledBindNavigator with a custom imagelist for images and Captions visible

StyledDbNavigatorDemo.jpg

The major differences are:

Description of StyledButtonGroup and StyledCategoryButtons

TStyledButtonGroup and TStyledCategoryButtons shows a list of buttons with flow or full-size layout, like a classic TButtonGroup or TCategoryButtons. You can define StylesFamily/StyleClass/StyleAppearance for every buttons at component level or change the Style on a single "Button" Item.

TStyledButtonGroup inherits from TButtonGroup, so you can continue to use it as the VCL component as showed in the Demo:

StyledButtonGroupDemo.jpg

TStyledCategoryButtons inherits from TCategoryButtons, so you can continue to use it as the VCL component as showed in the Demo:

StyledCategoryButtonsDemo.jpg

The major differences are:

Description of StyledTaskDialog

TStyledTaskDialog is designed to expand message/task dialog functionalities, fully customizable and also animation.

You can test Styled Dialogs with different "StyledButton set" (Classic, Angular, Bootstrap).

Also, you can use a custom form (inherited from "TStyledTaskDialogForm") to show your complete custom Dialog.

How to replace standard MessageDlg and TaskDialogs

You can use the StyledTaskDialog in you application to replace MessageDlg and and TaskDialogs.

Add the unit Vcl.StyledTaskDialogFormUnit.pas your application.

If you are using Skia4Delphi and you want to use Animated Dialogs, add the unit Skia.Vcl.StyledTaskDialogAnimatedUnit.pas

then you must add the unit Vcl.StyledTaskDialog to your units and change the calls to standard Dialogs/TaskDialogs: MessageDlg -> StyledMessageDlg TaskDialog -> StyledTaskDialog

How to change Dialogs attributes (Font/Buttons Style)

By default, StyledDialogs uses Segoe UI Font with Size 9 (stored into Vcl.StyledTaskDialogFormUnit.dfm). If you want to use another font/size you can call InitializeStyledTaskDialogs like in this example:

  //Resize Standard Message Font to an higher size and select Arial character
  Screen.MessageFont.Size := Round(Screen.MessageFont.Size*1.2);
  Screen.MessageFont.Name := 'Arial';
  //Inizialize the styled dialogs using "Bootstrap" styled buttons and the Screen.MessageFont
  InitializeStyledTaskDialogs(True, Screen.MessageFont, BOOTSTRAP_FAMILY);

Samples/Demos

Demos\StyledTaskDlgDemo and Demos\AnimatedTaskDialogDemo

A simple demo to show how to use StyledTaskDialog with custom icons using ImageList.

The main form is useful to test every format / buttons and type of dialogs.

++Confirmation Dialog with custom font/size and English buttons++

ConfirmationDialog.jpg

++Warning Dialog with italians Captions in AcquaGraphite Style++

To activate button captions is to change StyledComponents.inc file and activate {$Define ItaMessages}

StyledButtonDemo.jpg

++Error Dialog in Windows10 Vcl Style++

StyledButtonDemo.jpg

++Custom Message Dialog++

StyledButtonDemo.jpg

++Use StyleTaskDialog component++

...with RadioButtons, CommandLinks, Verification Text and Footer Text

ShieldButtonDemo.jpg

Demo of AnimatedStyledTaskDialog

If you are have Skia4Delphi installed, you can also try the AnimatedTaskDialogDemo, with nice animations:

AnimatedStyledDialog.gif

Available from Delphi XE6 to Delphi 12 (32bit and 64bit platforms)

Delphi Support

Related links: embarcadero.com - learndelphi.org

RELEASE NOTES

16 Sep 2024: version 3.6.5

26 Aug 2024: version 3.6.4

20 Aug 2024: version 3.6.3

03 Aug 2024: version 3.6.2

31 Jul 2024: version 3.6.1

21 Jun 2024: version 3.6.0 StyledTaskDialog Changes:

NotificationBadge updates:

Other changes:

11 Jun 2024: version 3.5.4

16 May 2024: version 3.5.3

12 May 2024: version 3.5.2

03 May 2024: version 3.5.1

26 Apr 2024: version 3.5.0

23 Apr 2024: version 3.4.5

19 Apr 2024: version 3.4.4

13 Apr 2024: version 3.4.3

7 Apr 2024: version 3.4.2

5 Apr 2024: version 3.4.1

3 Apr 2024: version 3.4.0

16 Mar 2024: version 3.3.3

9 Mar 2024: version 3.3.2

3 Mar 2024: version 3.3.1

18 Feb 2024: version 3.2.1

03 Feb 2024: version 3.2.0

02 Jan 2024: version 3.1.1

23 Oct 2023: version 3.1.0

08 Oct 2023: version 3.0.0

07 Sep 2023: version 2.1.0

10 Jul 2023: version 2.0.0

23 Nov 2023: version 1.1.0

17 Nov 2022: version 1.0.0

15 Nov 2022: version 0.9.9 StyledButton:

10 Nov 2022: version 0.9.8 StyledButton:

07 Nov 2022: version 0.9.5 (VCL)

03 Nov 2022: version 0.9.1 (VCL)

01 Nov 2022: version 0.9.0 (VCL)