A Fast, Compact C# Color Selection Control

Kevin Menningen

Rate me:

4.62/5 (13 votes)

21 Feb 20053 min read

77.3K

1.3K

A color selection control that quickly lets the users zero in on the color they want.

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.

License

This article has no explicit license attached to it but may contain usage terms in the article text or the download files themselves. If in doubt please contact the author via the discussion board below.

A list of licenses authors might use can be found here

Written By

Kevin Menningen

Web Developer

United States

I've been developing software since about 1984, when I starting messing around with my friend's Timex Sinclair. Currently I'm the lead software engineer for a C++ project that reads Electroencephalograms (EEG), or brain waves.

private void OnResize(object sender, System.EventArgs e) { // first determine the minimum width int MinWidth = lblBrightness.Width; MinWidth += lblSaturation.Width; MinWidth += SELECTED_COLOR_WIDTH; int margin = 2; int MinScrollBar = System.Windows.Forms.SystemInformation.HorizontalScrollBarArrowWidth * 2 + System.Windows.Forms.SystemInformation.HorizontalScrollBarThumbWidth; MinWidth += MinScrollBar * 2; Rectangle rcArea = this.ClientRectangle; int MinHeight = rcArea.Height; bool bChange = false; if (MinWidth > rcArea.Width) { bChange = true; } else { MinWidth = rcArea.Width; } if (MinHeight < SELECTED_COLOR_HEIGHT) { MinHeight = SELECTED_COLOR_HEIGHT; bChange = true; } if (bChange) { // at this point resizing will shrink over the control area because the control // cannot get any smaller rcArea = new Rectangle( this.ClientRectangle.Left, this.ClientRectangle.Top, MinWidth, MinHeight); } // next calculate the selected color area m_rcSelColor = new Rectangle( rcArea.Right - SELECTED_COLOR_WIDTH - 1, rcArea.Top, SELECTED_COLOR_WIDTH, rcArea.Height - 1); // calculate the height of the hue bar area, which is everything left over after // the bottom scroll bars are drawn, with a 1 pixel buffer int HueBarHeight = (rcArea.Bottom - rcArea.Top) - System.Windows.Forms.SystemInformation.HorizontalScrollBarHeight - margin; if (HueBarHeight < 0) { HueBarHeight = 20; // control is not going to fit... } // the left and right buttons. we shrink them a bit vertically so that the arrows // indicating the selected hue stand out a bit more btnLeft.SetBounds( rcArea.Left, rcArea.Top + HUE_SELECT_ARROW_HEIGHT, ARROW_BUTTON_WIDTH, HueBarHeight - (2*HUE_SELECT_ARROW_HEIGHT) + 1); btnRight.SetBounds( m_rcSelColor.Left - ARROW_BUTTON_WIDTH - 1, rcArea.Top + HUE_SELECT_ARROW_HEIGHT, ARROW_BUTTON_WIDTH, HueBarHeight - (2*HUE_SELECT_ARROW_HEIGHT) + 1); // and the hue bar area m_rcHueBar = new Rectangle( btnLeft.Right, rcArea.Top, (btnRight.Left - btnLeft.Right), HueBarHeight); // important calculation for matching a screen pixel to a hue amount m_HuePixelStep = 360.0f / ((float) m_rcHueBar.Width); // finally, position the controls int ScrollWidth = ((m_rcSelColor.Left - rcArea.Left) - lblBrightness.Width - lblSaturation.Width) / 2; if (ScrollWidth < MinScrollBar) { ScrollWidth = MinScrollBar; } int BottomHeight = rcArea.Bottom - m_rcHueBar.Bottom; lblBrightness.SetBounds( rcArea.Left, m_rcHueBar.Bottom + margin, lblBrightness.Width, BottomHeight - margin, BoundsSpecified.All); wndScrollBrightness.SetBounds( lblBrightness.Right, m_rcHueBar.Bottom + margin, ScrollWidth, BottomHeight - margin, BoundsSpecified.All); lblSaturation.SetBounds( wndScrollBrightness.Right, m_rcHueBar.Bottom + margin, lblSaturation.Width, BottomHeight - margin, BoundsSpecified.All); wndScrollSaturation.SetBounds( lblSaturation.Right, m_rcHueBar.Bottom + margin, ScrollWidth, BottomHeight - margin, BoundsSpecified.All); } // OnResize()

Use Ctrl+Left/Right to switch messages, Ctrl+Up/Down to switch threads, Ctrl+Shift+Left/Right to switch pages.