Build a Custom End-User Skin Selector

  • 4 minutes to read

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.

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

    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.

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

    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;
        }
    }
    
  3. Run the application to see the result.

    Skins - Custom Editor

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.

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