Build a Custom End-User Skin Selector

• Jul 21, 2025
• 4 minutes to read

Tip

Read the following topic for information on how to display pre-designed Ribbon UI commands that correspond to advanced skin settings: Add and Customize the Ribbon Skin List and Skin Gallery.

The following example populates a ComboBoxEdit control with DevExpress skin items.

1. To populate a combo box editor, iterate through the SkinManager.Skins collection, which returns available DevExpress skins. Create a new combo box item for each applicable skin.

   C#

   // Uncomment the following line to add bonus and theme skins.
   // DevExpress.UserSkins.BonusSkins.Register();
   foreach (SkinContainer cnt in SkinManager.Default.Skins) {
       comboBoxEdit1.Properties.Items.Add(cnt.SkinName);
   }
   

   VB.NET

   ' Uncomment the following line to add bonus and theme skins.
   ' DevExpress.UserSkins.BonusSkins.Register()
   For Each cnt As SkinContainer In SkinManager.Default.Skins
       comboBoxEdit1.Properties.Items.Add(cnt.SkinName)
   Next cnt
   

   You can implement more complex logic to skip or rename specific skins. The following code sample:

   • Excludes “Caramel” and “Office 2007” skins.
   • Renames “DevExpress Style” and “DevExpress Dark Style” skins to ”Default Skin” and ”Default Dark Skin”, respectively.
   C#

   DevExpress.UserSkins.BonusSkins.Register();
   foreach (SkinContainer cnt in SkinManager.Default.Skins) {
       if (cnt.SkinName.Contains("Office 2007") || cnt.SkinName == "Caramel")
           continue; 
       if(!cnt.SkinName.Contains("DevExpress"))
           comboBoxEdit1.Properties.Items.Add(cnt.SkinName);
       else switch(cnt.SkinName) {
               case "DevExpress Style":
                   comboBoxEdit1.Properties.Items.Add("Default Skin");
                   break;
               case "DevExpress Dark Style":
                   comboBoxEdit1.Properties.Items.Add("Default Dark Skin");
                   break;
           }
   }
   

   VB.NET

   DevExpress.UserSkins.BonusSkins.Register()
   For Each cnt As SkinContainer In SkinManager.Default.Skins
       If cnt.SkinName.Contains("Office 2007") OrElse cnt.SkinName = "Caramel" Then
           Continue For
       End If
       If Not cnt.SkinName.Contains("DevExpress") Then
           comboBoxEdit1.Properties.Items.Add(cnt.SkinName)
       Else
           Select Case cnt.SkinName
               Case "DevExpress Style"
                   comboBoxEdit1.Properties.Items.Add("Default Skin")
               Case "DevExpress Dark Style"
                   comboBoxEdit1.Properties.Items.Add("Default Dark Skin")
           End Select
       End If
   Next cnt
   

2. Handle the ComboBoxEdit.SelectedIndexChanged event to apply a corresponding skin when a user selects a combo box item.

   C#

   private void ComboBoxEdit1_SelectedIndexChanged(object sender, EventArgs e) {
       ComboBoxEdit comboBox = sender as ComboBoxEdit;
       string skinName = comboBox.Text;
       switch (skinName) {
           case "Default Skin":
               DevExpress.LookAndFeel.UserLookAndFeel.Default.SkinName = "DevExpress Style";
               break;
           case "Default Dark Skin":
               DevExpress.LookAndFeel.UserLookAndFeel.Default.SkinName = "DevExpress Dark Style";
               break;
           default:
               DevExpress.LookAndFeel.UserLookAndFeel.Default.SkinName = skinName;
               break;
       }
   }
   

   VB.NET

   Private Sub ComboBoxEdit1_SelectedIndexChanged(ByVal sender As Object, ByVal e As EventArgs)
       Dim comboBox As ComboBoxEdit = TryCast(sender, ComboBoxEdit)
       Dim skinName As String = comboBox.Text
       Select Case skinName
           Case "Default Skin"
               DevExpress.LookAndFeel.UserLookAndFeel.Default.SkinName = "DevExpress Style"
           Case "Default Dark Skin"
               DevExpress.LookAndFeel.UserLookAndFeel.Default.SkinName = "DevExpress Dark Style"
           Case Else
               DevExpress.LookAndFeel.UserLookAndFeel.Default.SkinName = skinName
       End Select
   End Sub
   

