TdxSkinController Class

A component that manages global look & feel settings of an application built with DevExpress controls.

Declaration

TdxSkinController = class(
    TcxLookAndFeelController
)

Remarks

A skin controller is a non-visual component that allows you to configure look & feel settings common to all DevExpress controls and apply skins both to forms and DevExpress controls.

Note

TdxLayoutControl and TdxRibbon controls have independent look & feel settings.

Refer to the following topic for detailed information on DevExpress controls with independent look & feel settings: Global Application Settings.

Main API Members

The list below outlines key members of the TdxSkinController class. These members allow you to manage the application’s global look and feel settings and switch between skins and color palettes.

Skin and Color Palette-Related API Members

GetFormSkin

Returns the name of the skin applied to the specified form.

NativeStyle

Specifies if DevExpress controls and application forms use operating system-dependent draw routines to render all UI elements. If this option is enabled, all skin and color palette settings have no effect.

OnSkinControl

Allows you to prevent the skin controller from applying the active skin to a supported standard VCL control.

OnSkinForm

Allows you to apply different skins to different forms in the application.

SkinName | SkinPaletteName | SetSkin

Specify skin and color palette applied to the application if the NativeStyle property is set to False. Only vector skins can switch between color palettes.

UseSkins | UseSkinsInPopupMenus

Specify if the selected skin affects controls, forms, and pop-up menus.

UseImageSet

Specifies the active skin element rendering mode for bitmap-based skins.

Miscellaneous Look & Feel Settings

FormCorners

Allows you to switch between corner shapes for skinned application forms.

RenderMode

Specifies the active render mode at the application level.

Note

This property affects only those DevExpress controls that support multiple render modes.

ScrollMode | ScrollbarMode

Allow you to switch between supported scrollbar types and scrolling modes for all controls that support them.

ShowFormShadow

Specifies if skinned application forms cast a shadow.

TouchMode

Specifies if Touch Mode is enabled.

General-Purpose API Members

Assign

Copies look & feel settings between skin controller components.

BeginUpdate | EndUpdate

Allow you to avoid excessive redraw operations during batch global look & feel setting changes.

PopulateSkinColorPalettes

Allows you to obtain the list of color palettes available for the active vector skin. Bitmap-based skins do not support color palettes.

Refresh

Redraws skinned forms and controls in the application.

Reset

Restores the default global look & feel settings.

Built-in Skin Name List

Vector Skins

Vector skin elements consist of SVG images that render sharply regardless of the current monitor DPI.

Tip

We recommend that you use vector skins for an application that targets multi-monitor and high-DPI environments. If a vector skin is active, you can also use the SkinPaletteName property to switch between color palettes available for the skin.

Microsoft Windows 11-Inspired Skins

WXI | WXICompact

Microsoft Office-Inspired Skins

Office2019Black | Office2019Colorful | Office2019DarkGray | Office2019White

Unique Skins Designed by DevExpress

TheBezier | Basic

Raster Skins

Raster skins consist of bitmap-based skin elements. The application stretches these elements at high monitor DPI, which may result in blurry UI elements. Raster skins do not support palettes.

Microsoft Office-Inspired Skins

Office2016Colorful | Office2016Dark | Office2013DarkGray | Office2013White | Office2010Black | Office2010Blue | Office2010Silver | Office2007Black | Office2007Blue | Office2007Green | Office2007Silver | Office2007Pink

Unique Skins Designed by DevExpress

DevExpressDarkStyle | DevExpressStyle | Black | Blue | Pumpkin | Springtime | Summer2008 | Valentine | Xmas2008Blue | Blueprint | Caramel | Coffee | Darkroom | DarkSide | Foggy | GlassOceans | HighContrast | iMaginary | Lilian | LiquidSky | LondonLiquidSky | McSkin | Metropolis | MetropolisDark | MoneyTwins | Sharp | SharpPlus | Stardust | TheAsphaltWorld | Whiteprint

Microsoft Visual Studio-Inspired Skins

VisualStudio2013Blue | VisualStudio2013Dark | VisualStudio2013Light | VS2010

Microsoft Windows 7-Inspired Skins

Seven | SevenClassic

Interaction with VCL Styles

The DevExpress Skin Engine and the VCL Styles technology are not compatible because they rely on different UI element rendering mechanisms.

Important

• We do not recommend that you use Embarcadero RAD Studio® VCL Styles in any application project that uses DevExpress controls.

• We strongly recommend that you use only DevExpress skins to ensure the best possible appearance of DevExpress-powered VCL applications.

Interaction with UI Glyphs

All SVG icons shipped with the DevExpress Icon Library include the following CSS style names that define corresponding SVG element colors: Red, Green, Blue, Yellow, Black, and White. DevExpress controls can use these CSS style names to apply the active vector skin palette to SVG glyphs to maintain contrast. You can disable or enable palette and glyph interaction application-wide or for individual UI glyphs and image lists.

Global Palette Interaction Settings

The following class properties allow you to disable or enable palette interaction for SVG glyphs application-wide:

TdxVisualRefinements.UseDisabledSkinPaletteForSVG

