Click here to Skip to main content
15,867,308 members
Articles / Programming Languages / C#
Article

.NET Color Picker Controls

Rate me:
Please Sign up or sign in to vote.
4.87/5 (21 votes)
6 Nov 2001CPOL7 min read 267.7K   8.6K   72   21
A control library containing three color picker controls written in C#

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 .

Image 1

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

 Image 2

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

Image 3

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.

Image 4

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)


Written By
Web Developer
United Kingdom United Kingdom
This member has not yet provided a Biography. Assume it's interesting and varied, and probably something to do with programming.

Comments and Discussions

 
GeneralMy vote of 5 Pin
MrShadowGames11-Aug-15 21:40
professionalMrShadowGames11-Aug-15 21:40 
GeneralMy vote of 5 Pin
Member 1071724427-Sep-14 19:30
Member 1071724427-Sep-14 19:30 
QuestionColor comes in 3 dimensions, red, green, and blue. Hence, color is best visualized in 3d. Pin
Warren C Harding15-Apr-13 5:04
Warren C Harding15-Apr-13 5:04 
Questionhow can ı fınd rgb value ın c# Pin
arifemutlu21-Mar-13 13:00
arifemutlu21-Mar-13 13:00 
AnswerRe: how can ı fınd rgb value ın c# Pin
Member 982095818-Apr-13 7:04
Member 982095818-Apr-13 7:04 
QuestionLicense Pin
WoLfinho26-Oct-11 7:57
WoLfinho26-Oct-11 7:57 
AnswerRe: License Pin
Philip Lee26-Oct-11 8:20
Philip Lee26-Oct-11 8:20 
GeneralNice, and One Minor Bug Pin
Member 41431103-Dec-07 20:55
Member 41431103-Dec-07 20:55 
GeneralThis is nice Pin
Anonymous17-Jun-04 23:12
Anonymous17-Jun-04 23:12 
GeneralWhy do you post VSS projects Pin
oneway27-Mar-04 5:40
oneway27-Mar-04 5:40 
GeneralRe: Why do you post VSS projects Pin
Jan Vercauteren2-Aug-04 6:33
Jan Vercauteren2-Aug-04 6:33 
AnswerRe: Why do you post VSS projects Pin
Jeroen Landheer12-May-06 7:14
Jeroen Landheer12-May-06 7:14 
GeneralI couldn't get it to work! Pin
dgentils21-Mar-04 16:37
dgentils21-Mar-04 16:37 
GeneralRe: I couldn't get it to work! Pin
Member 1279713426-Nov-04 17:48
Member 1279713426-Nov-04 17:48 
GeneralRe: I couldn't get it to work! Pin
teleolog14-Nov-05 22:58
teleolog14-Nov-05 22:58 
GeneralRe: I couldn't get it to work! Pin
Pinei11-Dec-05 9:20
Pinei11-Dec-05 9:20 
Questionremove solution from source control? Pin
yetanotherchris28-Apr-03 2:27
yetanotherchris28-Apr-03 2:27 
GeneralWeb Control Pin
masterpixel22-Jan-03 23:51
masterpixel22-Jan-03 23:51 
QuestionHow did you do the drop down form? Pin
fadi11-Dec-01 14:03
fadi11-Dec-01 14:03 
this example is an excellent example! and well complicated for me as well Smile | :)

I tried to mimic the way you did the drop down form in a new control in the click event, but I cannot seem to get it right. It would popup the form but never loses focus to be removed. basically the deactivates never fires unless I switch applications all together.

Any ideas?

GeneralNice! Pin
Andreas Philipson25-Oct-01 12:03
Andreas Philipson25-Oct-01 12:03 
GeneralRe: Nice! Pin
Anonymous17-Jun-04 23:10
Anonymous17-Jun-04 23:10 

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

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