DropDownColorPicker

DropDownColorPicker

The result of this post is a yet another sample, “11-DropDownColorPicker”, found on the project site.

DropDownColorPicker Control The drop-down color picker looks like this:

DropDownColorPicker Properties (with internal details) Following is the list of properties which are unique for DropDownColorPicker control. The rest of the properties have been reviewed in previous posts.

• Color – The selected color. Property Identifier: UI_PKEY_Color

• ColorType – The type of selected color. Can be: NoColor, Automatic or RGB (meaning specific color). Property Identifier: UI_PKEY_ColorType

• AutomaticColorLabel – Defines the label for the “Automatic” color button. Property Identifier: UI_PKEY_AutomaticColorLabel

• MoreColorsLabel – Defines the label for the “More colors…” button. Property Identifier: UI_PKEY_MoreColorsLabel

• NoColorLabel – Defines the label for the “No color” button. Property Identifier: UI_PKEY_NoColorLabel

• RecentColorsCategoryLabel – Defines the label for the “Recent colors” category. Property Identifier: UI_PKEY_RecentColorsCategoryLabel

• StandardColorsCategoryLabel – Defines the label for the “Standard colors” category. Property Identifier: UI_PKEY_StandardColorsCategoryLabel

• ThemeColorsCategoryLabel – Defines the label for the “Theme colors” category. Property Identifier: UI_PKEY_ThemeColorsCategoryLabel

!Note:
The different labels in the drop down color picker allows you to localize the control.

For more details on DropDownColorPicker control, check out Drop-Down Color Picker on MSDN.

Using DropDownColorPicker – Ribbon Markup

Commands and Views sections:

<?xml version='1.0' encoding='utf-8'?>
<Application xmlns='http://schemas.microsoft.com/windows/2009/Ribbon'>
  <Application.Commands>
    <Command Name="cmdDropDownColorPickerThemeColors"
             Id="1002"
             LabelTitle="Theme Colors">
      <Command.LargeImages>
        <Image>Res/Colors32.bmp</Image>
      </Command.LargeImages>
    </Command>
  </Application.Commands>
  <Application.Views>
    <Ribbon>
      <Ribbon.Tabs>
        <Tab>
          <Group>
            <DropDownColorPicker CommandName="cmdDropDownColorPickerThemeColors"
                                 ColorTemplate="ThemeColors"/>
          </Group>
        </Tab>
      </Ribbon.Tabs>
    </Ribbon>
  </Application.Views>
</Application>

Using DropDownColorPicker – Code Behind

Initializing:

partial class RibbonItems
{
    public void Init()
    {
        ...
    }

    private void InitDropDownColorPickers()
    {
        // common properties
        DropDownColorPickerThemeColors.Label = "Theme Colors";
        DropDownColorPickerThemeColors.ColorChanged += new EventHandler<ColorPickerEventArgs>(_themeColors_ExecuteEvent);

        // set labels
        DropDownColorPickerThemeColors.AutomaticColorLabel = "My Automatic";
        DropDownColorPickerThemeColors.MoreColorsLabel = "My More Colors";
        DropDownColorPickerThemeColors.NoColorLabel = "My No Color";
        DropDownColorPickerThemeColors.RecentColorsCategoryLabel = "My Recent Colors";
        DropDownColorPickerThemeColors.StandardColorsCategoryLabel = "My Standard Colors";
        DropDownColorPickerThemeColors.ThemeColorsCategoryLabel = "My Theme Colors";

        // set colors
        DropDownColorPickerThemeColors.ThemeColorsTooltips = new string[] { "yellow", "green", "red", "blue" };
        DropDownColorPickerThemeColors.ThemeColors = new Color[] { Color.Yellow, Color.Green, Color.Red, Color.Blue };
    }

    public void Load()
    {
        InitDropDownColorPickers();
    }
}

Respond to selected color event:

void _themeColors_ExecuteEvent(object sender, ColorPickerEventArgs e)
{
    if (e.ColorType == SwatchColorType.NoColor)
    {
        MessageBox.Show("Selected color is NoColor" + Environment.NewLine + "Selected color is " + DropDownColorPickerThemeColors.Color.ToString());
    }
    else
    {
        MessageBox.Show("Selected color is " + e.RGBColor.ToString());
    }
}