Implement a color picker using ComboBox


This post shows how you can custom draw items of a ComboBox to implement a color picker. The implementation is mostly inspired by a CodeProject article, but I had to adapt the code for the color bands to show adequately.

Register for DrawItem event

Here’s how you can register for DrawItem. The event handler is called for each item that the ComboBox requires painting. The first line enables custom drawing.

combobox.DrawMode = System.Windows.Forms.DrawMode.OwnerDrawVariable;
combobox.DrawItem += new System.Windows.Forms.DrawItemEventHandler(this.eventhandler);

Event handler implementation

Here’s one simple implementation for the event handler:

private void eventhandler(object sender, DrawItemEventArgs e)
{
    if (e.Index < 0) return;

    Graphics g = e.Graphics;
    Rectangle rect = e.Bounds;
    string n = ((ComboBox)sender).Items[e.Index].ToString();
    Font f = new Font("Arial", 9, FontStyle.Regular);
    Color c = Color.FromArgb((int)colors[e.Index]);
    Brush b = new SolidBrush(c);
    g.FillRectangle(Brushes.White, rect);
    g.DrawString(n, f, Brushes.Black, rect.X, rect.Top);
    g.FillRectangle(b, rect.X + 110, rect.Y + 3,
                    rect.Width - 113, rect.Height - 6);
}

Here's one example of the colors and colorNames arrays used above:

uint[] colors =
{
0xFFCD853F, 0xFFDEB887, 0xFFF08080, 0xFFFF0000,
0xFF969696, 0xFF00FF7F, 0xFF90EE90, 0xFF00FFFF,
0xFF48D1CC, 0xFFBA55D3, 0xFFF0E68C, 0xFFFFD700
};
string[] colorNames =
{
"Peru", "Burlywood", "Light coral", "Red",
"Lime", "Spring green", "Light green", "Cyan",
"Medium turquoise", "Medium orchid", "Khaki", "Gold"
};

You can pick colors of your own choice.

Locating a color and setting its index

Here’s one way to locate the index of a color by its ARGB value, and set the SelectedIndex property of the ComboBox:

    for (int i = 0; i < colors.Length; i++)
    {
        if (colors[i] == (uint)color.ToArgb())
        {
            combobox.SelectedIndex = i;
        }
    }

Here, color is an instance of the Color structure.

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s