Jean Paul's Blog

There are 2 types of People in the World, One who Likes SharePoint and..

    Advertisements
  • Microsoft MVP

  • MindCracker MVP

  • CodeProject MVP

  • eBook on SharePoint 2010

  • eBook on Design Patterns

  • eBook on Windows Azure

  • NLayers Framework @ CodePlex

  • MSDN Forums

  • .Net vs. Java

    Due to Public Demand
  • Advertisements

ColorComboBox to pick colors

Posted by Paul on January 12, 2011


In this short article, I am trying to create a ColorComboBox control which allows the user to select colors from System.Drawing.Color struct. From Mahesh Chand’s color code snippet, I was inspired about the idea of listing color using reflection. So I thought it would be good if we can convert the code into a control.

Snapshot

The end control is shown in the snap shot below:

clip_image002

Steps involved in creating Control

The article is been subdivided into creating the custom combobox class and implementing the draw events.

Part 1: Create Custom ColorComboBox

For this, we have to create a new class and change the base class to ComboBox.

public class ColorComboBox : ComboBox

Part 2: Modify the constructor

We need to modify the constructor to fill the ComboBox with colors and change the draw mode.

public ColorComboBox()

{

FillColors();

// Change DrawMode for custom drawing

this.DrawMode = DrawMode.OwnerDrawFixed;

this.DropDownStyle = ComboBoxStyle.DropDownList;

}

Part 3: Implement the FillColors() method

For loading the combobox with color items, we need to use .Net Reflection. Following is the code to get all Color properties from struct Color.

private void FillColors()

{

this.Items.Clear();

// Fill Colors using Reflection

foreach (Color color in typeof(Color).GetProperties(BindingFlags.Static | BindingFlags.Public).Where(c => c.PropertyType == typeof(Color)).Select(c => (Color)c.GetValue(c, null)))

{

this.Items.Add(color);

}

}

For reduction of code I have used Lambda Expressions. Basically the code will iterate through all the properties which are static and public, then the Where() method will filter them by type of Color. The Select() method converts the PropetyInfo to Color object using c.GetValue() method.

Part 4: Custom Draw the control

Now we are good with the entire color items in the list. The next challenge is to display the item with the actual color filled in a rectangle and showing the color name next to it.

For this we have to override the OnDrawItem method of combobox.

protected override void OnDrawItem(DrawItemEventArgs e)

{

if (e.Index >= 0)

{

Color color = (Color)this.Items[e.Index];

int nextX = 0;

e.Graphics.FillRectangle(new SolidBrush(e.BackColor), e.Bounds);

DrawColor(e, color, ref nextX);

DrawText(e, color, nextX);

}

else

base.OnDrawItem(e);

}

Whenever the ComboBox item is painted the above OnDrawItem() method will be called. We basically checks whether the e.Index >= 0 to ensure there is a valid item in the list and do the custom drawing.

The drawing is divided into 3 steps.

1. Paint the Background

2. Draw the Color

3. Draw the Text (color name)

Part 5: Add Property to get selected color

Now we need to add a new property to get/set the selected color.

public Color Color

{

get

{

if (this.SelectedItem != null)

return (Color)this.SelectedItem;

return Color.Black;

}

set

{

int ix = this.Items.IndexOf(value);

if (ix >= 0)

this.SelectedIndex = ix;

}

}

The above get code will return the selected color by converting selected item into Color struct.

The set code will allow us to set the selected color by taking the set value and iterating through the items in the combobox.

Using the Code

The attachment contains the ColorComboBox as well as the test form. For reusing the control, one may take the ColorComboBox file alone and can be integrated to other projects.

Advertisements

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 )

Google+ photo

You are commenting using your Google+ 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 )

Connecting to %s