Overview

See Also Known Issues and Important Changes List

Skins allow you to create visually exciting interfaces for Developer Express controls. A skin contains bitmaps showing all control elements in their various states (normal, hot-tracked, selected, pressed, etc.). Since each control is painted using the corresponding bitmap, the appearance of the entire skinned application does not generally depend on the Operating System. By using skins you can introduce the XP look and feel experience into applications that are not running the XP OS.

The ExpressSkins Library adds skin support to forms , standard message dialogs and boxes , and the following VCL controls: ExpressQuantumGrid v6 , ExpressBars v6 , ExpressScheduler v2 and v3 , ExpressPivotGrid , ExpressQuantumTreeList v4 , ExpressVerticalGrid , ExpressNavBar v1 and v2 , ExpressLayout Control , ExpressEditors Library , ExpressPageControl , and ExpressDocking Library .

Creating Skins

The ExpressSkins Library ships with the following built-in skins: Caramel, Coffee, Glass Oceans, iMaginary, Lilian, LiquidSky, LondonLiquidSky, McSkin, Money Twins, Startdust, Black, Blue, Silver, Office2007Black, Office2007Blue, Office2007Silver, Office2007Green, Office2007Pink, Valentine, and Xmas2008Blue. You are free to apply them, or create new skins based on our built-in skins using the Skin Editor, shipped with the ExpressSkins Library. Refer to the How to Create Skins Using the Skin Editor help topic to learn more.

Skin Store

Skins can be stored in:

  • Resource files along with application projects. To streamline the distribution of skinned applications, skins are added into the compiled executables.

  • Binary files, which can be dynamically loaded at runtime.

Applying Skins

To apply a skin to an entire application built with Developer Express controls, use our TdxSkinController or TcxLookAndFeelController component, and assign its SkinName property.

To apply a skin to a control, use the control’s LookAndFeel.SkinName property. For ExpressEditors, use the Style.LookAndFeel.SkinName property. To learn more, see the How to Apply Skins in the Application help topic.

Important Note: The ExpressSkins Library requires the Microsoft GDI+ library to be installed. Gdiplus.dll is included with Windows XP. GDI+ is available as a redistributable file for Windows NT 4.0 SP6, Windows 2000, Windows 98, and Windows Me. To download the latest redistributable, see http://www.microsoft.com/downloads/details.aspx?FamilyID=6a63ab9c-df12-4d41-933c-be590feaa05a&DisplayLang=en.


Skin Editor UI

Product Groups See Also

The Skin Editor is a tool designed to help you prepare skins for Developer Express controls.

Its interface is divided into four sections:

  • The Product groups pane

  • The Preview pane

  • The Additional properties pane

  • The Element editor pane

Product groups

Represents the hierarchical structure of the current project. With the Product groups pane, you can:

  • Explore skin elements by products or by groups. Groups contain skin elements (such as scroll buttons or size grips) that are used in several controls.

  • Activate a skin (show it within the Preview pane). For this purpose, double-click the desired skin’s name or press the Enter key when the skin name is selected.

  • Select a skin element to modify its settings in the Element editor pane. To do this, click the desired element (or use arrow keys).

Preview

Displays samples of skinned controls. It allows you to see a live preview of changes you have made to skins.

Additional properties

Provides access to settings common to all skin elements. Settings in this pane are organized into three tabs:

  • The Colors tab provides access to the skin properties of the Color type.

  • The Properties tab provides access to properties that belong to the entire control or to the skin group.

  • The Additional tab provides access to properties that don’t fall into any of the previous categories.

Refer to the Product Groups help topic, for a complete list of product groups, built-in skin elements and properties available in the Skin Editor.

Element editor

Includes the skin composition area and skin properties window.

The skin composition area is the main design workspace. It contains the following elements (as they are displayed from top to bottom):

  • Margins editors – a group of spin editors, which allow you to specify boundaries of an image's areas to be stretched when an associated skin element is being painted.

  • Zooming radio buttons – these buttons allow you to enlarge the currently selected image to different levels of detail.

  • Zoomed image – allows you to closely examine an image. To open it in an editor or viewer associated with this image file type, double-click the image. To create a file association, or choose a program to open the image file, double-click the image while holding down the Ctrl key.

  • State combo box – allows you to choose the element state to see an image that will be used to show this state.

  • Section index spin editor – allows you to select an image contained in the composite image by its index to see it in the skin properties window’s Preview tab. For instance, consider the ScrollButton element from the Common group. Using the spin editor, you can navigate through glyphs, which will be used to paint up and down scroll arrows in horizontal and vertical scroll bars.

  • Paths to the image and glyph files. Images can be addressed in either of two ways:

    • A virtual path to the image, if the image is contained in the resource file. If you need to extract the image from the resource (for instance, in order to invoke an image viewer or an image editor from within the area), double-click the image displayed in the skin composition area. This automatically creates a structure of folders in the project root folder – folders for skins, and in each skin folder, subfolders for skin element groups. These subfolders contain image and glyph files.

    • A full path to the image, if the image is not currently included in the resource file (a newly assigned image) or it was extracted from the resource. To assign a new image (images of both BMP and PNG formats are supported) to the skin element, either enter the full path or click the Load Image (Load Glyph) button to select the image using the Open File dialog. Alternatively, simply drag the image from the source folder and drop it onto the skin composition area. Note that if an image or a glyph is not specified for the skin element, the element is painted with the color specified by the Color or TextColor property (see the Properties tab in the skin properties window).

The skin properties window provides access to individual settings of a specific skin element. It is comprised of three tabs:

The Properties tab provides access to the skin element’s default properties. These include:

Property

Meaning

Alpha

The transparency level for the skin element.

Borders

Border settings for the skin element.

Color

The skin element’s color.

ContentOffset

The padding for the skin element’s content.

Glyph

The skin element's glyph settings.

Image

The skin element's image settings.

ImageCount

The number of sections in the composite image associated with the skin element.

MinSize

The skin element’s minimum size.

Name

The skin element’s name.

TextColor

The text color for the skin element.

The Preview tab displays the live preview of the skin element.

The Additional tab allows you to add custom properties for the skin element.


Known Issues and Important Changes List

Overview

All entries in the following list are grouped by Builds, in reverse order.

Build 35

1. The TdxSkinImage class was extended with Gradient, GradientBeginColor, and GradientEndColor properties allowing you to use a solid or gradient filling in skin element images. Using these fill styles, you can greatly improve skinning performance in your applications, because bitmap operations are substituted with faster drawing routines:

  • Solid Fill Style. In effect only if the GradientBeginColor property is assigned a value other than clNone. The property value specifies the fill color.

  • Gradient Fill Style. In effect if both the GradientBeginColor and GradientEndColor properties are assigned a value other than clNone. These properties specify the gradient’s start and end colors. The Gradient property specifies the gradient fill type.

You can specify these properties via a skin element's Image or Glyph property. Glyph filling is not supported – changes to the Gradient, GradientBeginColor, and GradientEndColor properties made via the Glyph property are ignored.

Note: Filling is performed in an image's central section, bordered by margins. Horizontal and vertical gradient fill types (gmHorizontal and gmVertical) are slightly faster than diagonal fill types (gmForwardDiagonal and gmBackwardDiagonal).

2. Each Skin.xml file in skin projects now contains the Parent XML attribute, which stores the name of the skin used as a template. If this attribute is specified, and a custom skin misses skin elements, colors, or properties from the template skin, they are automatically loaded from the template skin. This allows you to easily update your skin projects to new Builds, without having to manually copy into your projects new or modified skin attributes introduced by these Builds.

To update your existing skin projects to Build 35 or later, do the following:

  • In a project’s Skin.xml files, add the Parent XML attribute to the dxSkin XML element as shown below:

<dxSkin Version="1" Name="MySkin_Caramel1" Parent="Caramel">

  • Save changes to Skin.xml files.

  • Open the project in the Skin Editor and save it.

After this, Skin.xml files will contain only modified skin elements, colors, and properties, including all changes made to the template skin.

3. Now the borders of TPanel controls are skinned as TcxGroupBox borders.

4. In skinned TcxGroupBox controls, you can now remove the non-client area displayed above the header. To accomplish this, assign False to the cxGroupBox_SupportNonClientArea constant defined in the cxGroupBox unit.

Build 34

1. Now each built-in skin represents a module (a set of resource files and packages containing skin definition data). To make a built-in skin available within the IDE, all you need to do is to load a corresponding design-time package via the Component | Install Packages menu item. By default, all design-time packages are loaded.

You can click check boxes to load/unload skin packages. After this, you can remove unnecessary skin units from the ‘uses’ clause in your projects, and recompile them.

This modular architecture allows you to do the following:

  • Easily customize the skin environment for your applications at design time.

  • Decrease an application’s executable size by including only the required built-in skins.

2. Now you can dynamically load skins to reduce memory usage of skinned applications. To accomplish this, do the following:

  • In the Skin Editor, save skin projects to binary files (.SKINRES files).

  • Call the dxSkinsUserSkinLoadFromFile global function to load skins from .SKINRES files. To load skins from streams, call the dxSkinsUserSkinLoadFromStream global function.

  • To apply the loaded skin, set the skin controller’s SkinName property to ‘UserSkin’.

This allows you to have only one skin loaded in your application at a time, provided that you don’t use built-in and custom skin units.

Build 32

In skinned tabbed controls with hidden tabs (the tabbed control’s HideTabs property is set to False), control frames are displayed without borders and shadows.

Build 30

1. In the dxSkinsdxNavBarPainter unit, the dxNavBarSkinView and dxNavBarSkinExplorerView constants, which identify skinned TdxNavBar views, have been renamed to dxNavBarSkinNavigatorPaneView and dxNavBarSkinExplorerBarView, respectively.

2. The TdxNavBarSkinBarPainter painter class for the SkinNavigationPaneView has been renamed to TdxNavBarSkinNavPanePainter.


Bars

Product Group Navigator Common Members

Elements

Additional Properties

Bar

BarCustomize

BarCustomizeVertical

BarDragGrip

BarDragGripVertical

BarSeparator

BarSeparatorVertical

BarVertical

Dock

FloatBar

LinkSelected

LinkStatic

MainMenu

MainMenuLinkSelected

MainMenuVertical

PopupMenu

PopupMenuCheck

PopupMenuDropDownButtonArrow

PopupMenuDropDownButtonLabel

PopupMenuExpandButton

PopupMenuLinkSelected

PopupMenuSeparator

PopupMenuSideStrip

PopupMenuSideStripNonRecent

ScreenTipSeparator

ScreenTipWindow

StatusBar

DisabledTextColor

ScreenTipWindow.ScreenTipItem

ScreenTipWindow.ScreenTipTitleItem


Common

Product Group Navigator

Elements

Colors

Button

GroupPanel

GroupPanelBottom

GroupPanelCaptionBottom

GroupPanelCaptionLeft

GroupPanelCaptionRight

GroupPanelCaptionTop

GroupPanelLeft

GroupPanelNoBorder

GroupPanelRight

GroupPanelTop

Header

HeaderSpecial

ScrollButton

ScrollContentHorz

ScrollContentVert

ScrollThumbHorz

ScrollThumbVert

SizeGrip

Splitter

SplitterHorz

ContainerBorderColor

ContainerHighlightBorderColor

ContentColor

ContentEvenColor

ContentOddColor

DockControlHiddenBarTextColor

HeaderBackgroundColor

HeaderBackgroundTextColor

LayoutControlColor

SelectionColor

SelectionTextColor

Additional Properties

Button.DisabledText


Docking

Product Group Navigator Common Members

Elements

Additional Properties

AutoHideBar

AutoHideBarBottom

AutoHideBarLeft

AutoHideBarRight

DockWindowBorder

DockWindowButton

DockWindowButtonGlyphs

DockWindowCaption

TabHeader

TabHeaderAutoHideBar

TabHeaderBackground

TabHeaderLine

ActiveTabHeaderDownGrow

ActiveTabHeaderHGrow

ActiveTabHeaderUpGrow

DockWindowCaption.InactiveCaptionTextColor

TabHeaderTextColor

TabHeaderTextColorActive


Editors

Product Group Navigator Common Members

Elements

Additional Properties

Checkbox

ClockFace

ClockGlass

CloseButton

ComboButtonGlyph

EditorButton

Navigator

ProgressBorder

ProgressBorderVert

ProgressChunk

ProgressChunkVert

RadioButton

SpinDownGlyph

SpinLeftGlyph

