KB Article T904174
Visible to All Users

Appearances and Skins – WinForms Cheat Sheet

Other DevExpress WinForms Cheat Sheets


The look-and-feel of all DevExpress controls depends on the following factors:

  • Paint Theme - Skin
    The currently applied skin specifies the default look. The skin stores images, default appearance settings, sizes, spaces and other settings that DevExpress controls use to paint their visual elements.
    You can use the Skin Editor tool to create new skins based on existing paint themes.

  • Appearance Settings
    DevExpress controls contain Appearance properties, which allow you to change a control’s font attributes, text alignment options, foreground and background colors, and thus override default skin settings.

  • Customization events
    You can handle dedicated events (~RowStyle, ~RowCellStyle and ~CustomDraw) to customize appearance settings of individual visual elements dynamically.

DevExpress controls share the same principles of control appearance customization. The ways described below are applicable to multiple controls, even though the text may not reference these controls directly.

Examples

Common

Change the application's default font

Use the DevExpress Project Settings dialog to change the default font for all DevExpress controls. See Default Application Font for more information.

Modify the background/border color when changes to Appearance.BackColor/BorderColor have no effect

To change the background (border) color of specific control elements, you can only adjust corresponding skin elements. Run the Skin Editor tool, create a custom Skin, and change the skin element used by the control.

Change a skin's palette

Ensure you're using a vector skin - only vector skins support palettes. Use the UserLookAndFeel.SetSkinStyle method overload that takes a SkinSvgPalette parameter to apply a specific palette.

Adjust the color tone of a raster skin

To colorize raster skins, you can use the UserLookAndFeel.Default.SkinMaskColor and UserLookAndFeel.Default.SkinMaskColor2 properties.

Specify a palette to colorize icons of specific visual elements in SVG skins

Create a custom Skin, locate the required skin element, right-click its caption in the Skin Elements selector, and click the Icon Palette -> Set command. Modify the palette using the opened editor.

Locate a skin element in the Skin Editor

To modify a particular skin element in the Skin Editor, Ctrl+Click the Preview area. The Skin Editor will indicate the skin element that you're hovering over with the mouse. > Once you find the required element, you can customize its settings and images.

Change a skin element in a vector skin

The Skin Editor offers built-in tools to change vector skins. Refer to this article to get familiar with them: Working with Vector Skins
We also recommend you review the KB article that describes solutions for common tasks with SVG Palettes:
SVG Skins and Palettes – FAQ

Modify the form's border color

Create a custom Skin and customize the following skin elements:
Form -> Window -> Borders
Form -> Window -> Captions

Apply DevExpress skins to standard or 3rd-party components

See this article for more information.

Catch the moment when an application's skin is changed

You can handle the StyleChanged event of the static UserLookAndFeel.Default object.

Change FindPanel's highlight color (Data Grid, TreeList etc)

The highlight color is obtained from the currently applied skin and cannot be changed at an individual control level. Thus, to modify it, you can create a custom skin using the Skin Editor tool and use this skin in your application. Modify the CommonColors.HighlightSearch and CommonColors.HighlightSearchText property values to specify a required highlight color.
Alternatively, you can modify these colors in code as we described in the following example: How to change colors of a highlighted text corresponding to a search string of Find Panel.

Data Grid (GridControl)

Make the row selection color overlap the background of column cells in GridView

In grid controls, appearance settings applied to columns overlap appearance settings applied to grid rows.
To elevate the priority of specific appearance settings, you can do the following:

C#
(GridView.Appearance.SelectedRow as AppearanceObjectEx).Options.HighPriority = true;
C#
private void GridView1_CustomDrawCell(object sender, DevExpress.XtraGrid.Views.Base.RowCellCustomDrawEventArgs e) { GridView view = sender as GridView; if (view.IsRowSelected(e.RowHandle)) e.Appearance.Assign(view.PaintAppearance.SelectedRow); }

Specify the background color of GridView's focused row

You can use the following properties to change the background color of the focused and selected rows:
GridView.Appearance.FocusedRow.BackColor
GridView.Appearance.SelectedRow.BackColor
GridView.Appearance.FocusedCell.BackColor
Ensure that the GridView.OptionsSelection.EnableAppearanceFocusedRow and GridView.Appearance.FocusedRow.Options.UseBackColor options are enabled.

