Back at the start of the new millennium, I had a publishing agreement with another company to publish our components under their branding. The first of these components was the ColorPicker ActiveX control. Roll on 13 years later and that publishing agreement is long expired, ActiveX is dead, and yet here I am again writing a color picker control. Except this time losing money rather than making it. There's probably a life lesson buried in there somewhere.
All of our current products ask for a color at least once (mostly buried in an options dialog), and some of the prototype products we are working on ask for more. Currently, we just wrap around the
System.Drawing.Design.ColorEditor class, which overtime has identified a few problems:
- Keyboard support is iffy (this is more to do with how it's implemented at our end I suspect)
- You can't choose alpha channels, or enter custom values
- The dependency on
System.Designprevents us from targeting the Client Profile, and indeed will cause a crash if deployed to a system with only the Client Profile installed
The other option briefly considered was just to replace with the standard color common dialog. But this dialog looks and operates the same as it did back in Windows 3, and while that is pretty good from a consistent UI standpoint, it does mean it hasn't kept up with changing times - such as entering colors as hex values. I took a look at some other third party libraries but none of them were flexible enough for what I wanted.
In the end I went with writing my own set of C# based color picker controls which we're providing here as open source - we hope you find them useful. As there's quite a lot of code, I'm not going to describe them line by line as I've done in the past, but just provide an overview of each component.
This control displays a grid of colors, and supports both a primary palette, and a custom color palete. Several properties are available for configuring the appearing of the control, and there are behaviour options too, such as built in editing of colors.
This control displays a radial wheel of colors and allows selection from any point in the wheel. Not much in the way of customisation for this control!
A bunch of controls (inheriting from a single base) that allow selection of values via a colourful bar. Similar to the
TrackBar control you have a few options for specifying the drag handle's position and bar orientation.
This control allows you enter/select a color using RGB/HSL or hex formats.
This control allows the user to pick a color from any pixel displayed on the screen.
This form puts together the previous controls in a ready to use dialog.
This is a non-GUI component that you can drop onto a form, and bind to other controls in this library. When the
Color property of one control changes, it is reflected in the others without having to lift a finger. Useful if you're creating composite displays from multiple controls.
ColorGrid control has
CustomColors properties which return a
ColorCollection. These two properties make it easier as a developer to keep separate a primary palette whilst having the flexibility of custom colors, although it does complicate the control's internal logic a bit! The grid will automatically populate custom colors if you try and set the control's
Color to a value not currently defined.
As well as manually populating
ColorCollection instances, you can also load in external palette files. Paint.NET and the age old JASC 1.0 formats are currently supported.
All GUI components, with the exception of the
ScreenColorPicker include full keyboard/focus support. Many controls support
LargeChange properties which influence how navigation keys are processed. Although in the case of the
ColorWheel it's not really a bonus... but that's what the
ColorEditor control is best suited for!
- XML documentation comments are incompleted
ColorEditorManagercontrol currently allows you to bind to the
LightnessColorSlidercontrol, but doesn't fully support it yet
- Inspiration (and some code!) was taken from Color Picker with Color Wheel and Eye Dropper
- The icon used by the demonstration is from the Crystal Project Icons
- The eye dropper png graphic is from the Momentum Glossy Icons
Download the source code from the link below, or from the GitHub page.