[Expand]General Information
[Collapse]WinForms Controls
  .NET Core Support
 [Expand]What's Installed
 [Expand]Build an Application
 [Collapse]Controls and Libraries
  [Expand]Forms and User Controls
  [Expand]Messages, Notifications, and Dialogs
  [Expand]Editors and Simple Controls
  [Collapse]Ribbon, Bars and Menu
   [Expand]Popup Menus
    Radial Menu
   [Collapse]Common Features
    [Collapse]Appearance and Look and Feel
      Look And Feel and Skinning
      Appearance Inheritance Options
      Alpha Blending and Background Images
      Bar and Docking Controllers (Customizing Default View and Behavior Settings)
      Bar and Ribbon Glyph Skinning
     Stub Glyphs
     The List of Bar Items and Links
  [Expand]Application UI Manager
  [Expand]Docking Library
  [Expand]Data Grid
  [Expand]Vertical Grid
  [Expand]Property Grid
  [Expand]Pivot Grid
  [Expand]Tree List
  [Expand]Gantt Control
  [Expand]Chart Control
  [Expand]Map Control
  [Expand]Rich Text Editor
  [Expand]Spell Checker
  [Expand]Form Layout Managers
  [Expand]Navigation Controls
  [Expand]PDF Viewer
  [Expand]TreeMap Control
  [Expand]Sunburst Control
 [Expand]Common Features
  Get More Help
 [Expand]API Reference
[Expand]ASP.NET Controls and MVC Extensions
[Expand]ASP.NET Bootstrap Controls
[Expand]ASP.NET Core Bootstrap Controls
[Expand]WPF Controls
[Expand]Xamarin Controls
[Expand]Windows 10 App Controls
[Expand]Office File API
[Expand]Report and Dashboard Server
[Expand]eXpressApp Framework
[Expand]eXpress Persistent Objects
[Expand]CodeRush Classic
[Expand]Cross-Platform Core Libraries
[Expand]Tools and Utilities
 End-User Documentation
View this topic on docs.devexpress.com (Learn more)

Bar and Ribbon Glyph Skinning

The Glyph Skinning feature can assist you in creating monochrome interfaces for your applications.


The Glyph Skinning feature is designed to be used with raster icons only. Vector icons are automatically colorized using skin palette colors.

To build a monochrome UI, use gray-scaled images, for instance, from the DevExpress Image Gallery. The following image illustrates how to select a gray-scaled glyph for a BarItem via its smart tag.

Gray-scaled images are painted in shades of gray by default. The Glyph Skinning feature allows you to colorize these glyphs, using the color that matches the current skin or a custom color. Thus, this feature comes in handy when you use dark skins or when you wish to use custom colors. The following image compares two Ribbon Controls painted in the DevExpress Dark Style, with the Glyph Skinning feature enabled and disabled:

To enable the Glyph Skinning feature, set the BarManager.AllowGlyphSkinning property to true. Note that you can apply glyph skinning for individual items instead of applying them to the entire BarManager. In this case, use the BarItem.AllowGlyphSkinning property. This property overrides the global Glyph Skinning setting specified via the BarManager.AllowGlyphSkinning property.

For the Ribbon Control and its BackstageView Control, use the RibbonControl.AllowGlyphSkinning and BackstageViewControl.AllowGlyphSkinning properties, respectively.

Different application Skins specify different default foreground colors for the text of UI elements (BarItemLinks). When the Glyph Skinning feature is enabled, the UI elements' glyphs are painted in the Skin's foreground color. The images below illustrate the same UI painted in the Office 2013 and Visual Studio 2013 Dark skins, respectively, with the Glyph Skinning feature enabled. In the Office 2013 skin, elements have black foreground colors, so icons are also painted in black. The Visual Studio 2013 Dark skin applies a white foreground color against a dark background for UI elements and their glyphs.

It is possible to apply a custom foreground color to an element's text and glyphs instead of the default skin foreground color. The Bar Item foreground colors can be customized as follows:

For example, the following code sets the foreground color for all hovered items within the barManager1 to DodgerBlue.

The figure below illustrates the result using the Office 2013 skin.

The image below illustrates a Ribbon Control with the Glyph Skinning feature applied.

RibbonControl and BarManager controls are not the only controls that support the Glyph Skinning feature. See the Glyph Skinning topic for a complete list of controls.

Expanded See Also

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