Skip to main content
BuyLog In
WinForms Controls
Search in…
Docs > Build an Application > Skins > Add and Customize the Ribbon Skin List and Skin Gallery
All docs
V23.2
WinForms Controls
.NET/.NET Core Support
Prerequisites
What's Installed
Build an Application
Choose Application UI
Skins
Add and Customize Toolbar Skin Selectors
Add and Customize the Ribbon Skin List and Skin Gallery
Build a Custom End-User Skin Selector
How To: Localize Bar and Ribbon Skin Items
Bonus and Custom Skin Registration
Design-Time Skinning
How To: Create New and Modify Existing Vector Skin Palettes
Localization
Right-to-Left Layout
Printing and Exporting
WinForms MVVM
Accessibility Support
Automated UI Tests (UI Automation, Appium, Coded UI)
Redistribution and Deployment
How to: Perform Actions On Application Startup
Controls and Libraries
Common Features
Security Considerations
UI Templates
Desktop & Web App UI Framework (Powered by EF Core)
Get More Help
API Reference
Download CHM

Add and Customize the Ribbon Skin List and Skin Gallery

  • 8 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.

image

Note

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.

Use the following bar items to add the corresponding UI elements to Ribbon UI: Skin List, Skin Gallery, Skin Palette List, Skin Palette Gallery. Right-click a RibbonPageGroup and invoke the corresponding command to add the Skin List or Skin Gallery at design-time.

image

Skin List

A Skin List (SkinDropDownButtonItem) is a drop-down menu that displays application skins.

image

A Skin Gallery (SkinRibbonGalleryBarItem) is an in-ribbon gallery that displays skins. Skins in the gallery are grouped into categories.

image

Skin Palette List

A Skin Palette List (SkinPaletteDropDownButtonItem) allows users to select a color palette for a vector skin.

image

A Skin Palette Gallery (SkinPaletteRibbonGalleryBarItem) allows users to select a color palette in an embedded or dropdown gallery.

image

Example

The following example demonstrates how to display skin items in Ribbon UI:

Display Skin Items in Ribbon UI - WinForms Controls

using DevExpress.XtraBars;
using DevExpress.XtraBars.Ribbon;

namespace DXApplication20 {
    public partial class Form1 : RibbonForm {
        public Form1() {
            InitializeComponent();
            skinPageGroup.ItemLinks.Add(new SkinDropDownButtonItem());
            skinPageGroup.ItemLinks.Add(new SkinRibbonGalleryBarItem());
            colorPalettePageGroup.ItemLinks.Add(new SkinPaletteDropDownButtonItem());
            colorPalettePageGroup.ItemLinks.Add(new SkinPaletteRibbonGalleryBarItem());
        }
    }
}

Display Advanced Skin Options

The following example demonstrates how to display pre-designed Ribbon UI commands that correspond to advanced skin settings:

Note

“The Bezier” skin supports the second accent color. Other skins do not support the second accent color

Display Advanced Skin Options

using DevExpress.XtraBars;
using DevExpress.XtraBars.Helpers;

namespace DXRibbonSkinSekector {
    public partial class Form1 : DevExpress.XtraBars.Ribbon.RibbonForm {
        BarCheckItem bciTrackWindowsAppMode, bciOriginalPalette, bciTrackWindowsAccentColor;
        BarButtonItem bbiSystemAccentColor, bbiAccentCustomColor2;
        public Form1() {
            InitializeComponent();

            bciTrackWindowsAppMode = new BarCheckItem();
            bciOriginalPalette = new BarCheckItem();
            bciTrackWindowsAccentColor = new BarCheckItem();
            bbiSystemAccentColor = new BarButtonItem();
            bbiAccentCustomColor2 = new BarButtonItem();

            advancedOptionsGroup.ItemLinks.Add(bciTrackWindowsAppMode);
            advancedOptionsGroup.ItemLinks.Add(bciOriginalPalette);
            advancedOptionsGroup.ItemLinks.Add(bciTrackWindowsAccentColor);
            advancedOptionsGroup.ItemLinks.Add(bbiSystemAccentColor);
            /*
             * "The Bezier" skin supports the second accent color.
             * Other skins do not support the second accent color.
             */
            advancedOptionsGroup.ItemLinks.Add(bbiAccentCustomColor2);

            // Initializes corresponding skin settings/selectors.
            SkinHelper.InitTrackWindowsAppMode(bciTrackWindowsAppMode);
            SkinHelper.InitResetToOriginalPalette(bciOriginalPalette);
            SkinHelper.InitTrackWindowsAccentColor(bciTrackWindowsAccentColor);
            SkinHelper.InitCustomAccentColor(Ribbon.Manager, bbiSystemAccentColor);
            SkinHelper.InitCustomAccentColor2(Ribbon.Manager, bbiAccentCustomColor2);
        }
    }
}

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) {
    skinRibbonGalleryBarItem1.Gallery.Groups.Remove(skinRibbonGalleryBarItem1.Gallery.Groups.OfType<GalleryItemGroup>()
            .First(x => String.Equals(x.Caption, "Bonus Skins")));
}

The following example demonstrates how to rename and hide gallery groups in SkinDropDownButtonItem:

using System.Linq;
using DevExpress.XtraBars;
using DevExpress.XtraBars.Ribbon;
using DevExpress.XtraBars.Ribbon.Gallery;
using DevExpress.XtraBars.Helpers;

namespace DXApplication20 {
    public partial class Form1 : RibbonForm {
        SkinDropDownButtonItem skinDropDownButtonItem;
        public Form1() {
            InitializeComponent();
            skinDropDownButtonItem = new SkinDropDownButtonItem(ribbonControl1.Manager);
            skinPageGroup.ItemLinks.Add(skinDropDownButtonItem);
        }
        private void Form1_Load(object sender, System.EventArgs e) {
            HideItems(skinDropDownButtonItem);
        }
        void HideItems(SkinDropDownButtonItem skinItem) {
            GalleryControlGallery gallery = ((skinItem.DropDownControl as SkinPopupControlContainer).Controls.OfType<GalleryControl>().FirstOrDefault()).Gallery;
            gallery.Groups[0].Caption = "My Custom Caption";
            gallery.Groups[1].Visible = false;
            gallery.Groups[2].Visible = false;
        }
    }
}

The following example demonstrates how to hide the specified groups from SkinPaletteDropDownButtonItem:

void HideSkins2(SkinPaletteDropDownButtonItem skinItem, string[] palettesToHide) {
    var groups = (skinItem.DropDownControl as GalleryDropDown).Gallery.Groups;
    for(var i = 0; i < groups.Count; i++) {
        var group = groups[i];
        if(group == null) {
            continue;
        }
        for(var j = 0; j < group.Items.Count; j++) {
            var item = group.Items[j];
            if(item == null) {
                continue;
            }
            foreach(var palette in palettesToHide) {
                if(item.Caption.Contains(palette)) {
                    item.Visible = false;
                }
            }
            if(!group.HasVisibleItems())
                group.Visible = false;
        }
    }
}

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) {
    RemoveGrouping();
}

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

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) {
    CustomizeItems(skinRibbonGalleryBarItem1);
}
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.

Obtain Active Skin

The following example demonstrates how to get the active skin name:

string activeSkinName = DevExpress.UserLookAndFeel.Default.ActiveSkinName;