A Fast, Compact C# Color Selection Control

• Download demo project - 21.6 Kb
• Download source - 38.1 Kb

Introduction

Have you ever wanted to pick a color, and thought to yourself, "I just want a light orangish-red that isn't glaringly bright"? Then you got a selection control like the Windows Color Select Dialog where you had to play with the controls for five minutes (or more) to finally arrive at the color you want? This control was designed with this problem in mind. It allows the user to rapidly zero in on the color they want to use, and it uses a relatively small screen footprint to do so. The control is resizable so you may be able to squeeze it even smaller than it is in the demo. It uses the .NET double-buffered control support for flicker-free update and instant feedback to the user.

To use the control, you first pick your color by clicking on the Hue bar. It's nice and linear so you can quickly get the right shade (it uses less screen space than a big circle that you commonly see). You can click the large left or right arrows to tweak the hue one step. Holding the button down engages a timer which acts a lot like keyboard repeating to move slowly through the hues. Speaking of keyboard, you can also use the right and left arrows on the keyboard to select the hue.

Once you have the hue, moving the sliders for Brightness (which is more formally called 'Luminance') and Saturation allows you to rapidly adjust the lightness and purity of the color. Want grayscale? Just turn saturation all the way to zero, and adjust brightness to get your gray shade.

If you want to type in red, green and blue values directly, left clicking the region showing the selected color will bring up the Windows Color Select Dialog. It will come up fully expanded so you can go directly to the red, green and blue edit boxes. Selecting OK will adjust the Color Select Control to the color you pick in the dialog.

Background

I've looked at a number of other color selection controls available. All of them either were too heavy because they popped up a complex dialog, or too difficult to locate a color with rapidity. When designing this control, I adapted the Hue/Luminance/Saturation (HLS) to Red/Green/Blue (RGB) conversion code from a C++ project named CColor by Christian Rodemeyer that is here on CodeProject. Thanks Christian!

Using the code

Include a #using CustomUIControls; statement at the top of your form code. Then add a reference to CustomUIControls.dll by right clicking on your project and selecting "Add Reference...", then browse to where the DLL is located. Then add the control to your form. Finally, if you wish to receive notice when the user changes the color in the control, derive your control from the IColorSelectCallback interface. An example of how to use the Color Select Control is provided in the source through the TextStylePicker control, which allows you to select a foreground color, background color and the font for text. Also thrown into the mix is a button that has a graphical arrow on it, which you may reuse as well. Here's a synopsis example of using the Color Select Control on a form:

public class MyCustomForm : System.Windows.Forms.Form, IColorSelectCallback
{
  // ... member variables ...

  private ColorSelectControl cscColorSelect;

  // ... form designer ...

  private void InitializeComponent()
  {
     // ... add this here once, then you can

     // mess with the properties in Form Designer ...

     this.cscColorSelect = new CustomUIControls.ColorSelectControl();
  }

  // ... form load, you can initialize properties if you wish ...

  private void OnFormLoad(object sender, System.EventArgs e)
  {

    // set the starting color

    cscColorSelect.SelectedColor = m_ForeColor;

    // put ourselves in as callback

    cscColorSelect.CallbackHost = this;
  }

  //////////////////////////////////////////////////////

  // Interface Implementation

  //////////////////////////////////////////////////////

  #region IColorSelectCallback Members

  /// <summary>

  /// One of the custom color select controls has changed its color

  /// </summary>

  /// <param name="ControlID">The unique ID of the control that changed</param>

  /// <param name="clrNewColor">The new color</param>

  public void ColorChanged(int ControlID, Color clrNewColor)
  {
      // ... do stuff here because the color has changed ...

  } // ColorChanged()


  #endregion

} // class MyCustomForm

History

• Version 1.0
  • Initial release.