Click here to Skip to main content
Click here to Skip to main content

.NET Color Picker Controls

, 6 Nov 2001 CPOL
Rate this:
Please Sign up or sign in to vote.
A control library containing three color picker controls written in C#
<!-- Download Links --> <!-- Add the rest of your HTML here -->

Introduction

Having used Chris Maunder's excellent  CColourPicker MFC control for a few years and I thought a useful .NET learning exercise would be to write a look-alike control in C#.  I haven't duplicated it exactly and I've ended up with three controls not one.  

I'm quite pleased with the results so far, and have to say that programming with .NET/C# is a pleasure compared to MFC/C++.  If I have time I'm going to keep adding to the color picker controls.  Please let me have any feature requests you may have and I'll try to incorporate them in future.

The control library code demonstrates:

  1. Creating .NET controls
  2. .NET Control inheritance
  3. Custom Events
  4. Design time attributes
  5. A bit of GDI+
  6. XML documentation compiled into a Platform SDK like help file using X Marks The DOT, an extensible documentation generator.

Creating controls

This section lists a few of the interesting things I discovered when creating my controls.

Properties and attributes

One very useful feature of .NET languages is the ability to add meta-data to your code in various places.  For controls one interesting place to add meta-data is on the control's properties. 
 
As an example here's a couple of properties from the ColorPanel control:

[Browsable(true)]
[Category("ColorPanel")]
[DefaultValue(defaultColorSet)]
[Description("Get/set the palette of colors to be displayed.")]
public PJLControls.ColorSet ColorSet
{
    get { ... }
    set { ... }
}[Browsable(true)]
[Category("ColorPanel")]
[Description("Get/set the pick color.")]
public System.Drawing.Color Color
{
    get { ... }
    set { ... }
}

public void ResetColor()
{
   Color = defaultColor;
}

public bool ShouldSerializeColor()
{
   return Color != defaultColor 
}

The items of interest here are the attributes and the ResetColor/ShouldSerializeColor methods.

If you add the attribute [Browsable(true)] to your property, then the property will appear in the properties window in VS.NET when you select an instance of the control in the Forms designer.  You can also assign a category to the property using the [Category("your category")] attribute.  If don't supply the category attribute then the property will appear in the "Miscellaneous" category .

If you now add the attribute [Description("description here")] then the property window displays the description as shown above, when the property is selected.

The final attribute of interest is [DefaultValue()].  Supplying this attribute has two consequences.  The first is that if you right click on the attribute in the Properties window you will get a small pop-up menu with the "Reset" item enabled.  If you select Reset the property will be reset to the value you have supplied as the default.  The other consequence is that the forms designer now knows whether it needs to add code to change the property value from the default (i.e. serialize the properties value).

For example this is the initialization code generated by the Forms designer for the ColorPanel in the demo.

private void InitializeComponent()
{
   ...

   this.colorPanel.ColorSortOrder = PJLControls.ColorSortOrder.Brightness;
   this.colorPanel.CustomColors = new System.Drawing.Color[]
   {
      System.Drawing.Color.FromArgb(((System.Byte)(255)), ((System.Byte)(192)), 
                                    ((System.Byte)(192))),
      System.Drawing.Color.FromArgb(((System.Byte)(255)), ((System.Byte)(128)), 
                                    ((System.Byte)(128))),
      System.Drawing.Color.Red,
      ...
   }

   ...
}

The properties highlighted in bold are the ones that the Forms designer knows don't have default values, so it initialises them and no others.

However, the DefaultValue attribute constructor only appears to accept simple types, so if you have a complex type you need to implement two methods instead - ResetPropertyName and ShouldSerializePropertyName.   These two methods are fairly self explanatory and there's an example above.  The Forms designer recognises these methods which then produce the same effects as the DefaultValue attribute. 

IsInputKey

When you want to receive keyboard events, you just hook up an event handler for the OnKeyDown event or override the OnKeyDown virtual method.

However by default certain keys you may be interested in, such as TAB, the arrow keys etc aren't sent to you, they're sent to the form hosting the control for dialog navigation.  If you want to see them in OnKeyDown override IsInputKey and return true for key codes you want to see.  Here's an example.

protected override bool IsInputKey( System.Windows.Forms.Keys keyData )
{
   bool bIsInputKey = true;

   switch( keyData )
   {
      case Keys.Left:
         break;
      case Keys.Right:
         break;
      case Keys.Down:
         break;
      case Keys.Up:
         break;
      default:
         bIsInputKey = base.IsInputKey(keyData);
         break;
   }

   return bIsInputKey;
}

The Controls

ColorPicker

 

Description

