Using a Color Picker Silverlight Control

UPDATED (12/05/08):

Updated Color Picker Utility

UPDATED (09/29/08): I added an event to my user control. You can now use the ColorChanged event to figure out when the color has changed and subsequently apply that color. This invalidates my problem with the slider click events. All downloads are updated appropriately.

Download Color Picker Control Only

Download Color Picker Sidebar Gadget

Download Full Source Code for Project Below

I’m working on getting a tutorial up about how I made my color picker control, but I thought that in the meantime I could at least put up the code and how to use it.

This color picker is nothing more than a simple Silverlight user control with some attached properties. You could literally just add these files to your project and then start drawing color pickers all over the place.

The control has two modes. The default mode is the one seen here. This color picker can be resized to pretty much any size you want. You could make the whole screen a color picker if that was your whim. The second mode is a “compact” mode that reduces the color picker to size of a Vista sidebar gadget (130px by 200px).

Incidentally, if you would like that gadget, you can download it here. I now have it as my constant companion on my side bar.

To switch between these modes, simply flip the “IsCompact” property. Here’s an example app so you can see both color pickers.

(Sample removed due to incompatibility, please see the updated link at the top.)

You can grab the color from this color picker by watching the ColorChanged event, which delivers both the new color and the old color. There is also a “SelectedColor” property that can used. ColorPickerSolution

If you’d like to see how all this is working, I have the entire source code for the above project right here.

My biggest problem right now is that, for reasons I’ve yet to discover, the slider control (the rainbow colored bar on the side) is a black hole for mouse events, which is why the button doesn’t update when I drag it. If anyone knows why, please let me know. UPDATE: This problem has been invalidated by my implementation of the “ColorChanged” event.