SpinRightGlyph

SpinUpGlyph

TrackBarThumb

TrackBarThumbBoth

TrackBarThumbUp

TrackBarThumbVert

TrackBarThumbVertBoth

TrackBarThumbVertUp

TrackBarTrack

TrackBarTrackVert

BackgroundColor

BackgroundDisabledColor

EditorButton.DisabledText

TextColor

TextDisabledColor


Form

Product Group Navigator Common Members

Elements

Additional Properties

FormButtonClose

FormButtonHelp

FormButtonMaximize

FormButtonMinimize

FormButtonRestore

FormCaption

FormContent

FormFrameBottom

FormFrameLeft

FormFrameRight

SmallFormButtonClose

SmallFormCaption

FormCaption.FontDelta

TextColorInactive

TextShadowColor


Grid

Product Group Navigator Common Members

Elements

CardSeparator

FilterButton

FilterButtonActive

FooterCell

FooterPanel

GridFilterPanel

GridFixedLine

GridGroupPanel

GridLine

GroupRow

IndicatorImages

PlusMinus


NavBar

Product Group Navigator Common Members

Elements

Background

GroupClient

GroupCloseButton

GroupHeader

GroupOpenButton

Item


NavPane

Product Group Navigator Common Members

Elements

Caption

CollapseButton

CollapsedGroupClient

ExpandButton

GroupButton

GroupButtonSelected

GroupClient

Item

ItemSelected

OverflowPanel

OverflowPanelExpandItem

OverflowPanelItem

PopupBorder

PopupSizeGrip

ScrollDownButton

ScrollUpButton

Splitter


PageControl

Product Group Navigator Common Members

Elements

Additional Properties

TabButtonHorz

TabButtonVert

TabHeader

TabPane

RowIndentFar

RowIndentNear

SelectedHeaderDownGrow

SelectedHeaderHGrow

SelectedHeaderUpGrow

TabHeader.TextColor

TabHeader.TextColorActive

TabHeader.TextColorDisabled

TabHeader.TextColorHot


Ribbon

Product Group Navigator Common Members

Elements

Additional Properties

AppMenuBackground

AppMenuBackgroundBottom

Button

ButtonArrow

ButtonGroup

ButtonGroupButton

ButtonGroupSeparator

DialogFrameBottom

DialogFrameLeft

DialogFrameRight

DropDownGalleryBackground

DropDownGalleryGroupHeader

DropDownGallerySizeGrip

DropDownGallerySizePanel

FormAppButton

FormCaption

FormFrameBottom

FormFrameLeft

FormFrameRight

InRibbonGalleryButtonDown

InRibbonGalleryButtonDropDown

InRibbonGalleryButtonUp

InRibbonGalleryPane

LargeButton

LargeSplitButtonBottom

LargeSplitButtonTop

QATAboveBackground

QATBelowBackground

QATButtonGlyph

QATCustomizeButton

QATInRibbonBackground

QATOverflow

SplitButtonLeft

SplitButtonRight

StatusBarBackground

StatusBarButton

StatusBarSeparator

Tab

TabBackground

TabGroup

TabGroupButton

TabGroupCaption

TabGroupCollapsed

TabGroupCollapsedBox

TabHeaderDownGrow

TabPanel

AppMenuExtraPaneColor

ButtonDisabled

FormAppButton.RightIndent

FormCaption.DocumentNameTextColor

FormCaption.FontDelta

FormCaption.TextColorInactive

QATAboveBackground.DisplayCustomizeButtonOutsideQAT

QATAboveBackground.IndentBeforeCustomizeButton

QATInRibbonBackground.DisplayCustomizeButtonOutsideQAT

QATInRibbonBackground.IndentBeforeCustomizeButton

QATInRibbonBackground.Offset

StatusBarButton.TextColor

StatusBarButton.TextColorDisabled

StatusBarButton.TextColorHot

Tab.TextColorSelected

TabHeaderDownGrow


Scheduler

Product Group Navigator Common Members

Elements

Additional Properties

AllDayArea

AllDayAreaSelected

Appointment

AppointmentBottomShadow

AppointmentMask

AppointmentRightBorder

AppointmentRightShadow

CurrentTimeIndicator

DefaultTimeLine

MoreButton

NavButtonNext

NavButtonNextArrow

NavButtonPrev

NavButtonPrevArrow

Ruler

TimeGridHeader

TimeGridHeaderSelected

Appointment.BorderSize

Appointment.SeparatorColor

NavigatorColor


VerticalGrid

Product Group Navigator Common Members

Elements

BandBorder

Category

GridLine


How to Add Custom Colors and Properties to Skins

Overview See Also

Skins are shipped with the pre-defined (default) elements, properties, and colors. You are free to change them, or add custom elements via the Skin Editor, or programmatically.

This topic describes how you can add custom colors and properties (also called skin members) to skins, and access these elements in code. Refer to the How to Add Custom Elements to Skins help topic, to learn more.

Skins are shipped with the pre-defined (default) properties and colors. You are free to change them, as well as add your own via the Skin Editor or programmatically.

To add custom colors and properties to a skin via the Skin Editor, click the Add button in:

  • A corresponding tab in the Additional properties pane to add a skin member to the entire skin or to the currently selected product group.

  • The Additional tab of a skin element’s properties window to add a skin member to the currently selected skin element.

This will open a window prompting you for a unique property name and its type.

To delete colors and properties (including the default ones), select the desired property or color and click the Delete button.

Please refer to the Skin Editor UI help topic to learn more about the Skin Editor.

In code, you can use the following methods to perform the same tasks.

Objective

Method

Applies To

Adding skin members

AddColor

AddProperty

Skin

Skin, product group, or skin element

Accessing skin members

GetColorByName

GetPropertyByName

Skin

Skin, product group, or skin element

Deleting skin members

DeleteProperty

Skin, product group, or skin element

The following code example demonstrates how to add new skin members (Common.PreviewTextColor and Form.FormCaption.TextShadowOffset) based on the default Common.SelectionColor color and the Form.FormCaption.FontDelta property.

// Delphi

uses

..., dxSkinsCore, cxLookAndFeelPainters, dxSkinsLookAndFeelPainter;

var

APainter: TcxCustomLookAndFeelPainterClass; APainterInfo: TdxSkinLookAndFeelPainterInfo; ASkin: TdxSkin; AFormGroup: TdxSkinControlGroup; ACommonSelectionColor: TColor; ANewSkinProperty: TdxSkinIntegerProperty;

begin

// Getting a painter that corresponds to the MySkin_MoneyTwins1 skin

if GetExtendedStylePainters().GetPainterByName('MySkin_MoneyTwins1', APainter) then

begin

// Getting a painter's skin data

GetExtendedStylePainters().GetPainterData(APainter, APainterInfo); ASkin := APainterInfo.Skin;

// Getting the Common.SelectionColor value

ACommonSelectionColor := ASkin.GetColorByName('SelectionColor').Value;

// Adding the Common.PreviewTextColor color

ASkin.AddColor('PreviewTextColor', ACommonSelectionColor);

// Getting the Form.FormCaption skin element

AFormGroup := ASkin.GetGroupByName('Form');

with AFormGroup.GetElementByName('FormCaption') do

begin

// Creating the Form.FormCaption.TextShadowOffset property to store integer values

ANewSkinProperty :=

TdxSkinIntegerProperty(AddProperty('TextShadowOffset', TdxSkinIntegerProperty));

// Assigning the property value based on the Form.FormCaption.FontDelta property value

ANewSkinProperty.Value :=

TdxSkinIntegerProperty(GetPropertyByName('FontDelta')).Value + 1;

end;

end;

end;

After this, you can use the Common.PreviewTextColor and Form.FormCaption.TextShadowOffset skin members when implementing new appearance options, in control painters built with the Skin Editor.


How to Add Custom Elements to Skins

Overview See Also

Skins are shipped with the pre-defined (default) elements, properties, and colors. You are free to change them, or add custom elements via the Skin Editor, or programmatically.

This topic describes how you can add custom elements to skins, and access these elements in code. Refer to the How to Add Custom Colors and Properties to Skins help topic, to learn more.

In skins, elements are divided into groups according to target products, common use, etc. To add custom elements to a group via the Skin Editor, select the group or one of its elements, and click the Add Element toolbar button or the Project | Add Element menu item.

This will open a window prompting you for a unique element name.

To add the element to all skins within a project, check a corresponding option in this window.

To delete skin elements, select the desired skin element, and click the Delete Element toolbar button or the Project | Delete Element menu item.

Please refer to the Skin Editor UI help topic, to learn more about the Skin Editor.

In code, you can use the following product group methods to perform the same tasks.

Objective

Method

Adding skin elements

AddElement, AddElementEx

Accessing skin elements

Elements, GetElementByName

Deleting skin elements

Delete, RemoveElement

The following code example demonstrates how to manage custom skin elements.

// Delphi

uses

..., dxSkinsCore, cxLookAndFeelPainters, dxSkinsLookAndFeelPainter;

var

APainter: TcxCustomLookAndFeelPainterClass; APainterInfo: TdxSkinLookAndFeelPainterInfo; ASkin: TdxSkin; AFormGroup: TdxSkinControlGroup; AFormLogo, AFormLegacyLogo: TdxSkinElement;

begin

// Getting a painter that corresponds to the MySkin_MoneyTwins1 skin

if GetExtendedStylePainters().GetPainterByName('MySkin_MoneyTwins1', APainter) then

begin

// Getting a painter's skin data

GetExtendedStylePainters().GetPainterData(APainter, APainterInfo); ASkin := APainterInfo.Skin;

// Getting the Form product group

AFormGroup := ASkin.GetGroupByName('Form');

// Adding a Form.FormLogo skin element

AFormLogo := AFormGroup.AddElement('FormLogo');

// Getting the Form.FormLegacyLogo element

AFormLegacyLogo := AFormGroup.GetElementByName('FormLegacyLogo');

if AFormLegacyLogo <> nil then

begin

// Assigning Form.FormLogo element properties from the Form.FormLegacyLogo element

AFormLogo.Assign(AFormLegacyLogo); AFormGroup.RemoveElement(AFormLegacyLogo);

end;

end;

end;

After this, you can use the Form.FormLogo skin element when implementing new appearance options, in control painters built with the Skin Editor.


How to Apply Custom Skins in the Application

Overview See Also

This topic describes how you can use custom skins (created with the Skin Editor) in your application.

The Skin Editor saves skin design in the following files:

  • A compiled resource file (a .RES file) – contains all the skins created in the Skin Editor.

  • A unit file (a .PAS file) – contains a link to the resource, and specifies names for skins contained in the resource file (the specified skin names are the same as defined in the Skin Editor).

  • Delphi and C++ Builder package files (.DPK, .BPK, and .CPP files) – required to make the newly created skins available in the IDE.

To apply new skins to the application interface, do the following:

  • Place the generated .RES and .PAS files into your application project’s folder (or specify the path to the project folder via the Add to Project file dialog in your IDE). Specify the unit name in the ‘uses’ clause of your application.

  • Install the generated skin packages into the IDE.

After this, you can use any of the methods described in the How to Apply Skins in the Application topic to apply the skins.


How to Apply Skins in the Application

Overview See Also

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 a skin to a specific control, use the control’s LookAndFeel.SkinName property, as demonstrated in the following example:

// Delphi

// ...

uses

dxSkinProject1;

// ...

cxVerticalGrid1.LookAndFeel.SkinName := 'MySkin_iMaginary';

For the Ribbon control, the skin is specified via the Ribbon’s ColorSchemeName property:

// Delphi

// ...

dxRibbon1.ColorSchemeName := 'MySkin_iMaginary';

The following products require additional settings to be specified so that they can use skins:

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.

ExpressDocking Library

Set the TdxDockingManager.ViewStyle property to vsUseLookAndFeel.

ExpressNavBar

Set the TdxNavBar.ViewStyle property to SkinNavigationPaneView (or SkinExplorerBarView). Then, use the TdxNavBar.ViewStyle.SkinName property to specify the skin.

Because the ViewStyle property designates a painter to be used for a TdxNavBar control, you have to cast this property to a corresponding painter class to access its members. For the 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 v1 control.

// Delphi

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.

  • In the component designer, add the skin style to the component.

  • Use the TdxLayoutLookAndFeelList.SkinName property to assign a skin.

  • Link the component to the TdxLayoutControl via the TdxLayoutControl.LookAndFeel property.

