TdxSkinController Class
A component that manages global look & feel settings of an application built with DevExpress controls.
Declaration
TdxSkinController = class(
TcxCustomLookAndFeelController
)
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.
Tip
Alternatively, you can use the TdxSkinIgnoredFormList class to manage the global list of ignored form classes.
- 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 if the 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.
The dxSkinControllersList global variable provides indexed access to all TdxSkinController
components in the application.
Warning
We strongly recommend that you use only one TdxSkinController
component instance in your project. Do not place this component on child forms and frames.
Code Examples: Apply a Skin and its Palette
The following code example applies the WXICompact
skin and its Sharpness
palette to an application:
dxSkinController1.BeginUpdate;
try
dxSkinController1.UseSkins := True;
dxSkinController1.NativeStyle := False;
dxSkinController1.SkinName := 'WXICompact';
dxSkinController1.SkinPaletteName := 'Sharpness';
finally
dxSkinController1.EndUpdate;
end;
Alternatively, you can call the SetSkin procedure:
dxSkinController1.BeginUpdate;
try
dxSkinController1.NativeStyle := False;
dxSkinController1.SetSkin('WXICompact', 'Sharpness');
finally
dxSkinController1.EndUpdate;
end;