Skip to main content

Add and Customize the Ribbon Skin List and Skin Gallery

  • 5 minutes to read

The Skin List and Skin Gallery allow users to select a skin. This article explains how to display the Skin List or Skin Gallery in a ribbon and customize it.



Most applications in the DevExpress Demo Center allow you to select a skin. For example, run the XtraGrid demo and navigate to the Skins ribbon page to change the current skin.

You can add the following items to a ribbon control to allow users to select a skin and palette:

  • Skin List (a SkinDropDownButtonItem object) — a drop-down menu that displays skins in a list.


  • Skin Gallery (a SkinRibbonGalleryBarItem object) — an in-ribbon gallery that displays skins. Skins in the gallery are grouped into categories.


  • Skin Palette List (a SkinPaletteDropDownButtonItem object) — allows users to select a vector skin’s palette in a drop-down gallery.


  • Skin Palette Gallery (a SkinPaletteRibbonGalleryBarItem object) — allows users to select a vector skin’s palette in an embedded or drop-down gallery.


To add the Skin List or Skin Gallery in the designer, right-click a RibbonPageGroup and invoke the corresponding command.


You can access the Skin List or Skin Gallery in code to customize it — hide a particular skin or skin category, change a caption, icon, etc. See examples below.

Hide Specific Items And Groups

The steps below describe how to hide individual skins.

  1. Create a string array that contains unwanted skin names. These names can be full (e.g., “Office 2016 Colorful”) or partial (e.g., “2007”).

    string[] skinsToHide = { "Seven Classic", "DevExpress Style", "Dark", "2010", "2007", "Sharp" };
  2. Define a custom method that will iterate through skin items and hide unwanted ones.

    private void HideGalleryItemsByCaptions(RibbonGalleryBarItem galleryItem, string[] skinsToHide) {
        var allItems = galleryItem.Gallery.GetAllItems();
        foreach (GalleryItem item in allItems) {
            if (skinsToHide.Contains(item.Caption))
                item.Visible = false;
  3. Use the form or UserControl Load event handler to call your method.

    this.Load += ucRibbon_Load;
    void ucRibbon_Load(object sender, EventArgs e) {
        HideGalleryItemsByCaptions(skinRibbonGalleryBarItem1, skinsToHide);

To hide an entire skin group, use the code sample below.

void ucRibbon_Load(object sender, EventArgs e) {
            .First(x => String.Equals(x.Caption, "Bonus Skins")));

Remove Item Grouping

To remove item grouping, add a new gallery group and populate it with all existing gallery items. Then, you can remove all gallery groups except for your new custom group – as illustrated in the code sample below.

void ucRibbon_Load(object sender, EventArgs e) {

void RemoveGrouping() {
    GalleryItemGroup group = new GalleryItemGroup() { Caption = "Available Skins" };
    skinRibbonGalleryBarItem1.Gallery.Groups.Insert(0, group);
    foreach(var item in skinRibbonGalleryBarItem1.Gallery.GetAllItems()) {
    while(skinRibbonGalleryBarItem1.Gallery.Groups.Count > 1)

Change Captions and Icons Manually

To change captions and glyphs of items within a Ribbon skin gallery, iterate through gallery items and modify the following properties:

void ucRibbon_Load(object sender, EventArgs e) {
void CustomizeItems(SkinRibbonGalleryBarItem target) {
    foreach(var item in target.Gallery.GetAllItems()) {
        if(item.Caption == "DevExpress Dark Style") {
            item.Caption = item.Hint = "Default Skin";
            item.Description = "The default skin";
            // We recommend that you use vector images.
            item.ImageOptions.SvgImage = SvgImage.FromResources("DXApplication1.Resources.Driving.svg", typeof(Form1).Assembly);
            // The vector image has priority over the raster image.
            // To assign a raster image, nullify the default vector image.
            item.ImageOptions.SvgImage = null;
            item.ImageOptions.Image = DevExpress.Images.ImageResourceCache.Default.GetImage("office2013/miscellaneous/colors_16x16.png");
            item.ImageOptions.HoverImage = DevExpress.Images.ImageResourceCache.Default.GetImage("office2013/miscellaneous/colors_32x32.png");

The figure below shows the result.

Skins - Custom Ribbon Skin Item

Change Skin Captions Using a Localizer

You can use Localizer objects instead of renaming skin items manually. See the How To: Localize Bar and Ribbon Skin Items article to learn more.