Specifies if UI elements apply the active vector skin palette to disabled state glyphs at the application level.

TdxVisualRefinements.UseEnabledSkinPaletteForSVG

Specifies if UI elements apply the active vector skin palette to enabled state glyphs at the application level.

Glyph and Image List Settings

Many UI elements allow you to load individual glyphs or assign glyphs stored in a TcxImageList component. You can use the following properties to explicitly enable or disable palette interaction for individual UI element glyphs or image lists:

TdxGPImage.UseDisabledSkinPaletteForSVG

Specifies if the active vector skin palette affects the stored SVG glyph for the disabled UI element state.

TdxGPImage.UseEnabledSkinPaletteForSVG

Specifies if the active vector skin palette affects the stored SVG glyph for the enabled UI element state.

TcxCustomImageList.UseDisabledSkinPaletteForSVG

Specifies if the active vector skin palette affects stored SVG glyphs for the disabled UI element state.

TcxCustomImageList.UseEnabledSkinPaletteForSVG

Specifies if the active vector skin palette affects stored SVG glyphs for the enabled UI element state.

Multiple Skin Controllers

An application project can include multiple TdxSkinController components that always share and manage the same global settings accessible through a RootLookAndFeel function call as well as the following global constants and variables:

cxIsTouchModeEnabled

Determines whether Touch mode is enabled in an application.

cxUseSkins

Specifies if a skin is applied to an application.

dxSkinFormCorners

Specifies the shape of form corners used by an application.

dxSkinShowFormShadow

Specifies if a skinned application form casts a shadow.

Note

The dxSkinControllersList global variable provides indexed access to all TdxSkinController components in the application.

Project Skin Options Editor

The TdxSkinController component ships with the Project Skin Options Editor dialog available at design time. You can invoke this dialog to manage skin-related packages in an application project and store all skin-related settings in a SKINCFG project file or the system registry.

Dialog UI Elements

Available skins

This box displays a scrollable list of all available design-time skin packages. The RAD Studio IDE automatically adds checked skin units to the uses clause of all units in the project that contain at least one DevExpress component with support for skins.

Default

This check box specifies if the Project Skin Options Editor dialog stores skin-related project settings in the system registry.

If this option is checked, the registry-stored skin settings become default for all new projects with DevExpress controls. If the current project skin settings do not match the default settings, the Default check box is grayed.

Enable skin support

This check box specifies if the RAD Studio IDE automatically adds skin and skin painter units to the uses clause of all opened units with DevExpress controls in the current project.

If this option is checked, the RAD Studio IDE adds all units that implement all skins checked in the Available skins box.

Notify about new skins

This check box specifies if the Project Skin Options Editor automatically appears when you open a project with DevExpress components after you upgrade to a component version that contains new skins.

Note

If this option is unchecked, the Project Skin Options Editor dialog never appears automatically after a component version upgrade. In this case, the RAD Studio IDE automatically adds all new skin units to your project’s uses clause only if all skins were checked in the Available skins box before the upgrade.

OK | Cancel

Apply or discard all pending changes and close the dialog.

Select All | Select None

Allow you to check or uncheck all skins in the Available skins box.

Invoke the Editor Dialog

To invoke the Project Skin Options Editor dialog, you can do the following:

• Double-click a TdxSkinController component or click Modify Project Skin Options in its context menu.
• Click Project | Modify Skin Options in the main menu of your RAD Studio IDE.

In addition, the Project Skin Options Editor dialog appears automatically before the RAD Studio IDE updates the uses clause in a unit if one of the following conditions is met:

• The project does not have a SKINCFG file.
• The list of available skins has expanded after you upgraded to a newer version of DevExpress components and the Notify about new skins option is enabled. The dialog highlights and enables all new skins in the Available skins box.

Code Examples: Apply a Skin and its Palette

The following code example applies the WXICompact skin and its Sharpness palette to an application:

Delphi

  dxSkinController1.BeginUpdate;
  try
    dxSkinController1.NativeStyle := False;
    dxSkinController1.SkinName := 'WXICompact';
    dxSkinController1.SkinPaletteName := 'Sharpness';
  finally
    dxSkinController1.EndUpdate;
  end;

C++

  dxSkinController1->BeginUpdate();
  try
  {
    dxSkinController1->NativeStyle = false;
    dxSkinController1->SkinName = "WXICompact";
    dxSkinController1->SkinPaletteName = "Sharpness";
  }
  __finally
  {
    dxSkinController1->EndUpdate();
  }

Alternatively, you can call the SetSkin procedure:

Delphi

  dxSkinController1.BeginUpdate;
  try
    dxSkinController1.NativeStyle := False;
    dxSkinController1.SetSkin('WXICompact', 'Sharpness');
  finally
    dxSkinController1.EndUpdate;
  end;

C++

  dxSkinController1->BeginUpdate();
  try
  {
    dxSkinController1->NativeStyle = false;
    dxSkinController1->SetSkin("WXICompact", "Sharpness");
  }
  __finally
  {
    dxSkinController1->EndUpdate();
  }

Inheritance

TObject

TPersistent

TComponent

TcxCustomComponent

TcxLookAndFeelController

TdxSkinController