ExpressPageControl and ExpressTabControl

Apply the Skin painting style via the tabbed control’s Style or SetStyleByStyleName property.

Note: In skinned tabbed controls with hidden tabs (the tabbed control’s HideTabs property is set to False), control frames are 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.

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 v6

dxSkinsdxBarPainter

ExpressDocking Library

dxSkinsdxDockControlPainter

ExpressLayout Control

dxSkinsdxLCPainter

ExpressNavBar v1

dxSkinsdxNavBarPainter

ExpressNavBar v2

dxSkinsdxNavBar2Painter

ExpressPageControl and ExpressTabControl (shipped with the ExpressQuantumGrid v6 Suite)

dxSkinscxPCPainter

ExpressScheduler v2

dxSkinscxSchedulerPainter

ExpressScheduler v3

dxSkinscxScheduler3Painter

Ribbon control (shipped with ExpressBars)

dxSkinsdxRibbonPainter

StatusBar (shipped with ExpressBars)

dxSkinsdxStatusBarPainter

Other controls

dxSkinsDefaultPainters


How to Create Skins Using the Skin Editor

Overview See Also

This topic describes how you can create skins using the Skin Editor.

The Skin Editor shipped with the ExpressSkins Library allows you to create new skins, and build resource and unit files to incorporate these skins into your applications.

To create a skin from scratch, perform the following steps:

1. Run the Skin Editor.

2. Create a new project. To do this, click the New button in the toolbar, or select ‘New’ in the File menu.

3. In the ‘New project’ dialog, specify the project name, its location, the template skin and the name of the new skin. You can have as many skins in a single project as you desire. Use the Project menu to invoke the Project Manager, which will help you manage skins within your project.

4. Customize the appearance aspects of control elements by loading images and glyphs for corresponding elements, and changing image properties as your needs dictate.

5. Once you've completed your modifications, click ‘Build’ in the Project menu to create the resource and unit files that contain the generated skins and skin registration routines. These files will have the same name as the project, and can be found at the project location.

Refer to the How to Apply Custom Skins in the Application help topic to learn how to use a newly created skin.


TdxSkinController

TdxSkinController Object

Hierarchy Properties Methods Events

Represents a component that provides a convenient way to apply skins to an entire application built with Developer Express controls.

Unit

dxSkinsForm

TdxSkinController = class( TcxLookAndFeelController )

Description

The TcxLookAndFeelController and TdxSkinController allow you to access root look and feel settings that are common to all Developer Express controls (TcxControl descendants). Unlike its ancestor TcxLookAndFeelController, the TdxSkinController allows you to apply skins both to forms and Developer Express controls on them.

The TdxSkinController class introduces members that allow you to:

  • Switch between skinned and standard look and feel options (UseSkins).

  • Specify the skin to be applied to a form and specific controls (OnSkinForm and OnSkinControl).

  • Determine the skin that is applied to a specific form (GetFormSkin).

  • Repaint all skinned forms and controls (Refresh).


dxSkinsForm Unit Overview

dxSkinsForm Unit

Components

TdxSkinController

Global Variables

dxSkinControllersList


.topic 0x10000000
 Legend
   Protected
   Published
   ReadOnly


Bars.Bar

Bar

A horizontally docked toolbar.

To provide images for floating and vertically docked toolbars, use the Bars.FloatBar and Bars.BarVertical skin elements.


Bars.BarCustomize

BarCustomize

In horizontally docked toolbars, a dropdown button that is used to invoke the Quick Customization Popup Menu.

This skin element provides two images and corresponding glyphs that represent the following button states:

  1. Normal

  2. Hot-tracked

To provide images and corresponding glyphs for dropdown buttons in vertically docked toolbars, use the Bars.BarCustomizeVertical skin element.


Bars.BarCustomizeVertical

BarCustomizeVertical

In vertically docked toolbars, a dropdown button that is used to invoke the Quick Customization Popup Menu.

This skin element provides two images and corresponding glyphs that represent the following button states:

  1. Normal

  2. Hot-tracked

To provide images and corresponding glyphs for dropdown buttons in horizontally docked toolbars, use the Bars.BarCustomize skin element.


Bars.BarDragGrip

BarDragGrip

A horizontally docked toolbar’s drag grip.

To provide images and corresponding glyphs for drag grips in vertically docked toolbars, use the Bars.BarDragGripVertical skin element.


Bars.BarDragGripVertical

BarDragGripVertical

A vertically docked toolbar’s drag grip.

To provide images and corresponding glyphs for drag grips in horizontally docked toolbars, use the Bars.BarDragGrip skin element.


Bars.BarSeparator

BarSeparator

A group separator in horizontally docked toolbars.

To provide images for group separators in vertically docked toolbars and popup menus, use the Bars.BarSeparatorVertical and Bars.PopupMenuSeparator skin elements.


Bars.BarSeparatorVertical

BarSeparatorVertical

A group separator in vertically docked toolbars.

To provide images for group separators in horizontally docked toolbars and popup menus, use the Bars.BarSeparator and Bars.PopupMenuSeparator skin elements.


Bars.BarVertical

BarVertical

A vertically docked toolbar.

To provide images for floating and horizontally docked toolbars, use the Bars.FloatBar and Bars.Bar skin elements.


Bars.DisabledTextColor

DisabledTextColor

Use this property to specify the text color for disabled bar items.


Bars.Dock

Dock

A container for docked toolbars.


Bars.FloatBar

FloatBar

A floating toolbar’s background.

To provide images for horizontally and vertically docked toolbars, use the Bars.Bar and Bars.BarVertical skin elements.


Bars.LinkSelected

LinkSelected

Use this skin element to provide images for clickable item controls, such as buttons and submenu items.

This skin element provides five images that represent the following item states:

  1. Hot-tracked

  2. Pressed

  3. Normal (*)

  4. Hot-tracked (*)

  5. Pressed (*)

(*) applies to toggle buttons whose Down property is set to True.


Bars.LinkStatic

LinkStatic

This skin element is applied to:

  • status bar panel

  • static text displayed in a toolbar whose SizeGrip property is set to True.


Bars.MainMenu

MainMenu

A horizontally docked main menu’s background.

To provide images for vertically docked main menus, use the Bars.MainMenuVertical skin element.


Bars.MainMenuLinkSelected

MainMenuLinkSelected

A highlight bar for a main menu item that is currently selected or hot-tracked.


Bars.MainMenuVertical

MainMenuVertical

A vertically docked main menu.

To provide images for horizontally docked main menus, use the Bars.MainMenu skin element.


Bars.PopupMenu

PopupMenu

A popup menu’s background.

This skin element is applied to submenus, item dropdown menus, and built-in context menus.


Bars.PopupMenuCheck

PopupMenuCheck

Boxes and check boxes displayed for checked toggle buttons located in submenus, item dropdown menus, and built-in context menus.

This skin element provides two images that represent:

  1. Check boxes for checked toggle buttons without glyphs

  2. Boxes for checked toggle buttons with glyphs


Bars.PopupMenuDropDownButtonArrow

PopupMenuDropDownButtonArrow

An arrow button displayed in dropdown buttons located in submenus.

To provide images for dropdown button labels, use the Bars.PopupMenuDropDownButtonLabel skin element.


Bars.PopupMenuDropDownButtonLabel

PopupMenuDropDownButtonLabel

A label displayed in dropdown buttons located in submenus.

To provide images for arrow buttons displayed in dropdown buttons, use the Bars.PopupMenuDropDownButtonArrow skin element.


Bars.PopupMenuExpandButton

PopupMenuExpandButton

An expand button that is used to access not recently used items that are currently hidden in submenus.


Bars.PopupMenuLinkSelected

PopupMenuLinkSelected

A highlight bar for a popup menu item that is currently selected or hot-tracked.

This skin element provides two images for the following item states:

  1. Normal

  2. Disabled


Bars.PopupMenuSeparator

PopupMenuSeparator

A group separator in popup menus.

To provide images for group separators in docked toolbars, use the Bars.BarSeparator and Bars.BarSeparatorVertical skin elements.


Bars.PopupMenuSideStrip

PopupMenuSideStrip

A side strip displayed for recently used items in submenus.


Bars.PopupMenuSideStripNonRecent

PopupMenuSideStripNonRecent

A side strip displayed for not recently used items in submenus.


Bars.ScreenTipSeparator

ScreenTipSeparator

A separator between the description and footer sections in ScreenTip windows.


Bars.ScreenTipWindow

ScreenTipWindow

ScreenTipItem ScreenTipTitleItem

A ScreenTip window’s background.


Bars.ScreenTipWindow.ScreenTipItem

ScreenTipWindow.ScreenTipItem

ScreenTipWindow

Use this property to specify the text color for the description section in ScreenTip windows.

To specify the text color for the header and footer sections, use the Bars.ScreenTipWindow.ScreenTipTitleItem property.


Bars.ScreenTipWindow.ScreenTipTitleItem

ScreenTipWindow.ScreenTipTitleItem

ScreenTipWindow

Use this property to specify the text color for the header and footer sections in ScreenTip windows.

To specify the text color for the description section, use the Bars.ScreenTipWindow.ScreenTipItem property.


Bars.StatusBar

StatusBar

A status bar’s background.


Common.Button

Button

DisabledText

A TcxButton control.

This skin element provides five images that represent the following button states:

  1. Normal

  2. Hot-tracked

  3. Pressed

  4. Disabled

  5. Active

To specify the text color for disabled TcxButton controls, use the Button.DisabledText property.


Common.Button.DisabledText

Button.DisabledText

Button

Specifies the text color for disabled TcxButton controls.


Common.GroupPanel

GroupPanel

A panel with borders, without a caption bar.

This skin element is applied to the following controls:

  • A TcxGroupBox if its PanelStyle.Active property is set to True;

  • A TcxGroupBox if its Alignment property is set to alCenterCenter;

  • A TdxLayoutGroup if its ShowCaption property is set to False.


Common.GroupPanelBottom

GroupPanelBottom

A panel with the caption bar located at the bottom.

This skin element is applied to a TcxGroupBox if its Alignment property is set to alBottomLeft, alBottomCenter, or alBottomRight.


Common.GroupPanelCaptionBottom

GroupPanelCaptionBottom

The caption bar located at a panel’s bottom edge.

This skin element is applied to a TcxGroupBox if its Alignment property is set to alBottomLeft, alBottomCenter, or alBottomRight.


Common.GroupPanelCaptionLeft

GroupPanelCaptionLeft

The caption bar located at a panel’s left edge.

This skin element is applied to a TcxGroupBox if its Alignment property is set to alLeftBottom, alLeftCenter, or alLeftTop.


Common.GroupPanelCaptionRight

GroupPanelCaptionRight

The caption bar located at a panel’s right edge.

This skin element is applied to a TcxGroupBox if its Alignment property is set to alRightBottom, alRightCenter, or alRightTop.


Common.GroupPanelCaptionTop

GroupPanelCaptionTop

The caption bar located at a panel’s top edge.

This skin element is applied to a TcxGroupBox if its Alignment property is set to alTopLeft, alTopCenter, or alTopRight.


Common.GroupPanelLeft

GroupPanelLeft

A panel with the caption bar located at the left.

This skin element is applied to a TcxGroupBox if its Alignment property is set to alLeftBottom, alLeftCenter, or alLeftTop.


Common.GroupPanelNoBorder

GroupPanelNoBorder

A panel without borders and the caption bar.

This skin element is applied to the following controls:

  • TcxGroupBox if its PanelStyle.Active property is set to True and the Caption property is set to an empty string.

  • TcxGroupBox if its Alignment property is set to alCenterCenter and the Caption property is set to an empty string.

  • The client area of radio group and check group controls.


Common.GroupPanelRight

GroupPanelRight

A panel with the caption bar located at the right.

This skin element is applied to a TcxGroupBox if its Alignment property is set to alRightBottom, alRightCenter, or alRightTop.


Common.GroupPanelTop

GroupPanelTop

A panel with the caption bar located at the top.

This skin element is applied to a TcxGroupBox if its Alignment property is set to alTopLeft, alTopCenter, or alTopRight.


Common.Header

Header

Use this skin element to customize the appearance of:

  • Column and band headers in the ExpressQuantumGrid and ExpressQuantumTreeList controls;

  • Grouping values in the ExpressPivotGrid control.

This skin element provides three images that represent the following header states:

  1. Normal

  2. Hot-tracked

  3. Pressed


Common.HeaderSpecial

HeaderSpecial

