Create a Custom Skin Selector

Jan 27, 2026
4 minutes to read

Tip

Read the following for information on how to display pre-designed Ribbon UI commands that correspond to advanced skin settings: Ribbon Skin Selectors.

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

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.
Handle the ComboBoxEdit.SelectedIndexChanged event to apply a corresponding skin when a user selects a combo box item.
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#
VB.NET

csharp

//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);

'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.