Log In
Home
Support
Demos
Documentation
Blogs
Training
Webinars
[Expand]General Information
[Collapse]WinForms Controls
  Prerequisites
 [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]Bars
   [Expand]Ribbon
   [Expand]Popup Menus
    Radial Menu
   [Collapse]Common Features
    [Collapse]Appearance and Look and Feel
      Look And Feel and Skinning
      Appearances
      Appearance Inheritance Options
      Alpha Blending and Background Images
      Bar and Docking Controllers
      Bar and Ribbon Glyph Skinning
      How to: Populate a Menu and Ribbon Gallery with DevExpress Skin Items and Localize Them
    [Expand]Galleries
     Stub Glyphs
     The List of Bar Items and Links
   [Expand]Examples
  [Expand]Application UI Manager
  [Expand]Docking Library
  [Expand]Data Grid
  [Expand]Vertical Grid
  [Expand]Pivot Grid
  [Expand]Tree List
  [Expand]Chart Control
  [Expand]Diagrams
  [Expand]Gauges
  [Expand]Map Control
  [Expand]Scheduler
  [Expand]Spreadsheet
  [Expand]Rich Text Editor
  [Expand]Spell Checker
  [Expand]Form Layout Managers
  [Expand]Navigation Controls
  [Expand]Printing-Exporting
  [Expand]PDF Viewer
   Reporting
  [Expand]Snap
  [Expand]TreeMap Control
 [Expand]Common Features
  Get More Help
 [Expand]API Reference
[Expand]ASP.NET Controls and MVC Extensions
[Expand]ASP.NET Bootstrap Controls
[Expand]WPF Controls
[Expand]Xamarin Controls
[Expand]Windows 10 App Controls
[Expand]Document Server
[Expand]Reporting
[Expand]Report Server
[Expand]Dashboard
[Expand]eXpressApp Framework
[Expand]CodeRush
[Expand]Cross-Platform Core Libraries
[Expand]Tools and Utilities
 End-User Documentation

Bar and Ribbon Glyph Skinning

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

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

How would you rate this topic?​​​​​​​