[Expand]General Information
[Collapse]WinForms Controls
  Prerequisites
 [Expand]What's Installed
 [Expand]Build an Application
 [Expand]Controls and Libraries
 [Collapse]Common Features
  [Expand]Data Binding Common Concepts
  [Expand]Data Source Wizard
  [Expand]Expressions
  [Expand]Behaviors
  [Collapse]Application Appearance and Skin Colors
    Default Application Font
    Appearances
   [Expand]Look And Feel and Skinning
    Glyph Skinning
  [Expand]Filtering UI Context
  [Expand]High DPI Support
  [Expand]Scaffolding Wizard
  [Expand]Formatting Values
   HTML Text Formatting
  [Expand]Menus
  [Expand]Tooltip Management
  [Expand]Saving and Restoring Layouts
   Clipboard - Copy and Paste Operations. Data Formatting
   Version Compatibility: Default Property Values
  Get More Help
 [Expand]API Reference
[Expand]ASP.NET Controls and MVC Extensions
[Expand]ASP.NET Bootstrap Controls
[Expand]ASP.NET Core Bootstrap Controls
[Expand]WPF Controls
[Expand]Xamarin Controls
[Expand]Windows 10 App Controls
[Expand]Office File API
[Expand]Reporting
[Expand]Report and Dashboard Server
[Expand]Dashboard
[Expand]eXpressApp Framework
[Expand]CodeRush
[Expand]CodeRush Classic
[Expand]Cross-Platform Core Libraries
[Expand]Tools and Utilities
 End-User Documentation
View this topic on docs.devexpress.com (Learn more)

Application Appearance and Skin Colors

This topic provides information on methods that allow you to change an application's and/or individual UI elements' appearance.

Global settings

Individual controls' appearance settings

Expanded Look-and-Feel

The Look-and-Feel settings are global style settings such as the default application font and skin. You can use the following approaches to specify these settings:

  • Use the Project Settings dialog (the recommended approach). To invoke this dialog, right-click a project in Visual Studio's Solution Explorer and select "DevExpress Project Settings".

  • Call the UserLookAndFeel class’s methods in code.

Individual controls inherit global Look-and-Feel settings from their parents (forms, user controls, panels, etc.) You can override these inherited settings if you access controls' LookAndFeel properties in code (hidden in the VS Property Grid). However, you should only override global Look-and-Feel settings to change a control's background (DevExpress controls v18.1 or older).

Expanded Appearance Objects

Individual controls provide Appearance properties that store AppearanceObject or AppearanceObjectEx class objects. These objects specify background, foreground and font settings that affect their parent control only.

For each supported visual state (normal, disabled, hovered, etc.) a control may provide individual Appearance settings.

Tip

The StyleController component allows you to specify Appearance settings for multiple editors at once.

Expanded Change individual controls' colors. Skin Colors

Starting with version 18.2 you can use Skin Colors as UI element background and/or foreground colors. At design time, switch to the "DX Skins" tab to choose a Skin Color.

The same Skin Color may vary in different skins and vector skins palettes (see the figure below).

To assign Skin Colors in code, retrieve them from the DevExpress.LookAndFeel.DXSkinColors.FillColors (for background only) or DevExpress.LookAndFeel.DXSkinColors.ForeColors (for foreground only) classes.

Important

When you set a Skin Color as a control's background, the foreground color is automatically adjusted to improve readability. Use the WindowsFormsSettings.AutoCorrectForeColor setting to disable this behavior.

DevExpress controls v18.2 and newer also allow you to assign custom colors directly to the AppearanceObject.BackColor (or AppearanceObject.BorderColor) property. For older DevExpress controls version you need to disable controls’ skins to do that.

You change the global WindowsFormsSettings.BackgroundSkinningMode setting to restore the behavior seen in versions 18.1 and earlier.

Because of that change introduced in version 18.2, DevExpress provides the WindowsFormsSettings.ForcePaintApiDiagnostics method that allows you to trace all Appearance settings that were not functional in versions prior than 18.2. See this method for more details.

Important

The following controls can highlight their background in skin themes by blending a custom background/border color with a skin element.

Control/Control's element Property/event to highlight the control
SimpleButton SimpleButton.Appearance.BackColor
GroupControl's caption and border GroupControl.Appearance.BorderColor and GroupControl.AppearanceCaption.BorderColor
XtraTabControl tab's background XtraTabPage.Appearance.Header.BackColor
DockPanel's caption and border DockPanel.Appearance.BorderColor
GridControl - Column header in Grid Views (GridView and descendants) GridColumn.AppearanceHeader.BackColor
GridControl - Band header in Banded Grid Views (BandedGridView and descendants) GridBand.AppearanceHeader.BackColor
TreeList - Column header TreeListColumn.AppearanceHeader.BackColor
TreeList - Band header TreeListBand.AppearanceHeader.BackColor
LayoutControl - Group's header background and border LayoutControlGroup.AppearanceGroup.BorderColor
LayoutControl - Tab's background LayoutControlGroup.AppearanceTabPage.BackColor
LayoutView (GridControl) - Card caption Handle the LayoutView.CustomCardStyle event and customize the e.Appearance.BorderColor property
PivotGridControl - Field header PivotGridField.Appearance.Header.BackColor
PivotGridControl - Column/row header Handle the PivotGridControl.CustomDrawFieldValue event and customize the e.Appearance.BackColor property.
DocumentManager - Document's caption in TabbedView Document.Appearance.Header.BackColor
DocumentManager - Document's caption in WidgetView and NativeMdiView Document.AppearanceCaption.BackColor
NavigationPane and TabPane - Tab headers NavigationPage.Properties.AppearanceCaption.BorderColor and TabNavigationPage.Properties.AppearanceCaption.BorderColor
Foreground Skin can be applied to any UI element that supports custom foreground colors.

Expanded Appearance Editor - Reuse appearance settings

The Appearance Editor allows you to customize, save, and apply appearance settings to objects at design time. Click the ellipsis button next to a control's Appearance property to invoke the Appearance Editor.

Customize the appearance settings and click the "Save As..." button to save these settings as a template.

You can access saved templates from the drop-down selector when you invoke the Appearance Editor for a control/visual element. To apply these settings to the current AppearanceObject, select a template and click "Apply".

Appearance styles are saved as .xml files to the “C:\Users\Public\Documents\DevExpress\AppearanceTemplates” folder. You can reuse saved appearance settings different Visual Studio.

Expanded Appearance Priority

Data Grid, Tree List and Vertical Grid Appearance properties return the AppearanceObjectEx class objects. This class provides the AppearanceOptionsEx.HighPriority property that allows you to change the Appearance priority. For instance, the following sample demonstrates how to prioritize cell appearance settings.

You can use this feature, for instance, to show Conditional Formatting rule appearances for selected Data Grid rows.

You can also handle custom draw and custom style events (GridView.RowStyle, GridView.RowCellStyle, GridView.CustomDrawCell, etc.) instead of changing the appearance priority because they have the highest priority.

Expanded Print and Export Appearances

DevExpress controls expose AppearancePrint properties that store appearance settings applied when the control is printed and/or exported. The AppearancePrint settings provide properties that specify whether printed/exported controls should use these unique appearances.

If these properties are set to false, printed and/or exported controls are the same as they appear on-screen. See Printing and Exporting for more information.

Is this topic helpful?​​​​​​​