ColorPicker
A ColorPicker control that can be used to allow users to pick colors.
This ColorPicker uses the HSV color space to calculate 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 ColorPicker 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.
-
ColorPickerCursor
- Gets or sets the cursor to show when the user mouses over the square color picker portion of the control.
-
CornerRadius
- Gets or sets the corner radius for the ColorPicker. (rounded corners)
-
HexStringCode
- Gets or sets the color hex code.
-
HueColor
- Gets or sets the hue color (the color for the vertical color slider).
- (remarks) The developer should not need to manage this property too much or at all. When the selected color is set we strip the hue value out of it and assign that value here so that it reflects on the vertical slider. Devs can set this externally but it is not suggested. Instead just manage the SelectedColor.
-
PreviousColor
- Gets or sets the previous color.
- (remarks) This color is not managed at all. This is to be managed externally so the dev using this can decide if they want have the previous color update in real time or at some other point. Loaded is not enough because this control might not be in a dialog and loaded will only fire when the control is rendered to the screen. So rather than come up with some internal strategy for managing the PreviousColor we'll just leave it up to the dev implementing the ColorPicker.
-
SelectedColor
- Gets or sets the selected color.
- (remarks) When this property is set the hue value is stripped out of it and then set it on the HueColor. This way the HueColor will always reflect the more core hue of the SelectedColor. Clearly, this won't work with colors not on the vertical slider; such as grays, whites and blacks.
-
SliderRValue
- Gets or sets the R slider value.
-
SliderGValue
- Gets or sets the G slider value.
-
SliderBValue
- Gets or sets the B slider value.
-
SliderAValue
- Gets or sets the A slider value.
There are no public or protected methods, only private or inherited methods.
-
SelectedColorChanged
- Occurs when the selected color changes.
The PreviousColor needs to be managed externally. This is because there could be 2 strategies desired...
- The PreviousColor is updated in real time as the SelectedColor changes.
- The PreviousColor stays the same until it is some how "accepted" by the user, say in a dialog popup.
So if this control is not in a dialog and included on the main window, or something, the loaded event would only fire one time and it wouldn't be sufficient to set the PreviousColor from setting the SelectedColor (we used to do this...bad strategy). Rather than try to come up with some strategy to manage the problem we'll leave it up to the devs implementing the ColorPicker.
It is suggested to not use the HueColor property directly. This color is generally managed by the ColorPicker in this way; if any color property changes (other than PreviousColor) then the SelectedColor is set and the HueColor is set after that.
So if you slide the R slider at the bottom, that will change the SelectedColor, which in turn will set the HueColor to match what the SelectedColor's pure hue is. If you paste a HEX color into the hex TextBox at the bottom then the SelectedColor is set, after that we set the HueColor.
If you want to try to manage the HueColor yourself, we don't suggest it, here is what the vertical ColorSlider looks like (to see the available colors)...
So the range colors is limited on the slider but we want to do our best to match them if we can. You don't want to have to manually do this so let the ColorPicker. Just use the SelectedColor property as suggested and ignore HueColor.
This color property will change A LOT! As a user drags any slider at the bottom, pastes in a HEX color code or even moves the vertical color slider up/down we update this property. It changes in real time as changes are made to the control. So this also means that the SelectedColorChanged event will also fire a lot, potentially. It will fire as much as the user changes the control.
Again, this is because this control is not in a dialog, you can put it in one. If the control were outside of a dialog there might not be a save or update button to make changes from so we update in real time as changes are made. Just keep this in mind.
Yes there are no button at the bottom of this ColorPicker because it is just a control. If you want it in a dialog then you are going to have to put it in a dialog. It was designed this way so that it could also be included on a main page or something where you would not need a Save/Cancel button. So it is up to you on how you want to use it. Keep that in mind.
This control is in an alpha development state but is very functional.
This control is now in a beta state. The issue has been fixed with the color picker.
Warning: WPF.AA.ColorSpace.ColorConverter will not produce 2 way round trip color conversion for colors near black. The color math was compared to several online examples and other open source code on GitHub and it appears similar or identical. More research and testing will be necessary to produce more accurate 2 way round trip color conversions for colors nearing black (if it can even be corrected).
This UI of this control is subject to change in the future. I am not 100% sure I want to keep the sliders or make more compact like Photoshop's color picker control.
- See WPF.AA.ColorSpace.ColorConverter warning above.