Appearance Settings

• Dec 11, 2024
• 5 minutes to read

This topic contains detailed information on application-wide appearance customization options available for DevExpress-powered applications.

Skins and Palettes

TdxSkinController is a non-visual component that allows you to configure application-wide appearance settings, such as skins, palettes, scrollbar-related options, etc. These look & feel settings are common to all DevExpress controls and forms except for TdxLayoutControl and the majority of Views in the TdxNavBar control. Since these controls have independent look & feel settings, you need to apply the same skin and palette to them to maintain the visual consistency of your application.

To manage global appearance settings in an application, you can add a TdxSkinController component to a form.

Multiple Skin Controllers

Multiple TdxSkinController instances share the same settings.

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.

Project Look & Feel Settings

If you do not need to switch between skins and palettes at runtime, you can use the Project Settings dialog to select the required skin and palette application-wide.

Main Skin Controller Settings

The list below outlines key members of the TdxSkinController class that allow you to configure application-wide appearance settings.

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.

ScrollMode | ScrollbarMode

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

SkinName | SkinPaletteName

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.

TouchMode

Specifies if Touch Mode is enabled.

Refer to the TdxSkinController class description for detailed information on all available options.

DevExpress Controls with Independent Skin Settings

Global appearance settings specified through a TdxSkinController component do not affect the Layout Control.

Toolbar UIs and Bar Manager

To apply global skin settings to a toolbar UI in your application, make sure that the TdxBarManger component’s Style property is set to bmsUseLookAndFeel.

Ribbon Control

The TdxRibbon control automatically updates its skin and palette settings from a TdxSkinController component in the application. To apply an individual skin and Microsoft Office-inspired color accent, set the Ribbon control’s UseGlobalSkin property to bFalse and use ColorSchemeName and ColorSchemeAccent properties.

Layout Control Skins

The TdxLayoutControl ships with the TdxLayoutSkinLookAndFeel component, which manages global appearance settings for layout controls, groups, and items in an application.

To ensure visual consistency of your application if it uses one or more layout controls, add a TdxLayoutSkinLookAndFeel component to your project and assign the component to the LayoutLookAndFeel property of all layout controls. Assign the TdxSkinController.SkinName property value to the component’s LookAndFeel.SkinName property to apply the skin defined at the global level to all associated layout controls.

If a vector skin is active, all affected layout controls use the color palette whose name is assigned to the TdxSkinController.SkinPaletteName property.

Skin Support in Navigation Bar Views

Only the following Views of the TdxNavBar control support global skin settings:

• Accordion
• Hamburger
• Skin Explorer Bar
• Skin Navigation Pane

Global skin settings have no effect on all other Navigation Bar Views because these views rely on their own draw routines.

DevExpress Skins and Standard/Third-Party VCL Components

The TdxSkinController component can also apply skins to the following standard VCL controls:

• TPanel
• TFrame
• TButton
• TCheckBox
• TDBCheckBox
• TRadioButton

Tip

While the TdxSkinController component supports these standard VCL controls, we recommend that you use their DevExpress counterparts to ensure the best user experience.

Skin Engine Ignore List and Related Events

The DevExpress Skin Engine applies skins both to DevExpress and standard controls from the supported list. The active skin affects even the standard controls used as part of third-party VCL controls and components, which may result in visual inconsistency. The DevExpress Skin Engine allows you to exclude certain forms and controls from active skin and palette effects.

Form-Level Ignored List

The TdxSkinIgnoredFormList class maintains a global ignore list of the DevExpress Skin Engine. The ignore list is prepopulated with a number of form classes shipped with popular third-party VCL components.

You can call TdxSkinIgnoredFormList.Add, TdxSkinIgnoredFormList.Remove, TdxSkinIgnoredFormList.Clear, and other methods to manage the list of ignored form classes.

Refer to the TdxSkinIgnoredFormList class description for detailed information on the ignored form list and related code examples.

Tip

Alternatively, you can handle the TdxSkinController.OnSkinForm event to leave certain forms unskinned.

Control-Level Ignored List

If you need to leave individual standard controls unskinned, handle the TdxSkinController.OnSkinControl event.

Skin 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.

Code Example: 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.UseSkins := True;
    dxSkinController1.NativeStyle := False;
    dxSkinController1.SkinName := 'WXICompact';
    dxSkinController1.SkinPaletteName := 'Sharpness';
  finally
    dxSkinController1.EndUpdate;
  end;

C++

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