Use this skin element to customize the appearance of:

  • Group column headers in the ExpressQuantumGrid controls;

  • Field headers in the ExpressPivotGrid control.

This skin element provides three images that represent the following header states:

  1. Normal

  2. Hot-tracked

  3. Pressed


Common.ScrollButton

ScrollButton

A scroll button.

This skin element provides 16 images and corresponding glyphs for scroll buttons. These images and glyphs are grouped into four sections:

  1. Scroll Up Button

  2. Scroll Down Button

  3. Scroll Left Button

  4. Scroll Right Button

Each section contains four images that represent the scroll button in the normal, hot-tracked, pressed, and disabled states.


Common.ScrollContentHorz

ScrollContentHorz

A horizontal scroll bar’s shaft.

This skin element provides four images that represent the shaft in the following states:

  1. Normal

  2. Hot-tracked

  3. Pressed

  4. Disabled


Common.ScrollContentVert

ScrollContentVert

A vertical scroll bar’s shaft.

This skin element provides four images that represent the shaft in the following states:

  1. Normal

  2. Hot-tracked

  3. Pressed

  4. Disabled


Common.ScrollThumbHorz

ScrollThumbHorz

A horizontal scroll bar’s thumb.

This skin element provides four images and corresponding glyphs that represent the scroll thumb in the following states:

  1. Normal

  2. Hot-tracked

  3. Pressed

  4. Disabled


Common.ScrollThumbVert

ScrollThumbVert

A vertical scroll bar’s thumb.

This skin element provides four images and corresponding glyphs that represent the scroll thumb in the following states:

  1. Normal

  2. Hot-tracked

  3. Pressed

  4. Disabled


Common.SizeGrip

SizeGrip

A size grip of dropdown windows, a status bar in ExpressBars, etc.


Common.Splitter

Splitter

A vertical TcxSplitter control.

This skin element is applied to a TcxSplitter control if its AlignSplitter property is set to salLeft or salRight.

The skin element provides two images that represent the splitter in the following states:

  1. Normal

  2. Hot-tracked or pressed


Common.SplitterHorz

SplitterHorz

A horizontal TcxSplitter control.

This skin element is applied to a TcxSplitter control if its AlignSplitter property is set to salBottom or salTop.

The skin element provides two images that represent the splitter in the following states:

  1. Normal

  2. Hot-tracked or pressed


Common.ContainerBorderColor

ContainerBorderColor

The border color of inactive standalone editors from the ExpressEditors Library.


Common.ContainerHighlightBorderColor

ContainerHighlightBorderColor

The border color of currently hot-tracked standalone editors from the ExpressEditors Library.


Common.ContentColor

ContentColor

The background color of:

  • Views in the ExpressQuantumGrid control (corresponds to the BackgroundBitmaps property).

  • Cells in the ExpressQuantumTreeList, ExpressVerticalGrid, and ExpressPivotGrid controls.


Common.ContentEvenColor

ContentEvenColor

The color of even rows/nodes displayed in a container control, such as a TcxGrid, TreeList, etc.


Common.ContentOddColor

ContentOddColor

The color of odd rows/nodes displayed in a container control, such as a TcxGrid, TreeList, etc.


Common.DockControlHiddenBarTextColor

DockControlHiddenBarTextColor

The caption color of a tab displayed for a hidden dock control. This property is in effect only when the dock control’s Auto Hide feature is enabled.


Common.HeaderBackgroundColor

HeaderBackgroundColor

The background color of the following control elements:

  • A band not occupied by column headers in the ExpressQuantumGrid control.

  • The header area in the ExpressPivotGrid control.

  • The banner located at the top of each day in a TcxScheduler.


Common.HeaderBackgroundTextColor

HeaderBackgroundTextColor

The color of the text displayed in a PivotGrid’s header area.


Common.LayoutControlColor

LayoutControlColor

The background color of a TdxLayoutControl’s client area.


Common.SelectionColor

SelectionColor

The background color of selected cells in the ExpressQuantumGrid, ExpressQuantumTreeList, ExpressScheduler, ExpressVerticalGrid, and ExpressPivotGrid controls.


Common.SelectionTextColor

SelectionTextColor

The text color of selected cells in the ExpressQuantumGrid, ExpressQuantumTreeList, ExpressScheduler, ExpressVerticalGrid, and ExpressPivotGrid controls.


Docking.ActiveTabHeaderDownGrow

ActiveTabHeaderDownGrow

Use this property to increase (grow downward) the active tab’s height so that it perfectly fits a tab baseline. Automatic adjustments to the height of other tabs are made, based on this property value.


Docking.ActiveTabHeaderHGrow

ActiveTabHeaderHGrow

Use this property to emphasize the active tab by increasing its width.

To adjust the active tab’s height, use the Docking.ActiveTabHeaderUpGrow property.


Docking.ActiveTabHeaderUpGrow

ActiveTabHeaderUpGrow

Use this property to emphasize the active tab by increasing its height.

To adjust the active tab’s width, use the Docking.ActiveTabHeaderHGrow property.


Docking.AutoHideBar

AutoHideBar

An auto-hide container displayed along a form’s top edge.


Docking.AutoHideBarBottom

AutoHideBarBottom

An auto-hide container displayed along a form’s bottom edge.


Docking.AutoHideBarLeft

AutoHideBarLeft

An auto-hide container displayed along a form’s left edge.


Docking.AutoHideBarRight

AutoHideBarRight

An auto-hide container displayed along a form’s right edge.


Docking.DockWindowBorder

DockWindowBorder

The background and border of a dock control that is currently docked.


Docking.DockWindowButton

DockWindowButton

Buttons displayed in a dock control’s caption bar.

This skin element provides five images that represent the following button states:

  1. Normal when a dock control is inactive

  2. Hot-tracked

  3. Pressed

  4. Disabled

  5. Normal when a dock control is active

To provide button glyphs, use the Docking.DockWindowButtonGlyphs skin element.


Docking.DockWindowButtonGlyphs

DockWindowButtonGlyphs

This skin element provides seven images that represent the following caption button glyphs:

  1. Restore

  2. Maximize

  3. Close

  4. Enable the Auto Hide feature

  5. Disable the Auto Hide feature

  6. <Reserved for future use>

  7. <Reserved for future use>

To provide images for caption buttons, use the Docking.DockWindowButton skin element.


Docking.DockWindowCaption

DockWindowCaption

InactiveCaptionTextColor

An active dock control’s caption bar.

This skin element provides two images that represent the following caption bar states:

  1. Inactive

  2. Active

To specify the text color for this caption bar, use the Docking.DockWindowCaption.TextColor property.

To specify the text color for an inactive caption bar, use the Docking.DockWindowCaption.InactiveCaptionTextColor property.


Docking.DockWindowCaption.InactiveCaptionTextColor

DockWindowCaption.InactiveCaptionTextColor

DockWindowCaption

Specifies the text color for an inactive dock control’s caption bar.

To provide images and specify the text color for an active dock control’s caption bar, use the Docking.DockWindowCaption skin element.


Docking.TabHeader

TabHeader

A tab in tab containers.

This skin element provides five images that represent the following tab states:

  1. Normal

  2. Hot-tracked

  3. Pressed

  4. Disabled

  5. Active

To specify the caption color for tabs, use the Docking.TabHeaderTextColor and Docking.TabHeaderTextColorActive properties. To provide images for the container’s background, use the Docking.TabHeaderBackground skin element.


Docking.TabHeaderAutoHideBar

TabHeaderAutoHideBar

A tab displayed in auto-hide containers.

This skin element provides four images that represent the following tab states:

  1. Inactive

  2. <Reserved for future use>

  3. Active

  4. <Reserved for future use>


Docking.TabHeaderBackground

TabHeaderBackground

A tab container’s background.

To provide images for tab container tabs, use the Docking.TabHeader skin element. To specify the caption color for these tabs, use the Docking.TabHeaderTextColor and Docking.TabHeaderTextColorActive properties.


Docking.TabHeaderLine

TabHeaderLine

A tab baseline displayed in tab containers and auto-hide containers.


Docking.TabHeaderTextColor

TabHeaderTextColor

Use this property to specify the caption color for inactive tabs.

To specify the caption color for active tabs, use the Docking.TabHeaderTextColorActive property.


Docking.TabHeaderTextColorActive

TabHeaderTextColorActive

Use this property to specify the caption color for active tabs.

To specify the caption color for inactive tabs, use the Docking.TabHeaderTextColor property.


dxSkinsUserSkinLoadFromFile

dxSkinsUserSkinLoadFromFile global function

See Also

Loads a skin from a specified file.

Unit

dxSkinsDefaultPainters

function dxSkinsUserSkinLoadFromFile(const AFileName: string; const ASkinName: string = ''): Boolean;

Description

If the skin controller’s SkinName property is set to ‘UserSkin’, you need to provide a skin to be applied by this skin controller. Call the dxSkinsUserSkinLoadFromFile function to load a skin from a .SKINRES file saved in the Skin Editor.

The AFileName parameter specifies the source file. By default, the function loads the first skin stored within this file. You can specify which particular skin should be loaded by passing its name as the ASkinName parameter.

The dxSkinsUserSkinLoadFromFile function returns False, if the specified skin doesn't exist or cannot be loaded

To load a skin from a stream, call the dxSkinsUserSkinLoadFromStream function.


dxSkinsUserSkinLoadFromStream

dxSkinsUserSkinLoadFromStream global function

See Also

Loads a skin from a specified stream.

Unit

dxSkinsDefaultPainters

function dxSkinsUserSkinLoadFromStream(AStream: TStream ; const ASkinName: string = ''): Boolean;

Description

If the skin controller’s SkinName property is set to ‘UserSkin’, you need to provide a skin to be applied by this skin controller. Call the dxSkinsUserSkinLoadFromStream function to load a skin from a stream containing skin data (such as .SKINRES files saved in the Skin Editor).

The AStream parameter specifies the source stream. By default, the function loads the first skin stored within this stream. You can specify which particular skin should be loaded by passing its name as the ASkinName parameter.

The dxSkinsUserSkinLoadFromStream function returns False, if the specified skin doesn't exist or cannot be loaded.

To load a skin from a file, call the dxSkinsUserSkinLoadFromFile function.


TdxSkinController.GetFormSkin

TdxSkinController See Also

Determines whether a form is skinned.

class function GetFormSkin(AForm: TCustomForm ; var ASkinName: string): Boolean;

Description

This function returns True if the form specified by the AForm parameter is skinned. The name of the skin applied to the form is returned via the ASkinName parameter.


TdxSkinController.OnSkinControl

TdxSkinController See Also

Allows you to enable or disable skinning, for a TFrame, a TPanel or TButton control.

type

TdxSkinControlEvent = procedure(Sender: TObject ; AControl: TWinControl ; var UseSkin: Boolean) of object;

property OnSkinControl: TdxSkinControlEvent;

Description

This event is raised before a TPanel or TButton control or TFrame passed as the AControl parameter is shown in a skinned form.

By default, the UseSkin parameter value is equal to the skin controller’s UseSkins property value. To enable skinning for AControl, ensure that this parameter's value is True. Otherwise, skinning will be disabled.

To apply skins to TPanel and TButton controls and frames located on specific forms, check for a particular form using the GetParentForm function and pass AControl as a parameter.

To specify skins to be applied to forms, handle the OnSkinForm event.


TdxSkinController.OnSkinForm

TdxSkinController See Also

Enables you to specify skins to be applied to a form.

type

TdxSkinFormEvent = procedure(Sender: TObject ; AForm: TCustomForm ; var ASkinName: string; var UseSkin: Boolean) of object;

property OnSkinForm: TdxSkinFormEvent;

Description

This event is raised before the form passed as the AForm parameter is shown.

The OnSkinForm event allows you to:

  • Specify the skin to be applied to the form by passing its name via the ASkinName parameter.

  • Enable or disable form skinning by passing True or False via the UseSkin parameter.

By default, the ASkinName and UseSkin parameter values are equal to the skin controller’s SkinName and UseSkins property values.

To specify whether the specified skin is applied to specific controls on a form, handle the OnSkinControl event.


TdxSkinController.Refresh

TdxSkinController

Forces all skinned forms and controls to be repainted.

procedure Refresh;

Description

You may not need to call this method unless your controls are double-buffered or skin images are changed on the fly.


TdxSkinController.UseSkins

TdxSkinController

Determines whether skins are applied to TcxControl and TForm descendants within the current application.

