Excel Ribbon Dropdown background color

Question

I have created a Excel Ribbon where am having a dropdown for the user to switch to differenct Environments of our plugin, is there a way by which I can give background color to the selected value in dropdown, so say in case of live I can show Live with red background, Dev with green background likewise

Answer 1

It's not possible to change the background of the DropDown (or the items), but you can use different images for each item. Something like this:

<?xml version="1.0" encoding="utf-8" ?>
<customUI xmlns="http://schemas.microsoft.com/office/2006/01/customui" onLoad="OnLoad">
  <ribbon>
    <tabs>
      <tab id="MyAddInTab" label="MY ADD-IN TAB">
        <group id="EnvironmentGroup" label="Environment">
          <dropDown id="environmentDropDown" showImage="true" showItemImage="true"
                    getImage="OnEnvironmentGetImage"
                    onAction="OnEnvironmentSelectionChanged"
                    getSelectedItemID="OnEnvironmentGetSelectedItemId">
            <item id="environmentDev" imageMso="ColorGreen" label="Development" />
            <item id="environmentTest" imageMso="ColorYellow" label="User Testing" />
            <item id="environmentProd" imageMso="ColorRed" label="Production" />
          </dropDown>
        </group>
      </tab>
    </tabs>
  </ribbon>
</customUI>

Unfortunately the image is not visible after the user selects an item from the dropdown, so you have to invalidate the ribbon and dynamically set a new image to the control, when the selection changes.

Something like this:

[ComVisible(true)]
public class MyAddInRibbon : ExcelRibbon
{
    private IRibbonUI _thisRibbon;

    private string _selectedEnvironmentId = "environmentDev"; // Defaults to Dev

    public void OnLoad(IRibbonUI ribbon)
    {
        if (ribbon == null)
        {
            throw new ArgumentNullException(nameof(ribbon));
        }

        _thisRibbon = ribbon;
    }

    public string OnEnvironmentGetSelectedItemId(IRibbonControl control)
    {
        return _selectedEnvironmentId;
    }

    public void OnEnvironmentSelectionChanged(IRibbonControl control, 
string selectedId, int selectedIndex)
    {
        _selectedEnvironmentId = selectedId;

        // Invalidate the drop down, so we can update the image next to the dropdown
        _thisRibbon.InvalidateControl("environmentDropDown");
    }

    public string OnEnvironmentGetImage(IRibbonControl control)
    {
        // This displays the image next to the dropdown

        switch (_selectedEnvironmentId)
        {
            case "environmentDev":
                return "ColorGreen";
            case "environmentTest":
                return "ColorYellow";
            case "environmentProd":
                return "ColorRed";
            default:
                throw new InvalidOperationException();
        }
    }
}