Add and Customize the Toolbar and Menu Skin Selector

• Oct 29, 2020
• 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.

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

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”).

   C#

   string[] skinsToHide = { "Seven Classic", "DevExpress Style", "Dark", "2010", "2007", "Sharp" }; 
   

   VB.NET

   Dim skinsToHide() As String = { "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.

   C#

   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;
           }
       }
   }
   

   VB.NET

   Private Sub HideSkins(ByVal skinsToHide() As String)
       For i = 0 To skinBarSubItem1.ItemLinks.Count - 1
           'Check Items
           If TypeOf skinBarSubItem1.ItemLinks(i) Is BarButtonItemLink Then
               Dim item = skinBarSubItem1.ItemLinks(i)
               For Each skin In skinsToHide
                   If item.Caption.Contains(skin) Then
                       item.Visible = False
                   End If
               Next skin
           End If
           'Check bonus skins
           If TypeOf skinBarSubItem1.ItemLinks(i) Is BarSubItemLink AndAlso skinBarSubItem1.ItemLinks(i).Caption <> "Theme Skins" Then
               Dim group As BarSubItemLink = CType(skinBarSubItem1.ItemLinks(i), BarSubItemLink)
               For j = 0 To group.Item.ItemLinks.Count - 1
                   Dim item = group.Item.ItemLinks(j)
                   For Each skin In skinsToHide
                       If item.Caption.Contains(skin) Then
                           item.Visible = False
                       End If
                   Next skin
               Next j
           End If
           'Hide theme skins
           If TypeOf skinBarSubItem1.ItemLinks(i) Is BarSubItemLink AndAlso skinBarSubItem1.ItemLinks(i).Caption = "Theme Skins" Then
               skinBarSubItem1.ItemLinks(i).Visible = False
           End If
       Next i
   End Sub
   

3. Call your method from the Load event handler to ensure that the skin sub-item is initialized.

   C#

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

   VB.NET

   Private Sub ucBar_Load(ByVal sender As Object, ByVal e As EventArgs)
       HideSkins(skinsToHide)
   End Sub
   

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.

C#

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";
        }
    }
}

VB.NET

Private Sub ucBar_Load(ByVal sender As Object, ByVal e As EventArgs)
    RenameSkins()
End Sub
Private Sub RenameSkins()
    For i = 0 To skinBarSubItem1.ItemLinks.Count - 1
        If skinBarSubItem1.ItemLinks(i).Caption = "DevExpress Style" Then
            Dim parentItem As BarButtonItem = CType(skinBarSubItem1.ItemLinks(i).Item, BarButtonItem)
            parentItem.Caption = "Default Skin"
            parentItem.ImageUri.Uri = "Apply"
        End If
    Next i
End Sub

The figure below shows the result.

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.