Add and Customize the Toolbar and Menu Skin Selector

  • 4 minutes to read

You can add a Skin Selector to the Toolbar in an application, so that end-users can choose skins at runtime.

Add a Skin Selector

Bars provide a SkinBarSubItem object to switch application skins at runtime. This item is a sub-menu that displays a list of popular skins, as well as “Bonus Skins” and “Theme Skins” to access additional sub-menus.

Skins - Default Bar Skin Subitem

At design time, click “[Add]” and select “Skin Menu (SkinBarSubItem)” from the drop-down menu to add a sub-menu to the toolbar.

Skins - Add Skin Items Design-Time - Bars

Once you add a required skin item, there is no need to manually implement its functionality. Click a menu item to automatically apply the corresponding skin.

A SkinBarSubItem object is an automatically populated BarSubItem object. To modify this menu, traverse the items via the BarCustomContainerItem.ItemLinks collection and customize them as regular bar item links. The following documentation sections illustrate how to modify this skin menu.

Note that links that represent individual skins are BarButtonItemLink class objects. Sub-items (“Bonus Skins” and “Theme Skins”) are BarSubItemLink objects.

Hide Skins and Skin Groups

You can manually hide a skin item or a sub-group.

  1. Create a string array of skin names to exclude. You can use the full name (e.g., “Office 2016 Colorful”) or partial name (e.g., “2007”).

    string[] skinsToHide = { "Seven Classic", "DevExpress Style", "Dark", "2010", "2007", "Sharp" }; 
    
  2. Create a custom method that will iterate through the bar skin sub-item and remove skins that match values in the array. Similarly, you can hide sub-menus with bonus skins.

    private void HideSkins(string[] skinsToHide) {
        for(var i = 0; i < skinBarSubItem1.ItemLinks.Count; i++) {
            //Check regular button items
            if(skinBarSubItem1.ItemLinks[i] is BarButtonItemLink) {
                var item = skinBarSubItem1.ItemLinks[i];
                foreach(var skin in skinsToHide) {
                    if(item.Caption.Contains(skin)) {
                        item.Visible = false;
                    }
                }
            }
            //Check buttons nested in the "Bonus Skins" sub-menu
            if(skinBarSubItem1.ItemLinks[i] is BarSubItemLink && skinBarSubItem1.ItemLinks[i].Caption == "Bonus Skins") {
                BarSubItemLink group = (BarSubItemLink)skinBarSubItem1.ItemLinks[i];
                for(var j = 0; j < group.Item.ItemLinks.Count; j++) {
                    var item = group.Item.ItemLinks[j];
                    foreach(var skin in skinsToHide) {
                        if(item.Caption.Contains(skin)) {
                            item.Visible = false;
                        }
                    }
                }
            }
            //Hide theme skins
            if(skinBarSubItem1.ItemLinks[i] is BarSubItemLink && skinBarSubItem1.ItemLinks[i].Caption == "Theme Skins") {
                skinBarSubItem1.ItemLinks[i].Visible = false;
            }
        }
    }
    
  3. Call your method from the Load event handler to ensure that the skin sub-item is initialized.

    void ucBar_Load(object sender, EventArgs e) {
        HideSkins(skinsToHide);
    }
    

Change Captions and Icons Manually

Iterate through the BarCustomContainerItem.ItemLinks collection to manually change an item caption or glyph within a skin sub-item. This is similar to the process used to hide specific skins and skin groups.

void ucBar_Load(object sender, EventArgs e) {
    RenameSkins();
}
private void RenameSkins() {
    for(var i = 0; i < skinBarSubItem1.ItemLinks.Count; i++) {
        if(skinBarSubItem1.ItemLinks[i].Caption == "DevExpress Style") {
            BarButtonItem parentItem = (BarButtonItem)skinBarSubItem1.ItemLinks[i].Item;
            parentItem.Caption = "Default Skin";
            parentItem.ImageUri.Uri = "Apply";
        }
    }
}

The figure below shows the result.

Skins - Custom Bar Skin Subitem 1

Change Skin Captions Using a Localizer

You can also use a Localizer object to rename skin items. See the How To: Localize Bar and Ribbon Skin Items article to learn more.