This content has moved - please find it at https://devblog.cyotek.com.

Although these pages remain accessible, some content may not display correctly in future as the new blog evolves.

Visit https://devblog.cyotek.com.

ColorPicker Controls for Windows Forms

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.Design prevents 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.

ColorGrid Control

ColorGrid control demonstration

This control displays a grid of colors, and supports both a primary palette, and a custom color palette. Several properties are available for configuring the appearing of the control, and there are behaviour options too, such as built in editing of colors.

ColorWheel Control

ColorWheel control demonstration

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!

ColorSlider Controls

ColorSlider controls demonstration

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.

ColorEditor Control

ColorEditor control demonstration

This control allows you enter/select a color using RGB/HSL or hex formats.

ScreenColorPicker Control

ScreenColorPicker control demonstration

This control allows the user to pick a color from any pixel displayed on the screen.

ColorPickerDialog Form

ColorPickerDialog demonstration

This form puts together the previous controls in a ready to use dialog.

ColorEditorManager

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.

Color Palettes

The ColorGrid control has Colors and 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.

Keyboard Support

All GUI components, with the exception of the ScreenColorPicker include full keyboard/focus support. Many controls support SmallChange and 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!

Known Issues

  • XML documentation comments are incomplete
  • The ColorEditorManager control currently allows you to bind to the LightnessColorSlider control, but doesn't fully support it yet

Acknowledgements

Source Code

Download the source code from the link below, or from the GitHub page.

Update History

  • 2013-04-04 - First published
  • 2020-11-21 - Updated formatting, corrected some spelling errors

About The Author

Gravatar

The founder of Cyotek, Richard enjoys creating new blog content for the site. Much more though, he likes to develop programs, and can often found writing reams of code. A long term gamer, he has aspirations in one day creating an epic video game. Until that time, he is mostly content with adding new bugs to WebCopy and the other Cyotek products.

Leave a Comment

While we appreciate comments from our users, please follow our posting guidelines. Have you tried the Cyotek Forums for support from Cyotek and the community?

Styling with Markdown is supported

Comments

Gravatar

Adam Bruss

# Reply

Hello this looks amazing! We really need a color picker which can do alpha values. We were trying to hack the default windows colordialog to do it with some success. This looks great though. I'm going give it a try.

Gravatar

Richard Moss

# Reply

Hello,

Glad you like the look of it. The ColorEditor control explicitly allows the selection of alpha values combined with RGB, HSL or hex so I hope you find this useful for your needs! Let me know if you run into any difficulties, and don't forget the latest source can be found at the GitHub page: https://github.com/cyotek/Cyotek.Windows.Forms.ColorPicker

Regards; Richard Moss

adan

# Reply

How can I use that in my Windows Form?

Gravatar

Richard Moss

# Reply

If you mean adding it to the Visual Studio Toolbox, if you're using the source code, the items will appear automatically. If you've placed compiled dll's in single location and reference them from there then you could use Tools | Choose Toolbox Items in order to display the controls.

If I'm using a third party component, I tend to drop a button onto a form, then go into the designer file and change the type of the button to be the true control rather than polluting my toolbox.

Regards; Richard Moss

adan

# Reply

Sorry I'm pretty new to C#

How can I compile this as a dll?

Gravatar

Richard Moss

# Reply

Unfortunately I can't condense a beginners guide to C# and Visual Studio into a comment, it's a pretty wide ranging subject! But basically, if you have a solution open, open the Build menu and choose Rebuild to do everything, or context click a project in the Solution Explorer and choose Build to build individual projects. This will then compile your project into the various DLL/EXE files depending on the types of project - generally these will be in a folder called either "debug" or "release" depending on the project configuration.

Have you tried looking at the Getting Started with Visual Studio documentation on MSDN?

adan

# Reply

NEver mind, have already solved it! Thank you very much