The ColorPicker simulates a ComboBox style UI but drops down a palette of colors (ok I know, it's been done before).  The dropdown palette is an instance of the ColorPanel control hosted in a modal form.  The control fully supports mouse and keyboard navigation.

Keyboard navigation

Tab to the control and then use the down arrow to drop down the color panel.  Then you can navigate using the arrow keys, select a color using the Return key or cancel using the Escape key.  One problem that I've just noticed is that you can't tab off the dropped down color panel.

Properties

The ColorPicker supports the following properties all of which except BorderStyle are visible in the Visual Studio property browser under the "ColorPicker" category.  BorderStyle is in the "Appearance" category.

Property name Type Description
_Text string Same as the Text property - I can't get the 'Text' property to work correctly. 
AutoSize boolean If set to true the the control's height is fixed.
BorderStyle System.Windows.Forms.BorderStyle Set/get the controls border style.
Color System.Drawing.Color Set/get the pick color.
ColorSet PJLControls.ColorSet Select which color palette to use.
ColorSortOrder PJLControls.ColorSortOrder Select the order that the color palette is sorted.
ColorWellSize System.Drawing.Size Set/get the size of the colors in the color palette.
Columns int

If set to 0 then the drop down panel has the same width as the picker. 
If > 0 then the drop down panel has that many columns.

CustomColors System.Drawing.Color[] The user can supply an array of colors to be displayed.  The custom color array is displayed when the ColorSet property is set to ColorSet.Custom
DisplayColor bool Indicate whether to display the pick color in the picker combo box.
DisplayColorName bool Indicates whether to display the pick color name in the combo box.  If false the value of the _Text property is displayed.
PanelBorderStyle System.Windows.Forms.BorderStyle Set/get the border style of the drop down panel.

Events

Supports the ColorChanged event which is fired when the user selects a new color.

ColorPanel

Description

This control shows a grid of colors and is used as the drop down for the ColorPicker control.  The colors displayed are either derived from the System.Drawing.Colors enumeration or are supplied by the user using the CustomColors property.

Properties

The ColorPanel supports the following properties all of which except BorderStyle are visible in the Visual Studio property browser in the "ColorPanel" category.  BorderStyle is in the "Appearance" category.

Property name Type Description
BorderStyle System.Windows.Forms.BorderStyle Set/get the controls border style.
Color System.Drawing.Color Set/get the pick color.
ColorSet PJLControls.ColorSet Select which color palette to use.
ColorSortOrder PJLControls.ColorSortOrder Select the order that the color palette is sorted.
ColorWellSize System.Drawing.Size Set/get the size of the colors in the color palette.
Columns int

If set to 0 then the panel can be resized.
If > 0 then the panel has that many columns.

CustomColors System.Drawing.Color[] The user can supply an array of colors to be displayed.  The custom color array is displayed when the ColorSet property is set to ColorSet.Custom

Events

Supports the ColorChanged event which is fired when the user selects a new color.

CustomColorPicker

Description

Inspired by Peter McMahon's ColorPicker.NET.

This controls allows you to select any RGB value.  It displays one slice through the RGB color cube.  You select the z-axis as red, green or blue and the control then displays the x-y axis at the appropriate z-axis value in the cube.  You can continuously scroll through the Z axis and see the color palette change, but this will only probably work smoothly on a 500MHz+ processor.

Properties

The CustomColorPicker supports the following properties all of which are visible in the Visual Studio property browser in the "ColorPicker" category. 

Property name Type Description
Color System.Drawing.Color Set/get the pick color.
EnableContinuousScrollZ bool Select which color palette to use.

Events

Supports the ColorChanged event which is fired when the user selects a new color.

Release History

v1.0, 23 October 2001

  • initial release

v1.1, 07 November 2001

  • Added more design time support in the form of the DefaultValue attribute, ResetPropertyName/ShouldSerializePropertyName method pair, and the Description attributes.
  • Added the Columns property to allow the user to set the width of the color panel.
  • Added the CustomColors property to allow the use of a custom color palette.
  • Various bug fixes.
  • Improved/smoother resizing of the ColorPanel at design time.

Compatibility

Requires VS.NET beta 2 to build the code.   Requires .NET beta 2 runtime to run the compiled sample.

Known bugs

Can't tab away from drop down of color picker.

License

This article, along with any associated source code and files, is licensed under The Code Project Open License (CPOL)

Share

About the Author

Philip Lee
Web Developer
United Kingdom United Kingdom
No Biography provided

Comments and Discussions

 
GeneralMy vote of 5 PinmemberMember 1071724427-Sep-14 20:30 
QuestionColor comes in 3 dimensions, red, green, and blue. Hence, color is best visualized in 3d. PinmemberWarren C Harding15-Apr-13 6:04 
Questionhow can ı fınd rgb value ın c# Pinmemberarifemutlu21-Mar-13 14:00 
AnswerRe: how can ı fınd rgb value ın c# PinmemberMember 982095818-Apr-13 8:04 
QuestionLicense PinmemberWoLfinho26-Oct-11 8:57 
AnswerRe: License PinmemberPhilip Lee26-Oct-11 9:20 
GeneralNice, and One Minor Bug PinmemberMember 41431103-Dec-07 21:55 
GeneralThis is nice PinsussAnonymous18-Jun-04 0:12 
GeneralWhy do you post VSS projects Pinmemberoneway27-Mar-04 6:40 
GeneralRe: Why do you post VSS projects PinmemberJan Vercauteren2-Aug-04 7:33 
AnswerRe: Why do you post VSS projects Pinmemberjlandheer12-May-06 8:14 
GeneralI couldn't get it to work! Pinmemberdgentils21-Mar-04 17:37 
GeneralRe: I couldn't get it to work! Pinsussjohnsuna26-Nov-04 18:48 
GeneralRe: I couldn't get it to work! PinmemberNay Ko Oo14-Nov-05 23:58 
GeneralRe: I couldn't get it to work! PinmemberPinei11-Dec-05 10:20 
Questionremove solution from source control? Pinmembersmallguy7828-Apr-03 3:27 
GeneralWeb Control Pinmembermasterpixel23-Jan-03 0:51 
QuestionHow did you do the drop down form? Pinmemberfadi11-Dec-01 15:03 
GeneralNice! PinmemberAndreas Philipson25-Oct-01 13:03 
GeneralRe: Nice! PinsussAnonymous18-Jun-04 0:10 

General General    News News    Suggestion Suggestion    Question Question    Bug Bug    Answer Answer    Joke Joke    Rant Rant    Admin Admin   

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

| Advertise | Privacy | Terms of Use | Mobile
Web04 | 2.8.1411023.1 | Last Updated 7 Nov 2001
Article Copyright 2001 by Philip Lee
Everything else Copyright © CodeProject, 1999-2014
Layout: fixed | fluid