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
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.
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:
- Enable the AppearanceOptionsEx.HighPriority option for the target Appearance property:
C#(GridView.Appearance.SelectedRow as AppearanceObjectEx).Options.HighPriority = true;
- Customize the appearance of row cells with the GridView.RowStyle, GridView.RowCellStyle or GridView.CustomDrawCell event.
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.
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.
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.
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;
}
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:
- Create a custom Skin.
- In the Skin Editor, expand the Button Glyphs (docking) item. It is available in the Bars collection.
- 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.
- 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.
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.
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
- Create a custom Skin using the Skin Editor.
- Locate the Common->Buttons->Simple Button skin element.
- 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.
- In SVG Workshop, specify the corner radius for the image.
- 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;
}