property UseSkins: Boolean;

Description

Set this property to True to apply the skin specified via the SkinName property to the application. Otherwise, the application’s appearance is determined by the Kind and NativeStyle look and feel settings.


dxSkinControllersList

dxSkinControllersList global variable

See Also

Provides indexed access to all skin controllers available within an application.

Unit

dxSkinsForm

dxSkinControllersList: TList ;

Description

To access a particular skin controller, cast an object from this list to TdxSkinController. The following code demonstrates how to access the first skin controller in this list.

// Delphi

var

ASkinController: TdxSkinController;

ASkinController := TdxSkinController(dxSkinControllersList[0]);

// C++ Builder

TdxSkinController * ASkinController = (TdxSkinController*)dxSkinControllersList->Items[0];


Events for TdxSkinController

TdxSkinController Events

TdxSkinController Legend

In TdxSkinController

OnSkinControl

OnSkinForm


Methods for TdxSkinController

TdxSkinController Methods

TdxSkinController Legend

In TdxSkinController

GetFormSkin

Refresh

Derived from TcxLookAndFeelController

Create

Destroy


Properties for TdxSkinController

TdxSkinController Properties

TdxSkinController Legend

In TdxSkinController

UseSkins

Derived from TcxLookAndFeelController

Kind

NativeStyle

SkinName


TdxSkinController Hierarchy

Hierarchy

TComponent

|

TcxLookAndFeelController

|

TdxSkinController


Editors.BackgroundColor

BackgroundColor

Use this property to specify the background color for editors (including in-place editors) in the normal state.

To specify the background color for disabled editors, use the Editors.BackgroundDisabledColor property.

To specify the text color for editors, use the Editors.TextColor and Editors.TextDisabledColor properties.


Editors.BackgroundDisabledColor

BackgroundDisabledColor

Use this property to specify the background color for disabled editors (including in-place editors).

To specify the background color for editors in the normal state, use the Editors.BackgroundColor property.

To specify the text color for editors, use the Editors.TextColor and Editors.TextDisabledColor properties.


Editors.Checkbox

Checkbox

A check box .

This skin element provides 12 images for check boxes. These images are grouped into three sections:

  1. Unchecked Box

  2. Checked Box

  3. Grayed Box

Each section contains four images that represent the check box in the normal, hot-tracked, pressed, and disabled states.


Editors.ClockFace

ClockFace

A clock face displayed in a date editor’s dropdown calendar.

This skin element is applied to a date editor if its Properties.Kind property is set to ckDateTime.


Editors.ClockGlass

ClockGlass

A clock glass displayed in a date editor’s dropdown calendar.

This skin element is applied to a date editor if its Properties.Kind property is set to ckDateTime.


Editors.CloseButton

CloseButton

An editor’s Close button.

This skin element provides four images and corresponding glyphs that represent the Close button in the following states:

  1. Normal

  2. Hot-tracked


Editors.ComboButtonGlyph

ComboButtonGlyph

A combo box editor ’s button glyph.

This skin element provides four glyphs that are painted inside the button for the following states:

  1. Normal

  2. Hot-tracked

  3. Pressed

  4. Disabled

To provide images for the button, use the Editors.EditorButton skin element.


Editors.EditorButton

EditorButton

DisabledText

An editor’s button.

This skin element is applied to the following controls:

  • Editors with dropdown windows

  • Button Editor

  • Spin Editor

  • Navigator Editor

The skin element provides four images that represent the button in the following states:

  1. Normal

  2. Hot-tracked

  3. Pressed

  4. Disabled

To specify the text color for an editor’s disabled buttons, use the Editors.EditorButton.DisabledText property.

To provide images for a combo box editor’s button glyph, use the Editors.ComboButtonGlyph skin element. Glyphs displayed within a navigator editor’s buttons can be specified via the Editors.Navigator skin element.


Editors.EditorButton.DisabledText

EditorButton.DisabledText

EditorButton

Specifies the text color for an editor’s disabled buttons.


Editors.Navigator

Navigator

Button glyphs for a horizontal navigator.

This skin element is applied to the following controls and UI elements:

  • A TcxNavigator or TcxDBNavigator

  • Data navigator (ExpressQuantumGrid)

  • Resource navigator (ExpressScheduler)

This skin element provides 16 images that represent the following buttons:

  1. First

  1. PriorPage

  1. Prior

  1. Next

  1. NextPage

  1. Last

  1. Insert

  1. Append

  1. Delete

  1. Edit

  1. Post

  1. Cancel

  1. Refresh

  1. SaveBookmark

  1. GotoBookmark

  1. Filter

To provide images for navigator buttons, use the Editors.EditorButton skin element.


Editors.NavigatorVert

NavigatorVert

Button glyphs for a vertical navigator.

This skin element is applied to the resource navigator displayed in the Week, Weeks, and Time Grid views if resources are grouped by dates.

This skin element provides six images that represent the following buttons:

  1. First

  1. PrevPage

  1. Prev

  1. Next

  1. NextPage

  1. Last

To provide images for navigator buttons, use the Editors.EditorButton skin element.


Editors.ProgressBorder

ProgressBorder

A horizontal ProgressBar control’s background and border.


Editors.ProgressBorderVert

ProgressBorderVert

A vertical ProgressBar control’s background and border.


Editors.ProgressChunk

ProgressChunk

A horizontal ProgressBar control’s chunk.


Editors.ProgressChunkVert

ProgressChunkVert

A vertical ProgressBar control’s chunk.


Editors.RadioButton

RadioButton

A TcxRadioButton control.

This skin element provides eight images for radio buttons. These images are grouped into two sections:

  1. Unselected Button

  2. Selected Button

Each section contains four images that represent the radio button in the normal, hot-tracked, pressed, and disabled states.


Editors.SpinDownGlyph

SpinDownGlyph

A spin button ’s down arrow.

This skin element provides four glyphs that represent the down arrow in the following button states:

  1. Normal

  2. Hot-tracked

  3. Pressed

  4. Disabled

To provide images for spin buttons, use the Editors.EditorButton skin element.


Editors.SpinLeftGlyph

SpinLeftGlyph

A fast spin button ’s left arrow.

This skin element provides four glyphs that represent the left arrow in the following button states:

  1. Normal

  2. Hot-tracked

  3. Pressed

  4. Disabled

To provide images for spin buttons, use the Editors.EditorButton skin element.


Editors.SpinRightGlyph

SpinRightGlyph

A fast spin button ’s right arrow.

This skin element provides four glyphs that represent the right arrow in the following button states:

  1. Normal

  2. Hot-tracked

  3. Pressed

  4. Disabled

To provide images for spin buttons, use the Editors.EditorButton skin element.


Editors.SpinUpGlyph

SpinUpGlyph

A spin button ’s up arrow.

This skin element provides four glyphs that represent the up arrow in the following button states:

  1. Normal

  2. Hot-tracked

  3. Pressed

  4. Disabled

To provide images for spin buttons, use the Editors.EditorButton skin element.


Editors.TextColor

TextColor

Use this property to specify the text color for editors (including in-place editors) in the normal state.

To specify the text color for disabled editors, use the Editors.TextDisabledColor property.

To specify the background color for editors, use the Editors.BackgroundColor and Editors.BackgroundDisabledColor properties.


Editors.TextDisabledColor

TextDisabledColor

Use this property to specify the text color for disabled editors (including in-place editors).

To specify the text color for editors in the normal state, use the Editors.TextColor property.

To specify the background color for editors, use the Editors.BackgroundColor and Editors.BackgroundDisabledColor properties.


Editors.TrackBarThumb

TrackBarThumb

A thumb for a horizontal track bar , with tick marks located at the bottom of the bar.

This skin element is applied to a track bar if its Properties.Orientation property is set to tboHorizontal and the Properties.TickMarks property is set to cxtmBottomRight.

The skin element provides five images that represent the thumb in the following states:

  1. Normal

  2. Hot-tracked

  3. Pressed

  4. Disabled

  5. Active


Editors.TrackBarThumbBoth

TrackBarThumbBoth

A thumb for a horizontal track bar with tick marks located on both sides of the track bar.

This skin element is applied to a track bar if its Properties.Orientation property is set to tboHorizontal and the Properties.TickMarks property is set to cxtmBoth.

The skin element provides five images that represent the thumb in the following states:

  1. Normal

  2. Hot-tracked

  3. Pressed

  4. Disabled

  5. Active


Editors.TrackBarThumbUp

TrackBarThumbUp

A thumb for a horizontal track bar , with tick marks located at the top of the bar.

This skin element is applied to a track bar if its Properties.Orientation property is set to tboHorizontal and the Properties.TickMarks property is set to cxtmTopLeft.

The skin element provides five images that represent the thumb in the following states:

  1. Normal

  2. Hot-tracked

  3. Pressed

  4. Disabled

  5. Active


Editors.TrackBarThumbVert

TrackBarThumbVert

A thumb for a vertical track bar , with tick marks located on the right side of the bar.

This skin element is applied to a track bar if its Properties.Orientation property is set to tboVertical and the Properties.TickMarks property is set to cxtmBottomRight.

The skin element provides five images that represent the thumb in the following states:

  1. Normal

  2. Hot-tracked

  3. Pressed

  4. Disabled

  5. Active


Editors.TrackBarThumbVertBoth

TrackBarThumbVertBoth

A thumb for a vertical track bar , with tick marks located on both sides of the track bar.

This skin element is applied to a track bar if its Properties.Orientation property is set to tboVertical and the Properties.TickMarks property is set to cxtmBoth.

The skin element provides five images that represent the thumb in the following states:

  1. Normal

  2. Hot-tracked

  3. Pressed

  4. Disabled

  5. Active


Editors.TrackBarThumbVertUp

TrackBarThumbVertUp

A thumb for a vertical track bar , with tick marks located on the left side of the bar.

This skin element is applied to a track bar if its Properties.Orientation property is set to tboVertical and the Properties.TickMarks property is set to cxtmTopLeft.

The skin element provides five images that represent the thumb in the following states:

  1. Normal

  2. Hot-tracked

  3. Pressed

  4. Disabled

  5. Active


Editors.TrackBarTrack

TrackBarTrack

A horizontal track bar .

This skin element is applied to a track bar if its Properties.Orientation property is set to tboHorizontal.

The skin element provides four track bar images that correspond to the following sections:

  1. Non-selected track

  2. Selection bar

  3. Disabled non-selected track

  4. Disabled selection bar


Editors.TrackBarTrackVert

TrackBarTrackVert

A vertical track bar .

This skin element is applied to a track bar if its Properties.Orientation property is set to tboVertical.

The skin element provides four track bar images that correspond to the following sections:

  1. Non-selected track

  2. Selection bar

  3. Disabled non-selected track

  4. Disabled selection bar


Product Groups

Overview Skin Editor UI

Bars

Common

Docking

Editors

Form

Grid

NavBar

NavPane

PageControl

Ribbon

Scheduler

VerticalGrid


Product Group Navigator

Choose a Product Group:

Bars

Common

Docking

Editors

Form

Grid

NavBar

NavPane

PageControl

Ribbon

Scheduler

VerticalGrid


Form.FormButtonClose

FormButtonClose

A form’s Close button.


Form.FormButtonHelp

FormButtonHelp

A form’s Help button.


Form.FormButtonMaximize

FormButtonMaximize

A form’s Maximize button.


Form.FormButtonMinimize

FormButtonMinimize

A form’s Minimize button.


Form.FormButtonRestore

FormButtonRestore

A form’s Restore button.


Form.FormCaption

FormCaption

FontDelta

A form’s title bar.

This skin element provides 2 images that represent the following title bar states:

  1. Active

  2. Inactive


Form.FormCaption.FontDelta

FormCaption.FontDelta

FormCaption

Specifies the difference between a form caption’s font size and the default font size used to display form captions. Automatic adjustments to the button size and title bar’s height are made, based on the value of this property.


Form.FormContent

FormContent

A form’s background.

To specify images for form borders, use the Form.FormFrameBottom, Form.FormFrameLeft, and Form.FormFrameRight properties.


Form.FormFrameBottom

FormFrameBottom

A form’s bottom border.

This skin element provides two images that represent the following border states:

  1. Active

  2. Inactive

To specify images for a form’s left and right borders, use the Form.FormFrameLeft and Form.FormFrameRight properties.


Form.FormFrameLeft

FormFrameLeft

A form’s left border.

This skin element provides two images that represent the following border states:

  1. Active

  2. Inactive

