ColorSlider
A ColorSlider control that allows the user to specify a color via a slider type control.
The ColorSlider uses the HSV color space to calculate its values. There are lots of online examples of people drawing gradient images and using the technique to turn that into a RenderTargetBitmap and then use a technique to get 1 pixel at the click location via a CroppedBitmap. This is not a very good design practice. Instead this ColorSlider uses math in the HSV color space and converts between RGB and HSV mathematically. We want to be able to set the color as well and the aforementioned technique does not allow for setting the color.
-
SelectedColor
- Gets or sets the selected color.
-
ThumbStyle
- Gets or sets the style for the thumb portion of the control.
There are no public or protected methods, only private or inherited methods.
-
SelectedColorChanged
- Occurs when the selected color changes.
Usage is really easy and you just need to bind to the SelectedColor property. You will get a value of 0 to 359 (360 being 0) because hue color in the HSV space is represented in degrees with 0 and 360 being red. If you are more curious I encourage you to google the HSV color space and read more about it to build understanding.
For the sake of convenience we thought it best to give the developer a dynamic way to give their own unique Style to the Thumb portion of the Slider without having to retemplate the control.
You want your thumb to more than likely be on both sides of the slider for a better UX. When making a thumb for a horizontal ColorSlider consider making a Grid with row definitions auto, *, auto. That way the middle area will fill as much of the space as it can. Conversely if you are making a thumb for a vertical slider the consider making a Grid with column definitions auto, *, auto. That way the middle area will fill as much of the space as it can. This is only a suggestion.