Updated: 13.02.2018
Rus Follow on twitter


Component is designed for centralized management of program skinning process. For work of this component is enough to define a skin and set the Active property to True.

There are two ways of skins deploying with the application :

  1. Adding skins into InternalSkins list, we call them as "internal" skins. In this case, you should add them to the InternalSkins list, using a special form. Skin is applied to the application after selection of his name in the SkinName property.
  2. Deploying of skins as separate files, we will call them as "external". Usually they are placed in a separate folder which will be deployed with application. Skin is applied to the application, if directory with external skin is specified in the SkinDirectory property, and his name is defined in the SkinName property.

These two ways may be used together also. If external skin is not found, then first internal skin will be loaded automatically in this case.

Component is active only when the Active property is enabled. Please note, if a loading of skin fails (for example, if the skin is not selected), then Active property is changed to False automatically and program will have a standard look.

The AnimEffects structure contains a set of animation settings for different events:

  • BlendOnMoving - If "Active", then forms will be semitransparent while dragged. "Time" defines a time of animation process. "BlendValue" specifies a degree of the form transparency (0..255).
  • Buttons specifies events in which animation will run in buttons.
  • DialogHide, DialogShow, FormHide, FormShow allows to control animation of showing and hiding of dialogs and forms.
  • Minimizing allows to control animation of forms minimizing and restoring.
  • PageChange controls an animation of tabs switching in the TsPageControl component.
  • SkinChanging controls an animation of a skins switching.

Before running of animation effect the image in memory is created. This feature may be useful even if animation is not used. For example, if a form contains a lot of controls and showing of this form is slow, you can set the animation time to 0, Active to True. Then the whole image will be produced in the memory, and the form will appear almost instantly.

Note that FormShow animation will work better if the TsSkinProvider component was placed on form in design-time.

The CommonSections property allows add new sections to the skin in real-time. If new section is defined in this property, then this section will be automatically added to each applied skin. For example, we need a white panel in the each applied skin, but borders should be inherited from the "PANEL" section of this skin. Then we should open CommonSections and add such section there:


Now it is sufficient in the panel or in other control to change the SkinData.SkinSection property to "PANEL_WHITE" and component will have a new look.

Example of the CommonStyle property using may be downloaded there.

Effects contains properties that controls a set of special effects that are available in the skin:

  • AllowAeroBluring enables a blurring effect of nonclient part of the window, which is available in Windows Vista and newer.
  • AllowGlowing enables a glow effect which occurs when mouse is moved over a control, as well as over buttons in the window title.

The ExtendedBorders enables a using of extra borders in forms and dialogs of application. Usually these additional borders are used for adding of shadows to forms, but they can implement and other effects also.

HUEOffset specifies an offset of color palette in all skin. Below are screenshots of window where HUEOffset is 0 and 80.

InternalSkins contains skins, embedded in Exe. Adding skins produced in the design-time with using a special dialog. Number of skins that can be embedded in Exe, is not limited, but a large number of built-skins can greatly increase the size of executable file. The "Update all" button allow to update all internal skins in design-time by a single click. A source directory with newer versions of skins is shown as "External location" in the upper left corner of the dialog.

The IsDefault property determines a skin manager which will be default for all application (DefaultManager). If application has defined several skin managers, then DefaultManager will be used for skinning of dialogs, as well as for all forms and controls which do not have a manager specially defined in the SkinData.SkinManager property. DefaultManager always the first to be created, or the first created by the manager will be a key.

The MenuSupport structure allow to control a process of the popup menus skinning.

  • AlphaBlend defines a level of popup menus transparency.
  • ExtraLineFont sets the font for the additional vertical bar in popup menu, which may be enabled in the UseExtraLine property and managed by OnGetMenuExtraLineData event.
  • ExtraLineWidth - width of extra line.
  • IcoLineSkin - a section of the skin, is responsible for drawing the vertical bar under icons of menu items.
  • UseExtraLine - enables an additional rendering mode of the menu bar. If this property is set, then additional vertical bar will be drawn at all drop-down menus. For configuring this mode use the OnGetMenuExtraLineData event. Description of this event is below.

Saturation - sets the saturation of current skin on the entire application. Below are screenshots of window where Saturation is -100 and 100.

SkinDirectory - directory where component should look for external skins. If used embedded skins only, this property may be not defined.

SkinInfo stores information about the active skin.

SkinName specifies a skin which should be activated. Name of skin should be specified without a file extension.

SkinnedPopups disables a skinning of menus. If this property is False, then menus will be drawn by windows system.

SkinningRules contains some rules of the application skinning.

  • srStdForms enables an automatic skinning of all new forms which inherited from TForm class. If a skin should be applied to custom forms only, then this property must be False and TsSkinProvider component must be placed to such forms in design-time.
  • srStdDialogs enables a skinninf of system dialogs.
  • srThirdParty allows to apply a skin for standard and third-party controls.

The ThirdParty list contains rules of a skin applying for standard and third-party controls. Skinning of standard and third-party controls works only when SkinningRules.srThirdParty is True and form is skinned (it is desirable to place the TsSkinProvider component on this form in design).

A special property-editor used for a changing of this list in design-time. At the left is a list of types which should be skinned. It's possible to add all items manually by using of bottom toolbar. But may be used a special lists with predefined sets of components, which is on the right. Please note, that names of types are case-sensitive there.

The Version property stores the current version of the package.

The Palette array doesn't exists in the Object inspector, but accessible at the run-time. This array contains all common colors of the loaded skin, which may be changed by developer. Available indexes for this array:

TacPaletteColors = (pcMainColor, pcLabelText, pcWebText, pcWebTextHot, pcEditText, pcEditBG, pcSelectionBG, pcSelectionText, pcSelectionBG_Focused, pcSelectionText_Focused, pcEditBG_Inverted, pcEditText_Inverted, pcEditBG_OddRow, pcEditBG_EvenRow, pcEditText_Ok, pcEditText_Warning, pcEditText_Alert, pcEditText_Caution, pcEditText_Bypassed, pcEditBG_Ok, pcEditBG_Warning, pcEditBG_Alert, pcEditBG_Caution, pcEditBG_Bypassed, pcEditText_Highlight1, pcEditText_Highlight2, pcEditText_Highlight3, // Round buttons colors pcBtnColor1Active, pcBtnColor2Active, pcBtnBorderActive, pcBtnFontActive, pcBtnColor1Normal, pcBtnColor2Normal, pcBtnBorderNormal, pcBtnFontNormal, pcBtnColor1Pressed, pcBtnColor2Pressed, pcBtnBorderPressed, pcBtnFontPressed, pcBorder, pcGrid, pcHintBG, pcHintText);


OnActivate occurs immediately after a component activation.

OnAfterChange occurs after changing of the current skin.

OnBeforeChange occurs before changing of the current skin.

OnDeactivate occurs after a skins deactivation.

OnGetMenuExtraLine called before a drawing of the popup menu, if MenuSupport.UseExtraLine property is active. Additional left vertical line will be drawn if LineVisible parameter is True. FirstItem parameter points to the first menu item for this popup menu. Focusing on this option you can enable or disable the extra line, also may be defined such parameters as SkinSection, Caption, and Glyph. Example of handling of this event may be found in ASkinDemo and ASLDemo.

The OnGetPopupItemData event occurs before a drawing of popup menu and allow to define a font for an each menu item.

OnSkinListChanged occurs when a list of internal skins is changed and when SkinDirectory property is changed.

OnSysDlgInit occurs when a system dialog is opened, and contains such parameters as window Handle and AllowSkinning. The event allows to disable a skinning of custom dialog.