Specify the background color of selected rows in a non-focused Grid

Use the GridView.Appearance.HideSelectionRow.BackColor property to change the background color of selected rows in a non-focused Grid.
Ensure that the GridView.OptionsSelection.EnableAppearanceHideSelection and GridView.Appearance.HideSelectionRow.Options.UseBackColor options are enabled.

Ensure the same appearance of selected rows in GridView no matter whether GridView is focused or not

Disable the GridView.OptionsSelection.EnableAppearanceHideSelection option.

Change the background color of GridView's empty space

Use GridView.Appearance.Empty.BackColor and keep the GridView.Appearance.Empty.Options.UseBackColor option enabled.

Increase filter button size

Create a custom Skin and customize the Grid -> Column Headers -> Filtering -> Smart Filter skin element. You can locate this element by Ctrl+Clicking the corresponding visual element.

Disable the focused cell's distinct appearance settings for all rows except the Auto Filter Row

You can handle the GridView.RowStyle event as follows:

C#
private void GridView_RowStyle(object sender, RowStyleEventArgs e) { GridView view = sender as GridView; if (view.IsFilterRow(e.RowHandle)) return; e.Appearance.Assign(view.PaintAppearance.SelectedRow); //e.HighPriority = true; }

Display Plus/Minus in group rows instead of the default Expand/Collapse buttons

Create a custom Skin and customize the Grid -> Group Row -> Expand/Collapse Buttons skin element so it looks as required.

Change the appearance of individual grid cells

Handle the GridView.RowCellStyle event.

Disable grid rows/individual cells or make them read-only

Use Disabled Cell Behavior to disable rows or individual row cells and apply specific appearance settings to disabled items. See also: Make some grid cells read-only. Read-only cells must have a grey background.

TreeList

Colorize selected nodes

Use the TreeList.Appearance.SelectedRow property.

Disable TreeList rows/individual cells or make them read-only

Use Disabled Cell Behavior to disable rows or individual row cells and apply specific appearance settings to disabled items. See also: Make some grid cells read-only. Read-only cells must have a grey background.

Ribbon & Bars

Change the background of the selected Ribbon page

Create a custom Skin and customize the following skin elements:
Ribbon -> Tab Header -> Background (TabHeaderBackground)
Ribbon -> Tab Header -> Tab Header (TabHeaderPage)

Tip: You can add pages to Categories to change page colors.

Increase font size in the selected tab in RecentItemControl

Set the FontSizeDelta property of the RecentTabItem.Appearances.ItemSelected object to a positive value:

C#
recentTabItem.Appearances.ItemSelected.FontSizeDelta = 1; recentTabItem.Appearances.ItemSelected.Options.UseFont = true;

Change the Ribbon Application Button's colors

Create a custom Skin and modify the ApplicationButton2010 skin element's images.

Scheduler

Change an appointment's text color

Use the Appearance.Appointment property to specify the appointment text color:

C#
SchedulerControl.Views.TimelineView.Appearance.Appointment.ForeColor = System.Drawing.Color.White; SchedulerControl.Views.TimelineView.Appearance.Appointment.Options.UseForeColor = true;

Make appointment text regular, but not bold

To customize appearance settings of appointments, handle the SchedulerControl.AppointmentViewInfoCustomizing event.

C#
public Form1() { ... myFont = new Font(AppearanceObject.DefaultFont, FontStyle.Regular); } ... Font myFont; private void SchedulerControl1_AppointmentViewInfoCustomizing(object sender, DevExpress.XtraScheduler.AppointmentViewInfoCustomizingEventArgs e) { e.ViewInfo.Appearance.Font = myFont; }
Navigation controls & content containers

Change the font, foreground, background, and border colors of page headers in TabPane

Use the inherited TabPanel.AppearanceButton property to customize appearance settings of tabs in TabPane.
To modify the border and background colors, create a custom Skin. Please refer to this help topic for more information: Modify Tab Pane and Recent Item Control Skin Elements.

Modify the look of tabs in XtraTabControl

Create a custom Skin and change the Tab -> Tab Header skin element.

Change the text color of the selected item in OfficeNavigationBar

Use the OfficeNavigationBar.AppearanceItem.Selected.ForeColor property. Don't forget to enable OfficeNavigationBar.AppearanceItem.Selected.Options.UseForeColor if you specify the foreground color in code.

Change the look of CustomHeaderButtons in GroupControl

Create a custom Skin and customize the following skin element:
COMMON -> Groups -> Box View -> Custom Button (GroupCustomButton)

Change default glyphs in DockPanel buttons

To change a DockPanel's button glyphs, do the following:

  1. Create a custom Skin.
  2. In the Skin Editor, expand the Button Glyphs (docking) item. It is available in the Bars collection.
  3. Select the required item state (for example, Normal) and modify it. For example, you can load a new glyph or colorize it. Double-click the glyph to open the Edit SVG Pallete window. In this window, you can set colors for available glyphs.
  4. Click Save or OK.

Change the background color of a pressed Tile in TileControl

Use the TileItem.AppearanceItem.Pressed property to specify appearance settings applied to individual tiles when they are pressed. Use the TileControl.AppearanceItem.Pressed property to specify the default appearance settings applied to pressed tiles.

Vertical Grid / Property Grid

Disable grid columns/individual cells or make them read-only

Use Disabled Cell Behavior to disable rows or individual row cells and apply specific appearance settings to disabled items. See also: Make some grid cells read-only. Read-only cells must have a grey background.

Editors & simple controls

Specify the background color of the focused TextEdit

Use the TextEdit.Properties.AppearanceFocused.BackColor property. Ensure that the TextEdit.Properties.AppearanceFocused.Options.UseBackColor option is enabled.
Please also note that some editors don't support a gradient background and background images. Refer to Appearance for details.

Change the background of editor buttons

Create a custom Skin and customize the Editors -> Editor Buttons -> Custom skin element.

Create SimpleButton with round corners

  1. Create a custom Skin using the Skin Editor.
  2. Locate the Common->Buttons->Simple Button skin element.
  3. Run the SVG Workshop tool (you can locate the corresponding command in the Tools menu). SVG Workshop allows you to create an image with rounded corners and use it in a skin element.
  4. In SVG Workshop, specify the corner radius for the image.
  5. Drag the image from SVG Workshop to the skin element's state preview area in the Skin Editor. Alternatively, you can drag-and-drop a circle glyph (12x12) from the GLYPH tab in SVG Workshop to the Skin Editor and then specify the following properties:
    Image -> Size Margins -> All = 10
    Image -> Svg Image Size = 22
    Size -> Paddings -> Left/Right = 10

Display a border (shadow) around SimpleButton

To modify all buttons in your project, you can run the Skin Editor tool and create a custom Skin. Then, locate the Common->Buttons->Simple Button skin element and modify it so that it looks as you require - draw borders (shadows), etc.

For a single button, you can use the common approach - dock the button in a container, specify the container’s Padding and background color. Refer to this Microsoft article for additional information and sample code: How to: Create a Border Around a Windows Forms Control Using Padding.

Modify the text color of elements in a templated ListBoxControl on the fly

You can handle the CustomizeItem event and locate the required element in the e.TemplatedItem.Elements collection. You can then modify the element's text, image, alignment, and appearance settings:

C#
private void listBoxControl_CustomizeItem(object sender, CustomizeTemplatedItemEventArgs e) { e.TemplatedItem.Elements.FirstOrDefault(x => x.Text.StartsWith("@")).Appearance.Normal.ForeColor = Color.Red; }

Help us improve this article

Disclaimer: The information provided on DevExpress.com and affiliated web properties (including the DevExpress Support Center) is provided "as is" without warranty of any kind. Developer Express Inc disclaims all warranties, either express or implied, including the warranties of merchantability and fitness for a particular purpose. Please refer to the DevExpress.com Website Terms of Use for more information in this regard.

Confidential Information: Developer Express Inc does not wish to receive, will not act to procure, nor will it solicit, confidential or proprietary materials and information from you through the DevExpress Support Center or its web properties. Any and all materials or information divulged during chats, email communications, online discussions, Support Center tickets, or made available to Developer Express Inc in any manner will be deemed NOT to be confidential by Developer Express Inc. Please refer to the DevExpress.com Website Terms of Use for more information in this regard.