To specify images for a form’s bottom and right borders, use the Form.FormFrameBottom and Form.FormFrameRight properties.


Form.FormFrameRight

FormFrameRight

A form’s right border.

This skin element provides two images that represent the following border states:

  1. Active

  2. Inactive

To specify images for a form’s bottom and left borders, use the Form.FormFrameBottom and Form.FormFrameLeft properties.


Form.SmallFormButtonClose

SmallFormButtonClose

A tool window’s Close button.

This skin element provides five images and corresponding glyphs that represent the following button states:

  1. Normal when a tool window is active

  2. Hot-tracked

  3. Pressed

  4. Disabled

  5. Normal when a tool window is inactive


Form.SmallFormCaption

SmallFormCaption

A tool window’s title bar.

This skin element provides two images that represent the following title bar states:

  1. Active

  2. Inactive


Form.TextColorInactive

TextColorInactive

Use this property to specify the text color for an inactive form’s title bar.

To specify images for an active form’s title bar and borders, use the Form.FormCaption, Form.FormFrameBottom, Form.FormFrameLeft, and Form.FormFrameRight skin elements.


Form.TextShadowColor

TextShadowColor

Use this property to specify the shadow text color for a form’s title bar.


Grid.CardSeparator

CardSeparator

A card separator in a CardView.

Use this skin element to specify the color of a card separator.


Grid.FilterButton

FilterButton

A filter button displayed in grid items or pivot grid fields that are not filtered.

This skin element provides three images and corresponding glyphs that represent the following button states:

  1. Normal

  2. Hot-tracked

  3. Pressed


Grid.FilterButtonActive

FilterButtonActive

A filter button displayed in grid items or pivot grid fields that are filtered.

This skin element provides three images and corresponding glyphs that represent the following button states:

  1. Normal

  2. Hot-tracked

  3. Pressed


Grid.FooterCell

FooterCell

A footer cell in a Table View or Banded Table View.

This skin element is applied to footer cells displayed both in footer panels and group footer panels.


Grid.FooterPanel

FooterPanel

A footer panel or group footer panel in a Table View or Banded Table View.


Grid.GridFilterPanel

GridFilterPanel

A filter panel in a Table View, Card View, or Banded Table View.


Grid.GridFixedLine

GridFixedLine

Use this skin element to specify the color of:

  • Fixed band separators in Banded Table Views and ExpressQuantumTreeList controls;

  • Category row separators in Card Views.


Grid.GridGroupPanel

GridGroupPanel

Use this skin element to customize the appearance of:

  • Group By box in Table Views or Banded Table Views;

  • Header Area in ExpressPivotGrid controls.


Grid.GridLine

GridLine

Use this skin element to specify the color of grid lines in the ExpressQuantumGrid, ExpressPivotGrid, and ExpressQuantumTreeList controls.


Grid.GroupRow

GroupRow

A group row in a Table View or Banded Table View.


Grid.IndicatorImages

IndicatorImages

Use this skin element to provide images for indicator cells.

The skin element provides nine images that are used to indicate:

  1. Focused or selected row

  2. Modified row

  3. New item row, Quick Column Customization Button, or Quick Band Customization Button

  4. <Reserved for future use>

  5. <Reserved for future use>

  6. <Reserved for future use>

  7. <Reserved for future use>

  8. <Reserved for future use>

  9. Filter row


Grid.PlusMinus

PlusMinus

Expand/collapse buttons.

This skin element provides two images that represent:

  1. Expand button

  2. Collapse button


NavBar.Background

Background

A TdxNavBar control’s background color.

This skin element is applied to a TdxNavBar control if it’s displayed within a container control that is not skinned.


NavBar.GroupClient

GroupClient

A TdxNavBarGroup ’s client area.

This skin element is applied to a TdxNavBar control if the following conditions are met:

  • the TdxNavBar.View property is set to dxNavBarSkinNavigatorPaneView;

  • the group’s ShowControl property is set to False.


NavBar.GroupCloseButton

GroupCloseButton

A TdxNavBarGroup ’s Collapse button.

This skin element is applied to a TdxNavBar control if the following conditions are met:

  • the TdxNavBar.View property is set to dxNavBarSkinExplorerBarView;

  • the TdxNavBar.ShowGroupCaptions property is set to True;

  • the group’s ShowExpandButton property is set to True.

The skin element provides three images that represent the button in the following states:

  1. Normal

  2. Hot-tracked

  3. Pressed


NavBar.GroupHeader

GroupHeader

A TdxNavBarGroup ’s header.

This skin element is applied to a TdxNavBar control if the following conditions are met:

  • the TdxNavBar.View property is set to dxNavBarSkinExplorerBarView;

  • the TdxNavBar.ShowGroupCaptions property is set to True.


NavBar.GroupOpenButton

GroupOpenButton

A TdxNavBarGroup ’s Expand button.

This skin element is applied to a TdxNavBar control if the following conditions are met:

  • the TdxNavBar.View property is set to dxNavBarSkinExplorerBarView;

  • the TdxNavBar.ShowGroupCaptions property is set to True;

  • the group’s ShowExpandButton property is set to True.

The skin element provides three images that represent the button in the following states:

  1. Normal

  2. Hot-tracked

  3. Pressed


NavBar.Item

Item

A TdxNavBar control’s item .

This skin element is applied to a TdxNavBar control if its View property is set to dxNavBarSkinExplorerBarView.

Use the skin element to specify the text color and font settings of items.


NavPane.Caption

Caption

FontSize Height

The navigation pane's header section .

This skin element is applied to a TdxNavBar control if its View property is set to dxNavBarSkinNavigatorPaneView.


NavPane.Caption.FontSize

Caption.FontSize

Caption

Use this property to specify the font size of the navigation pane's header section .

To customize the height of this section, use the NavPane.Caption.Height property.


NavPane.Caption.Height

Caption.Height

Caption

Use this property to specify the height (in pixels) of the navigation pane's header sections . This property value cannot be less than the default height, determined automatically based on the NavPane.Caption.FontSize property value.


NavPane.CollapseButton

CollapseButton

A button that is used to collapse the navigation pane.

This skin element is applied to a TdxNavBar v2 control if the following conditions are met:

  • the TdxNavBar.View property is set to dxNavBarSkinNavigatorPaneView;

  • the TdxNavBar.OptionsBehavior.NavigationPane.Collapsible property is set to True;

  • the TdxNavBar.OptionsBehavior.NavigationPane.Collapsed property is set to False.

The skin element provides three images that represent the button in the following states:

  1. Normal

  2. Hot-tracked

  3. Pressed


NavPane.CollapsedGroupClient

CollapsedGroupClient

A group’s client area in the collapsed navigation pane .

This skin element is applied to a TdxNavBar v2 control if the following conditions are met:

  • the TdxNavBar.View property is set to dxNavBarSkinNavigatorPaneView;

  • the TdxNavBar.OptionsBehavior.NavigationPane.Collapsible property is set to True;

  • the TdxNavBar.OptionsBehavior.NavigationPane.Collapsed property is set to False.

The skin element provides three images that represent the button in the following states:

  1. Normal

  2. Hot-tracked

  3. Pressed


NavPane.ExpandButton

ExpandButton

A button that is used to expand the collapsed navigation pane .

This skin element is applied to a TdxNavBar v2 control if the following conditions are met:

  • the TdxNavBar.View property is set to dxNavBarSkinNavigatorPaneView;

  • the TdxNavBar.OptionsBehavior.NavigationPane.Collapsible property is set to True;

  • the TdxNavBar.OptionsBehavior.NavigationPane.Collapsed property is set to True.

The skin element provides three images that represent the button in the following states:

  1. Normal

  2. Hot-tracked

  3. Pressed


NavPane.GroupButton

GroupButton

The header of a collapsed TdxNavBarGroup that is currently inactive .

This skin element is applied to a TdxNavBar control if its View property is set to dxNavBarSkinNavigatorPaneView.


NavPane.GroupButtonSelected

GroupButtonSelected

The header of a collapsed TdxNavBarGroup that is currently active .

This skin element is applied to a TdxNavBar control if its View property is set to dxNavBarSkinNavigatorPaneView.


NavPane.GroupClient

GroupClient

A TdxNavBarGroup ’s client area.

This skin element is applied to a TdxNavBar control if the following conditions are met:

  • the TdxNavBar.View property is set to dxNavBarSkinNavigatorPaneView;

  • the group’s ShowControl property is set to False.


NavPane.Item

Item

A TdxNavBar control’s item .

This skin element is applied to a TdxNavBar control if its View property is set to dxNavBarSkinNavigatorPaneView.

The skin element provides three images that represent the item in the following states:

  1. Normal

  2. Hot-tracked

  3. Pressed


NavPane.ItemSelected

ItemSelected

A TdxNavBar control’s selected item .

This skin element is applied to a TdxNavBar control if its View property is set to dxNavBarSkinNavigatorPaneView.

The skin element provides three images that represent the selected item in the following states:

  1. Normal

  2. Hot-tracked

  3. Pressed


NavPane.OverflowPanel

OverflowPanel

An overflow panel.

This skin element is applied to a TdxNavBar control if its View property is set to dxNavBarSkinNavigatorPaneView.


NavPane.OverflowPanelExpandItem

OverflowPanelExpandItem

An overflow panel ’s sign that is used to invoke the context menu .

This skin element is applied to a TdxNavBar control if its View property is set to dxNavBarSkinNavigatorPaneView.

The skin element provides three images that represent the sign in the following states:

  1. Normal

  2. Hot-tracked

  3. Pressed


NavPane.OverflowPanelItem

OverflowPanelItem

An overflow panel’s item.

This skin element is applied to a TdxNavBar control if its View property is set to dxNavBarSkinNavigatorPaneView.

This skin element provides six images for an overflow panel’s items. These images are grouped into two sections that display an item for:

  1. Active group

  2. Inactive group

Each section contains three images that represent the item in the normal, hot-tracked, and pressed states.


NavPane.PopupBorder

PopupBorder

The border color of a popup control displayed when clicking the "Navigation Pane" button of the collapsed navigation pane .

This skin element is applied to a TdxNavBar v2 control if the following conditions are met:

  • the TdxNavBar.View property is set to dxNavBarSkinNavigatorPaneView;

  • the TdxNavBar.OptionsBehavior.NavigationPane.Collapsible property is set to True;

  • the TdxNavBar.OptionsBehavior.NavigationPane.Collapsed property is set to True.


NavPane.PopupSizeGrip

PopupSizeGrip

A size grip of a popup control displayed when clicking the "Navigation Pane" button of the collapsed navigation pane .

This skin element is applied to a TdxNavBar v2 control if the following conditions are met:

  • the TdxNavBar.View property is set to dxNavBarSkinNavigatorPaneView;

  • the TdxNavBar.OptionsBehavior.NavigationPane.Collapsible property is set to True;

  • the TdxNavBar.OptionsBehavior.NavigationPane.Collapsed property is set to True.


NavPane.ScrollDownButton

ScrollDownButton

A TdxNavBar control’s Scroll Down button .

This skin element is applied to a TdxNavBar control if its View property is set to dxNavBarSkinNavigatorPaneView.

The skin element provides three images that represent the button in the following states:

  1. Normal

  2. Hot-tracked

  3. Pressed


NavPane.ScrollUpButton

ScrollUpButton

A TdxNavBar control’s Scroll Up button .

This skin element is applied to a TdxNavBar control if its View property is set to dxNavBarSkinNavigatorPaneView.

The skin element provides three images that represent the button in the following states:

  1. Normal

  2. Hot-tracked

  3. Pressed


NavPane.Splitter

Splitter

The navigation pane's splitter .

This skin element is applied to a TdxNavBar control if its View property is set to dxNavBarSkinNavigatorPaneView.

The skin element provides two images and corresponding glyphs that represent the splitter in the following states:

  1. Normal

  2. Hot-tracked and pressed


PageControl.RowIndentFar

RowIndentFar

Use this property to adjust the indent (in pixels) between the first tab and:

  • the tab control’s right edge, if the control’s TabPosition property is set to tpBottom or tpTop;

  • the bottom of the tab control, if the control’s TabPosition property is set to tpLeft or tpRight.


PageControl.RowIndentNear

RowIndentNear

Use this property to adjust the indent (in pixels) between the first tab and:

  • the tab control’s left edge, if the control’s TabPosition property is set to tpBottom or tpTop;

  • the top of the tab control, if the control’s TabPosition property is set to tpLeft or tpRight.


