Build a Custom End-User Skin Selector

• Aug 01, 2023
• 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.

This section explains how to populate a ComboBoxEdit control with DevExpress skin items.

1. To populate a combo box editor, iterate through the SkinManager.Skins collection, which returns all currently available DevExpress skins, and create a new combo box item for each applicable skin – as illustrated in the code below.

   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. For instance, the following code sample excludes the “Caramel” skin and any “Office 2007…” skin, and 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 provides multiple Init... methods that allow you to populate custom controls with skin/palette items.

In the figure below, two ribbon buttons are custom skin and palette selectors. The BarButtonItem.ButtonStyle property for both buttons equals DropDown. Each button has an associated PopupControlContainer assigned to the BarButtonItem.DropDownControl property. Popup Control Containers host Gallery Controls whose Dock properties are set to Fill.

The code below demonstrates how to populate these selectors with the InitSkinGallery and InitSkinPaletteGallerymethods.

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)