3. Run the application to see the result.

   

SkinHelper Methods

The DevExpress.XtraBars.Helper.SkinHelper class introduces Init* methods that allow you to populate custom controls with skin/palette items.

In the following image, two ribbon buttons are custom skin and palette selectors:

• The BarButtonItem.ButtonStyle property for both buttons is set to DropDown.
• Each button has an associated PopupControlContainer, which is assigned to the BarButtonItem.DropDownControl property.
• Popup Control Containers host Gallery Controls.

The following example uses InitSkinGallery and InitSkinPaletteGallerymethods to populate skin selectors.

C#

//Container and gallery settings
popupControlContainer1.AutoSize =
    popupControlContainer2.AutoSize = true;
popupControlContainer1.AutoSizeMode =
    popupControlContainer2.AutoSizeMode = AutoSizeMode.GrowAndShrink;
galleryControl1.Gallery.AutoSize =
    galleryControl2.Gallery.AutoSize = GallerySizeMode.Both;

//Populate the skin gallery
galleryControl2.Gallery.RowCount = 6;
SkinHelper.InitSkinGallery(galleryControl2);

#region Optional Settings
//Uncomment these lines to modify the gallery
//---Enlarge item images
/*foreach (GalleryItem item in galleryControl2.Gallery.GetAllItems())
    item.ImageOptions.Image = item.ImageOptions.HoverImage;
galleryControl2.Gallery.ImageSize = new Size(48, 48);
galleryControl2.Gallery.AllowHoverImages = false;*/
//---Hide item and group captions
/*galleryControl2.Gallery.ShowItemText = false;
galleryControl2.Gallery.ShowGroupCaption = false;*/
//---Hide group selector
/*galleryControl2.Gallery.AllowFilter = false;*/
//---Remove "Custom Skins" and "Theme Skins" groups
/*galleryControl2.Gallery.Groups.RemoveAt(3);
galleryControl2.Gallery.Groups.RemoveAt(2);*/
#endregion

//Populate the palette gallery
galleryControl1.Gallery.ColumnCount = 6;
SkinHelper.InitSkinPaletteGallery(galleryControl1);

VB.NET

'Container and gallery settings
popupControlContainer2.AutoSize = True
popupControlContainer1.AutoSize = popupControlContainer2.AutoSize
popupControlContainer2.AutoSizeMode = AutoSizeMode.GrowAndShrink
popupControlContainer1.AutoSizeMode = popupControlContainer2.AutoSizeMode
galleryControl2.Gallery.AutoSize = GallerySizeMode.Both
galleryControl1.Gallery.AutoSize = galleryControl2.Gallery.AutoSize

'Populate the skin gallery
galleryControl2.Gallery.RowCount = 6
SkinHelper.InitSkinGallery(galleryControl2)

'#Region "Optional Settings"
'Uncomment these lines to modify the gallery
'---Enlarge item images
'foreach (GalleryItem item in galleryControl2.Gallery.GetAllItems())
'    item.ImageOptions.Image = item.ImageOptions.HoverImage;
'galleryControl2.Gallery.ImageSize = new Size(48, 48);
'galleryControl2.Gallery.AllowHoverImages = false;
'---Hide item and group captions
'galleryControl2.Gallery.ShowItemText = false;
'galleryControl2.Gallery.ShowGroupCaption = false;
'---Hide group selector
'galleryControl2.Gallery.AllowFilter = false;
'---Remove "Custom Skins" and "Theme Skins" groups
'galleryControl2.Gallery.Groups.RemoveAt(3);
'galleryControl2.Gallery.Groups.RemoveAt(2);
'#End Region

'Populate the palette gallery
galleryControl1.Gallery.ColumnCount = 6
SkinHelper.InitSkinPaletteGallery(galleryControl1)

Note

The SkinHelper.InitSkinPaletteGallery method overrides gallery properties set by the user (including properties configured at design time). The method resets gallery properties every time the application skin changes. To preserve custom gallery settings, reapply them within the UserLookAndFeel.StyleChanged event handler.