PageControl.SelectedHeaderDownGrow

SelectedHeaderDownGrow

Use this property to increase (grow down) the selected tab’s height so that it perfectly fits a tab page. Automatic adjustments to the height of other tabs are made, based on this property value.


PageControl.SelectedHeaderHGrow

SelectedHeaderHGrow

Use this property to emphasize the selected tab by increasing its width.

To adjust the selected tab’s height, use the SelectedHeaderUpGrow property.


PageControl.SelectedHeaderUpGrow

SelectedHeaderUpGrow

Use this property to emphasize the selected tab by increasing its height.

To adjust the selected tab’s width, use the SelectedHeaderHGrow property.


PageControl.TabButtonHorz

TabButtonHorz

A button in the horizontal Navigator Bar .

This skin element is applied to Navigator Bar buttons if the tab control’s TabPosition property is set to tpBottom or tpTop.

The skin element provides 16 images and corresponding glyphs for these buttons. These images and glyphs are grouped into four sections:

  1. Close Button

  2. Arrow Left Button

  3. Arrow Right Button

  4. Go Dialog Button

Each section contains four images that represent the button in the normal, hot-tracked, pressed, and disabled states.


PageControl.TabButtonVert

TabButtonVert

A button in the vertical Navigator Bar .

This skin element is applied to Navigator Bar buttons if the tab control’s TabPosition property is set to tpLeft or tpRight.

The skin element provides 16 images and corresponding glyphs for these buttons. These images and glyphs are grouped into four sections:

  1. Close Button

  2. Arrow Down Button

  3. Arrow Up Button

  4. Go Dialog Button

Each section contains four images that represent the button in the normal, hot-tracked, pressed, and disabled states.


PageControl.TabHeader

TabHeader

TextColor TextColorActive TextColorDisabled TextColorHot

A tab in the tab panel .

This skin element provides five images that represent a tab in the following states:

  1. Normal

  2. Hot-tracked

  3. Pressed

  4. Disabled

  5. Active

Note that the skin element is also applied to rotated tabs.


PageControl.TabHeader.TextColor

TabHeader.TextColor

TabHeader

Use this property to specify the caption color for tabs in the normal state.


PageControl.TabHeader.TextColorActive

TabHeader.TextColorActive

TabHeader

Use this property to specify the caption color for the currently active tab.


PageControl.TabHeader.TextColorDisabled

TabHeader.TextColorDisabled

TabHeader

Use this property to specify the caption color for disabled tabs.


PageControl.TabHeader.TextColorHot

TabHeader.TextColorHot

TabHeader

Use this property to specify the caption color for a hot-tracked tab.


PageControl.TabPane

TabPane

A tab page .


Ribbon.AppMenuBackground

AppMenuBackground

The Application Menu’s top area.


Ribbon.AppMenuBackgroundBottom

AppMenuBackgroundBottom

The Application Menu’s bottom area.


Ribbon.AppMenuExtraPaneColor

AppMenuExtraPaneColor

Use this property to specify the background color for the Application Menu's right panel.


Ribbon.Button

Button

Use this skin element to provide images for clickable bar item controls, such as buttons, submenu items, and collapsed in-Ribbon galleries.

This skin element provides six images that represent the following item states:

  1. Normal

  2. Hot-tracked

  3. Pressed

  4. Normal (*)

  5. Hot-tracked (*)

  6. Pressed (*)

(*) applies to toggle buttons whose Down property is set to True.


Ribbon.ButtonArrow

ButtonArrow

Use this skin element to provide glyphs for dropdown arrows displayed within toggle buttons, submenu items, and in-Ribbon galleries.

This skin element provides three images that represent the following item states:

  1. Normal

  2. Hot-tracked

  3. Pressed


Ribbon.ButtonDisabled

ButtonDisabled

Use this property to specify the caption color for disabled bar item controls.


Ribbon.ButtonGroup

ButtonGroup

A button group.


Ribbon.ButtonGroupButton

ButtonGroupButton

A button within a button group.

This skin element provides six images that represent the following button states:

  1. Normal

  2. Hot-tracked

  3. Pressed

  4. Normal (*)

  5. Hot-tracked (*)

  6. Pressed (*)

(*)applies to toggle buttons whose Down property is set to True.


Ribbon.ButtonGroupSeparator

ButtonGroupSeparator

A vertical separator between buttons within button groups.


Ribbon.DialogFrameBottom

DialogFrameBottom

A Ribbon form’s bottom border, if the form represents a non-resizable form (dialog box) or an MDI child form.

This skin element provides two images that represent the following form states:

  1. Active

  2. Inactive

To provide images for the Ribbon form’s left and right borders, use the Ribbon.DialogFrameLeft and Ribbon.DialogFrameRight skin elements.

Note: These skin elements are applied only to non-sizeable dialog boxes and MDI child forms. For normal Ribbon forms, the Ribbon.FormFrameBottom, Ribbon.FormFrameLeft, and Ribbon.FormFrameRight skin elements are used instead.


Ribbon.DialogFrameLeft

DialogFrameLeft

A Ribbon form’s left border, if the form represents a non-resizable form (dialog box) or an MDI child form.

This skin element provides two images that represent the following form states:

  1. Active

  2. Inactive

To provide images for the Ribbon form’s bottom and right borders, use the Ribbon.DialogFrameBottom and Ribbon.DialogFrameRight skin elements.

Note: These skin elements are applied only to non-sizeable forms and MDI child forms. For normal Ribbon forms, the Ribbon.FormFrameBottom, Ribbon.FormFrameLeft, and Ribbon.FormFrameRight skin elements are used instead.


Ribbon.DialogFrameRight

DialogFrameRight

A Ribbon form’s right border, if the form represents a non-resizable form (dialog box) or an MDI child form.

This skin element provides two images that represent the following form states:

  1. Active

  2. Inactive

To provide images for the Ribbon form’s bottom and left borders, use the Ribbon.DialogFrameBottom and Ribbon.DialogFrameLeft skin elements.

Note: These skin elements are applied only to non-sizeable forms and MDI child forms. For normal Ribbon forms, the Ribbon.FormFrameBottom, Ribbon.FormFrameLeft, and Ribbon.FormFrameRight skin elements are used instead.


Ribbon.DropDownGalleryBackground

DropDownGalleryBackground

A dropdown gallery’s background.


Ribbon.DropDownGalleryGroupHeader

DropDownGalleryGroupHeader

A gallery group header’s background.


Ribbon.DropDownGallerySizeGrip

DropDownGallerySizeGrip

A size grip displayed in a dropdown gallery’s size panel.

This skin element provides three images that represent size grips in the following conditions:

  1. Only vertical resizing is enabled (the gallery’s GalleryOptions.SubMenuResizing property is set to gsrHeight).

2) or 3) Both vertical and horizontal resizing are enabled (the gallery’s GalleryOptions.SubMenuResizing property is set to gsrWidthAndHeight). The size panel is displayed at the top or bottom edge of the gallery’s window, respectively.

To provide images for size panels, use the Ribbon.DropDownGallerySizePanel skin element.


Ribbon.DropDownGallerySizePanel

DropDownGallerySizePanel

Use this skin element to provide images for the following elements in dropdown galleries:

  • Size panel (displayed if a gallery’s GalleryOptions.SubMenuResizing property is set to a value other than gsrNone).

  • Gallery filter (displayed if a gallery’s GalleryFilter.Visible property is set to True).

To provide images for size grips within size panels, use the Ribbon.DropDownGallerySizeGrip skin element.


Ribbon.FormAppButton

FormAppButton

RightIndent

A Ribbon form’s Application Button.

This skin element provides three images that represent the following button states:

  1. Normal

  2. Hot-tracked

  3. Pressed


Ribbon.FormAppButton.RightIndent

FormAppButton.RightIndent

FormAppButton

In addition to QATInRibbonBackground.Offset, this property allows you to increase the indent (in pixels) between the Application Button and Quick Access Toolbar in a Ribbon form.


Ribbon.FormCaption

FormCaption

DocumentNameTextColor FontDelta TextColorInactive

A Ribbon form’s title bar.

This skin element provides two images that represent the following title bar states:

  1. Active

  2. Inactive


Ribbon.FormCaption.DocumentNameTextColor

FormCaption.DocumentNameTextColor

FormCaption

Use this property to specify the text color for the document name displayed in an active Ribbon form’s title bar.

To specify the text color for the application name displayed in the title bar, use the Form.FormCaption skin element.


Ribbon.FormCaption.FontDelta

FormCaption.FontDelta

FormCaption

Specifies the difference between the default font size of a Ribbon form’s title bar and the font size that is used to display the document name and application name in the title bar. Automatic adjustments to the button size and title bar’s height are made, based on the value of this property.


Ribbon.FormCaption.TextColorInactive

FormCaption.TextColorInactive

FormCaption

Use this property to specify the text color for the document name and application name displayed in an inactive Ribbon form’s title bar.


Ribbon.FormFrameBottom

FormFrameBottom

A Ribbon form’s bottom border.

This skin element provides two images that represent the following form states:

  1. Active

  2. Inactive

To provide images for the Ribbon form’s left and right borders, use the Ribbon.FormFrameLeft and Ribbon.FormFrameRight skin elements.

Note: These skin elements are not applied to dialog boxes and MDI child forms. The Ribbon.DialogFrameBottom, Ribbon.DialogFrameLeft, and Ribbon.DialogFrameRight skin elements are used instead.


Ribbon.FormFrameLeft

FormFrameLeft

A Ribbon form’s left border.

This skin element provides two images that represent the following form states:

  1. Active

  2. Inactive

To provide images for the Ribbon form’s bottom and right borders, use the Ribbon.FormFrameBottom and Ribbon.FormFrameRight skin elements.

Note: These skin elements are not applied to dialog boxes and MDI child forms. The Ribbon.DialogFrameBottom, Ribbon.DialogFrameLeft, and Ribbon.DialogFrameRight skin elements are used instead.


Ribbon.FormFrameRight

FormFrameRight

A Ribbon form’s right border.

This skin element provides two images that represent the following form states:

  1. Active

  2. Inactive

To provide images for the Ribbon form’s bottom and left borders, use the Ribbon.FormFrameBottom and Ribbon.FormFrameLeft skin elements.

Note: These skin elements are not applied to dialog boxes and MDI child forms. The Ribbon.DialogFrameBottom, Ribbon.DialogFrameLeft, and Ribbon.DialogFrameRight skin elements are used instead.


Ribbon.InRibbonGalleryButtonDown

InRibbonGalleryButtonDown

An in-Ribbon gallery’s scroll down button.

This skin element provides four images and corresponding glyphs that represent the following button states:

  1. Normal

  2. Hot-tracked

  3. Pressed

  4. Disabled


Ribbon.InRibbonGalleryButtonDropDown

InRibbonGalleryButtonDropDown

An in-Ribbon gallery’s dropdown button.

This skin element provides four images and corresponding glyphs that represent the following button states:

  1. Normal

  2. Hot-tracked

  3. Pressed

  4. Disabled


Ribbon.InRibbonGalleryButtonUp

InRibbonGalleryButtonUp

An in-Ribbon gallery’s scroll up button.

This skin element provides four images and corresponding glyphs that represent the following button states:

  1. Normal

  2. Hot-tracked

  3. Pressed

  4. Disabled


Ribbon.InRibbonGalleryPane

InRibbonGalleryPane

An in-Ribbon gallery’s background.

This skin element provides three images that represent the following gallery states:

  1. Normal

  2. Hot-tracked

  3. Pressed


Ribbon.LargeButton

LargeButton

A large toolbar button.

This skin element provides six images that represent the following button states:

  1. Normal

  2. Hot-tracked

  3. Pressed

  4. Normal (*)

  5. Hot-tracked (*)

  6. Pressed (*)

(*) applies to toggle buttons whose Down property is set to True.


Ribbon.LargeSplitButtonBottom

LargeSplitButtonBottom

The bottom part of a large size split button.

This skin element is applied to large toolbar buttons if their ButtonStyle property is set to bsDropDown or bsCheckedDropDown.

The skin element provides five images that represent the following button states:

  1. Normal

  2. Hot-tracked

  3. Pressed

  4. Normal when the button’s top part is hot-tracked

  5. <Reserved for future use>

To provide images for the button’s top part, use the Ribbon.LargeSplitButtonTop skin element.


Ribbon.LargeSplitButtonTop

LargeSplitButtonTop

