65.9K
CodeProject is changing. Read more.
Home

Light Color Picker

starIconstarIconstarIconstarIcon
emptyStarIcon
starIcon

4.53/5 (20 votes)

Jan 12, 2004

1 min read

viewsIcon

90319

downloadIcon

1036

A light Color Picker inherited from ComboBox.

Sample Image - LightColorPicker.jpg

Introduction

This control is an alternative to the Color Dialog provided by the Framework. It allows the user to quickly select a color among a collection of colors. I was surprised to see that the Framework doesn't provide such a control. I also searched on Code Project some similar controls, but the ones I found didn't please me. In my opinion, they where too heavy. So, I started to write my own. My efforts where concentrated on writing a light and easy-to-use control. Here it is.

The code

Starting from scratch leads to writing much code, and usually provides an incomplete control. I preferred to use existing and working code, and make my ColorPicker inherit from the ComboBox class provided by the Framework. The most important modifications I did are contained in the OnDrawItem function. Actually, this overridden function is required for writing custom ComboBox items as well as the OwnerDrawFixed value for the DrawMode property :

public ColorPicker()
{
   // Required for owner-draw item
   this.DrawMode = DrawMode.OwnerDrawFixed;
   this.DropDownStyle = ComboBoxStyle.DropDownList;
}
protected override void OnDrawItem(DrawItemEventArgs e)
{
   // Draw the background of the item depending on the item state 
   if(e.State == DrawItemState.Selected || e.State == DrawItemState.None) {
      e.DrawBackground();
   }
   
   // Draw the item
   ...

   // Call the base function
   base.OnDrawItem(e);
}

The underlying collection of ColorPicker is a ColorCollection derived-class, which contains all the colors provided by the Framework (System and Web). It implements the IEnumerable interface:

public class KnownColorCollection : ColorCollection
{
   ...
}
public interface ColorCollection : IEnumerable
{
   int Count { get; }
   Color this[int i] { get; }
   Color this[string s] { get; }
   IEnumerator GetEnumerator();
   int IndexOf(string ColorName);
}

I so hid the property Items with the following property:

public new ColorCollection Items
{
   get { return m_ColorCollection; }
   set {
      if(m_ColorCollection != value && value != null ) {
         m_ColorCollection = value;
         foreach(Color color in value) base.Items.Add(color.Name);
      }
   }
}

The second property I hid is the SelectedText property, which provides access to the selected color via the SelectedIndexChanged event:

public new string SelectedText
{
   get { return Items[SelectedIndex].Name; }
   set {
      int selidx = Items.IndexOf(value);
      if(selidx > 0) SelectedIndex = selidx;
   }
}

Using the control

After creating the object MyColorPicker, you must pass the ColorPicker a ColorCollection in the constructor of your form. There is no default collection.

public ColorPickerTestForm() 
{
   ...

   MyColorPicker.Items = new KnownColorCollection(KnownColorFilter.Web);
 
   ...
}

If you want, you can specify the color displayed by the ColorPicker by adding this line:

MyColorPicker.SelectedText = "Blue";

To retrieve the selected color, you first need to add this code:

MyColorPicker.SelectedIndexChanged += new EventHandler(MyNotificationFunction);

Then you have to write the corresponding function code in the Form code:

private void MyNotificationFunction(object sender, EventArgs e)
{
   if(MyColorPicker.SelectedText.Length > 0) {
      this.BackColor = Color.FromName(MyColorPicker.SelectedText);

   }

}