How to Apply Skins in the Application
- 4 minutes to read
This topic describes how you can use skins in your application. Refer to the How to Apply Custom Skins in the Application topic, for tips on using custom skins.
To apply a skin to the application interface, do the following:
To apply skins to an entire application, use the TdxSkinController component. It affects all forms and skinnable controls that reside on them. Alternatively, you can use the TcxLookAndFeelController component to apply skins only to skinnable controls.
To apply skins to all forms, use the TdxSkinController component. If a form uses a custom WndProc method, we recommend that you inherit this form from TdxSkinForm to overcome possible skinning problems.
To apply a skin to a specific control, use the control’s LookAndFeel.SkinName property, as demonstrated in the following example:
// ...
uses
dxSkinProject1;
// ...
cxVerticalGrid1.LookAndFeel.SkinName := 'MySkin_iMaginary';
For the Ribbon control, the skin is specified via the Ribbon’s ColorSchemeName property:
// ...
dxRibbon1.ColorSchemeName := 'MySkin_iMaginary';
The following products require additional settings to be specified so that they can use skins:
ExpressQuantumGrid
To apply skins to grid level tabs, set the grid’s LevelTabs.Style property to 11, which corresponds to the Skin painting style of the ExpressPageControl.
ExpressBars
For traditional toolbars, set a bar manager’s Style property to bmsUseLookAndFeel and a status bar’s PaintStyle property to stpsUseLookAndFeel.
For the Ribbon, add the dxSkinsdxRibbonPainter unit to the ‘uses’ clause. For other controls skin painters are specified automatically, provided that the “Express Skins” design-time package is installed in the IDE.
ExpressPrinting System
To apply skins to ExpressPrinting System dialogs, use the TdxPSEngine.DialogsLookAndFeel and TdxPSEngineController.DialogsLookAndFeel properties.
ExpressNavBar
Set the TdxNavBar.ViewStyle property to SkinNavigationPaneView or SkinExplorerBarView. Then, use the TdxNavBar.ViewStyle.SkinName property to specify the skin.
To apply a skin in code and access its members (including the SkinName property), you have to cast the ViewStyle property, which designates a painter to be used for a TdxNavBar control, to a corresponding skin painter. For SkinNavigationPaneView and SkinExplorerBarView, the painter classes are TdxNavBarSkinNavPanePainter and TdxNavBarSkinExplorerBarPainter, respectively.
The following code example demonstrates how to assign the SkinName property when the SkinNavigationPaneView is applied to a TdxNavBar control.
uses
..., dxSkinsdxNavBarPainter;
// ...
TdxNavBarSkinNavPanePainter(dxNavBar1.ViewStyle).SkinName := 'Caramel';
Note
For groups with embedded controls (a group’s UseControl property is set to True), set the TdxNavBarGroupControl.UseStyle property to True to apply skins.
ExpressLayout Control
Drop the TdxLayoutLookAndFeelList component onto the form where the TdxLayoutControl resides.
Double-click the component to invoke the component designer.
Select the Skin or TcxLookAndFeel style and click OK to close the dialog.
Select the created style via the LayoutLookAndFeel property.
Use the created style’s LookAndFeel.SkinName property to assign a skin.
Alternatively, you can create a Skin or TcxLookAndFeel style directly via a layout control’s LayoutLookAndFeel property. To accomplish this, select one of the “Create a new LookAndFeel” options in the property’s dropdown list to invoke the component designer and set its properties as described above.
ExpressPageControl and ExpressTabControl
Apply the Skin painting style via the tabbed control’s Style or SetStyleByStyleName property.
Note
If you set a skinned tabbed control’s HideTabs property to False to hide tabs, control frames will be displayed without borders and shadows.
ExpressEditors Library
If skinning is used for a TcxFilterControl or TcxDBFilterControl, we recommend that you assign the default value to its Color property. Otherwise, the control’s background will be painted using the specified color, which may be inconsistent with the applied skin.
Skin Painter Units
The unit names that correspond to painters required by skinned controls are automatically added into the ‘uses’ clause, provided that the “ExpressSkins Library Uses Clause Auto Fill Helper” design-time package, and its satellite design-time packages are installed in the IDE. You have to manually update the ‘uses’ clause only if these design-time packages are not installed in the IDE, or you’re adding skin support at runtime.
All skinnable VCL controls and their corresponding skin painter units are listed in the following table.
| Control | Skin Painter Unit |
|---|---|
| ExpressBars (used standalone and within the ExpressSpreadSheet Suite) | dxSkinsdxBarPainter |
| ExpressDocking Library | dxSkinsdxDockControlPainter |
| ExpressNavBar | dxSkinsdxNavBarPainter |
| ExpressPrinting System dialogs | - |
| ExpressPageControl and ExpressTabControl used within the ExpressQuantumGrid, ExpressLayoutControl, ExpressBars, ExpressQuantumTreeList, and ExpressSpreadSheet Suites and ExpressPrinting System | dxSkinscxPCPainter |
| ExpressScheduler | dxSkinscxSchedulerPainter |
| Ribbon control (shipped with ExpressBars) | dxSkinsdxRibbonPainter |
| StatusBar (shipped with ExpressBars) | dxSkinsdxStatusBarPainter |
| Other controls | dxSkinsDefaultPainters |
Note
Compound controls that include other skinnable controls require corresponding skin painter units to be added to the ‘uses’ clause.