The top part of a large size split button.

This skin element is applied to large toolbar buttons if their ButtonStyle property is set to bsDropDown or bsCheckedDropDown.

The skin element provides five images that represent the following button states:

  1. Normal

  2. Hot-tracked

  3. Pressed

  4. Normal when the button’s bottom part is hot-tracked

  5. <Reserved for future use>

To provide images for the button’s bottom part, use the Ribbon.LargeSplitButtonBottom skin element.


Ribbon.QATAboveBackground

QATAboveBackground

DisplayCustomizeButtonOutsideQAT IndentBeforeCustomizeButton

The Quick Access Toolbar’s background when it’s located at the top of the Ribbon within a non-Ribbon form.

This skin element is applied to the Quick Access Toolbar if its Position property is set to qtpAboveRibbon.


Ribbon.QATAboveBackground.DisplayCustomizeButtonOutsideQAT

QATAboveBackground.DisplayCustomizeButtonOutsideQAT

QATAboveBackground

Use this property to specify the position of the Customize button, relative to the Quick Access Toolbar when it’s located at the top of the Ribbon within a non-Ribbon form. To display the Customize button inside the Quick Access Toolbar, set the property to False. Otherwise, the button will be displayed outside the Quick Access Toolbar.


Ribbon.QATAboveBackground.IndentBeforeCustomizeButton

QATAboveBackground.IndentBeforeCustomizeButton

QATAboveBackground

Use this property to adjust the indent (in pixels) before the Customize button and the Quick Access Toolbar, when it’s located at the top of the Ribbon within a non-Ribbon form.


Ribbon.QATBelowBackground

QATBelowBackground

The Quick Access Toolbar’s background when it’s located at the bottom of the Ribbon.

This skin element is applied to the Quick Access Toolbar if its Position property is set to qtpBelowRibbon.


Ribbon.QATButtonGlyph

QATButtonGlyph

A glyph that is displayed for a button within the Quick Access Toolbar when the button doesn’t have an associated image.


Ribbon.QATCustomizeButton

QATCustomizeButton

Use this skin element to provide images and corresponding glyphs for:

  1. Customize button

  2. Double arrow button that is displayed instead of the Customize button when the width of the application window is too small to display all the controls in the Quick Access Toolbar on one row.


Ribbon.QATInRibbonBackground

QATInRibbonBackground

DisplayCustomizeButtonOutsideQAT IndentBeforeCustomizeButton Offset

The Quick Access Toolbar’s background when it’s located at the top of the Ribbon within a Ribbon form.

This skin element is applied to the Quick Access Toolbar if its Position property is set to qtpAboveRibbon.

To provide images for the Quick Access Toolbar in non-Ribbon forms, use the Ribbon.QuickAccessToolbarAboveBackground and Ribbon.QuickAccessToolbarBelowBackground skin elements.


Ribbon.QATInRibbonBackground.DisplayCustomizeButtonOutsideQAT

QATInRibbonBackground.DisplayCustomizeButtonOutsideQAT

QATInRibbonBackground

Use this property to specify the position of the Customize button, relative to the Quick Access Toolbar when it’s located at the top of the Ribbon within a Ribbon form. To display the Customize button inside the Quick Access Toolbar, set the property to False. Otherwise, the button will be displayed outside the Quick Access Toolbar.


Ribbon.QATInRibbonBackground.IndentBeforeCustomizeButton

QATInRibbonBackground.IndentBeforeCustomizeButton

QATInRibbonBackground

Use this property to adjust the indent (in pixels) before the Customize button and the Quick Access Toolbar, when it’s located at the top of the Ribbon within a Ribbon form.


Ribbon.QATInRibbonBackground.Offset

QATInRibbonBackground.Offset

QATInRibbonBackground

In addition to FormAppButton.RightIndent, this property allows you to increase the indent (in pixels) between the Application Button and Quick Access Toolbar in a Ribbon form.


Ribbon.QATOverflow

QATOverflow

Use this skin element to provide images for the background of an overflow Quick Access Toolbar.

This toolbar is displayed when clicking the toolbar’s double arrow. This button appears when the width of the application window is too small to display all the controls in the Quick Access Toolbar on one row.

To provide a glyph for a right-pointing double arrow, use the Ribbon.QATCustomizeButton skin element.


Ribbon.SplitButtonLeft

SplitButtonLeft

The left part of a standard-size split button.

This skin element is applied to standard toolbar buttons if their ButtonStyle property is set to bsDropDown and bsCheckedDropDown.

The skin element provides five images that represent the following button states:

  1. Normal

  2. Hot-tracked

  3. Pressed

  4. Normal when the button’s right part is hot-tracked

  5. <Reserved for future use>

To provide images for the button’s right part, use the Ribbon.SplitButtonRight skin element.


Ribbon.SplitButtonRight

SplitButtonRight

The right part of a standard-size split button.

This skin element is applied to standard toolbar buttons if their ButtonStyle property is set to bsDropDown and bsCheckedDropDown.

The skin element provides five images that represent the following button states:

  1. Normal

  2. Hot-tracked

  3. Pressed

  4. Normal when the button’s left part is hot-tracked

  5. <Reserved for future use>

To provide images for the button’s left part, use the Ribbon.SplitButtonLeft skin element.


Ribbon.StatusBarBackground

StatusBarBackground

Use this skin element to provide background images for a Ribbon status bar and its panels.

This skin element provides two images that represent background for:

  1. Ribbon status bar. Normal and lowered panels (the panel’s Bevel property is set to cxpbNone or cxpbLowered) are painted using this background.

  2. Raised panels (the panel’s Bevel property is set to cxpbRaised).


Ribbon.StatusBarButton

StatusBarButton

TextColor TextColorDisabled TextColorHot

A button displayed in a Ribbon status bar.

This skin element provides six images that represent the following button states:

  1. Normal

  2. Hot-tracked

  3. Pressed

  4. Normal (*)

  5. Hot-tracked (*)

  6. Pressed (*)

(*) applies to toggle buttons whose Down property is set to True.


Ribbon.StatusBarButton.TextColor

StatusBarButton.TextColor

StatusBarButton

Use this property to specify the caption color for regular buttons in a Ribbon status bar.

To specify the caption color for disabled and hot-tracked buttons, use the Ribbon.StatusBarButton.TextColorDisabled and Ribbon.StatusBarButton.TextColorHot properties, respectively.


Ribbon.StatusBarButton.TextColorDisabled

StatusBarButton.TextColorDisabled

StatusBarButton

Use this property to specify the caption color for disabled buttons in a Ribbon status bar.

To specify the caption color for regular and hot-tracked buttons, use the Ribbon.StatusBarButton.TextColor and Ribbon.StatusBarButton.TextColorHot properties, respectively.


Ribbon.StatusBarButton.TextColorHot

StatusBarButton.TextColorHot

StatusBarButton

Use this property to specify the caption color for hot-tracked buttons in a Ribbon status bar.

To specify the caption color for regular and disabled buttons, use the Ribbon.StatusBarButton.TextColor and Ribbon.StatusBarButton.TextColorDisabled properties, respectively.


Ribbon.StatusBarSeparator

StatusBarSeparator

A panel separator in a Ribbon status bar.


Ribbon.Tab

Tab

TextColorSelected

A Ribbon tab.

This skin element provides five images that represent the following tab states:

  1. Normal for inactive tabs

  2. Hot-tracked for inactive tabs

  3. <Reserved for future use>

  4. Normal for the currently active tab

  5. Hot-tracked for the currently active tab


Ribbon.Tab.TextColorSelected

Tab.TextColorSelected

Tab

Use this property to specify the caption color for the currently active tab.


Ribbon.TabBackground

TabBackground

A background for Ribbon tabs.

This skin element provides two images that represent the following button states:

  1. Normal

  2. <Reserved for future use>


Ribbon.TabGroup

TabGroup

A Ribbon tab group’s background.

This skin element provides two images that represent the following group states:

  1. Normal

  2. Hot-tracked


Ribbon.TabGroupButton

TabGroupButton

A toolbar title button.

This skin element provides three images and corresponding glyphs that represent the following button states:

  1. Normal

  2. Hot-tracked

  3. Pressed


Ribbon.TabGroupCaption

TabGroupCaption

A Ribbon tab group’s caption.

This skin element provides two images that represent the caption in the following group states:

  1. Normal

  2. Hot-tracked


Ribbon.TabGroupCollapsed

TabGroupCollapsed

A collapsed Ribbon tab group’s background.

This skin element provides three images that represent the following group states:

  1. Normal

  2. Hot-tracked

  3. Pressed


Ribbon.TabGroupCollapsedBox

TabGroupCollapsedBox

The background of a box that is displayed for a collapsed Ribbon tab group’s glyph.


Ribbon.TabHeaderDownGrow

TabHeaderDownGrow

By default, the active tab’s base is elevated over a tab panel. The Ribbon.TabHeaderDownGrow property allows you to increase (grow downward) the active tab’s height, so that it perfectly fits a tab panel.


Ribbon.TabPanel

TabPanel

A Ribbon tab panel’s background.


Scheduler.AllDayArea

AllDayArea

The all-day event area. The all-day event area is displayed in the Day View.


Scheduler.AllDayAreaSelected

AllDayAreaSelected

The currently selected all-day event area. The all-day event area is displayed in the Day View.


Scheduler.Appointment

Appointment

BorderSize SeparatorColor

The user event.


Scheduler.AppointmentMask

AppointmentMask

The pattern for the user event‘s borders and label.


Scheduler.Appointment.SeparatorColor

Appointment.SeparatorColor

Appointment

The color of the separator that divides the user event’s caption and the user event’s description.


Scheduler.AppointmentBottomShadow

AppointmentBottomShadow

The user event‘s bottom shadow. The user event‘s shadow is displayed in the Day View.

The shadow is displayed if the TcxExpressSchedulerDayView.EventShadows option is enabled.


Scheduler.AppointmentRightBorder

AppointmentRightBorder

The user event‘s right border.


Scheduler.AppointmentRightShadow

AppointmentRightShadow

The user event‘s right shadow. A user event‘s shadow is displayed in the Day View.

The shadow is displayed if the TcxExpressSchedulerDayView.EventShadows option is enabled.


Scheduler.Appointment.BorderSize

Appointment.BorderSize

Appointment

The border size of the selected user event‘s bounding rectangle, in pixels.


Scheduler.CurrentTimeIndicator

CurrentTimeIndicator

A time ruler’s current time marker. The time ruler is displayed in the Day View.


Scheduler.DefaultTimeLine

DefaultTimeLine

The timeline bar. The timeline bar is displayed in the Day View.


Scheduler.MoreButton

MoreButton

The more user events button. This button is displayed if one or more user events are beyond the scheduling area’s boundaries (in the Day View) or the day’s cell (in the Week, Weeks, Year or Time Grid views).


Scheduler.NavButtonNext

NavButtonNext

The next user events navigation button. This button is displayed if no user events are scheduled on the date currently shown in the View. This button is enabled if user events are scheduled on the next dates.


Scheduler.NavButtonNextArrow

NavButtonNextArrow

The next user events navigation button’s arrow. The user events navigation button is displayed if no user events are scheduled on the date currently shown in the View. This button is enabled if user events are scheduled on the next dates.


Scheduler.NavButtonPrev

NavButtonPrev

The previous user events navigation button. This button is displayed if no user events are scheduled on the date currently shown in the View. This button is enabled if user events are scheduled on the next dates.


Scheduler.NavButtonPrevArrow

NavButtonPrevArrow

The previous user events navigation button’s arrow. The user events navigation button is displayed if no user events are scheduled on the date currently shown in the View. This button is enabled if user events are scheduled on the next dates.


Scheduler.NavigatorColor

NavigatorColor

Specifies the color of the resource navigator. The resource navigator is displayed in the Day, Week, Weeks, and Time Grid views.


Scheduler.Ruler

Ruler

The time ruler. The time ruler is displayed in the Day View.


Scheduler.TimeGridHeader

TimeGridHeader

The time selection bar. The time selection bar is displayed in the Time Grid View.


Scheduler.TimeGridHeaderSelected

TimeGridHeaderSelected

The currently selected area in the time selection bar. The time selection bar is displayed in the Time Grid View.


VerticalGrid.BandBorder

BandBorder

The band border’s color. The band is displayed in the Bands View.


VerticalGrid.Category

Category

The color and caption color of category rows.


VerticalGrid.GridLine

GridLine

The color of grid lines.