Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/pixieditor/colorpicker
Customizable Color Picker control for WPF and AvaloniaUI
https://github.com/pixieditor/colorpicker
avaloniaui color-picker colors control dotnet graphics hsl hsv nuget rgb wpf wpf-color-picker xaml
Last synced: 3 days ago
JSON representation
Customizable Color Picker control for WPF and AvaloniaUI
- Host: GitHub
- URL: https://github.com/pixieditor/colorpicker
- Owner: PixiEditor
- License: mit
- Created: 2020-07-02T16:48:20.000Z (over 4 years ago)
- Default Branch: master
- Last Pushed: 2024-09-09T12:52:01.000Z (4 months ago)
- Last Synced: 2024-10-30T01:02:44.717Z (3 months ago)
- Topics: avaloniaui, color-picker, colors, control, dotnet, graphics, hsl, hsv, nuget, rgb, wpf, wpf-color-picker, xaml
- Language: C#
- Homepage: https://pixieditor.net/colorpicker
- Size: 1.35 MB
- Stars: 262
- Watchers: 11
- Forks: 27
- Open Issues: 11
-
Metadata Files:
- Readme: README.md
- License: LICENSE.md
Awesome Lists containing this project
README
[](https://discord.gg/qSRMYmq)
[](https://www.nuget.org/packages/PixiEditor.ColorPicker/)
[](https://www.nuget.org/packages/PixiEditor.ColorPicker/)
# About
A collection of various WPF and AvaloniaUI controls used to select colors.
Supports .NET Framework 4.5.1+, .NET Core 3.1+, .NET 5 - 7 (WPF) and .NET 6 - 8 (AvaloniaUI).
Originally developed for [PixiEditor](https://github.com/PixiEditor/PixiEditor).
# Included Controls
- `SquarePicker`: A HSV/HSL Color Picker, consists of a circular hue slider and HV/HL square.
- `ColorSliders`: A set of HSV/RGB + Alpha sliders
- `HexColorTextBox`: An RGBA Hex text field
- `ColorDisplay`: A Primary/Secondary Color display with a swap button
- `StandardColorPicker`: Combines everything listed above in one control
- `PortableColorPicker`: A collapsible version of StandardColorPicker
- `AlphaSlider`: A separate alpha slider control
# Example Usage
See [ColorPickerDemo](https://github.com/PixiEditor/ColorPicker/tree/master/ColorPickerDemo) for an example project.
**Basic usage:**
- [WPF Basic Usage](https://github.com/PixiEditor/ColorPicker/tree/master/src/ColorPicker/README.md#example-usage)
- [AvaloniaUI Basic Usage](https://github.com/PixiEditor/ColorPicker/tree/master/src/ColorPicker.AvaloniaUI/README.md#example-usage)
# Properties
All controls share these properties:
- `SelectedColor` dependency property stores the current color as `System.Windows.Media.Color` or `Avalonia.Media.Color`. **Use this one if you simply want to get (or bind to) the current color.** When connecting controls together with bindings, use the `ColorState` dependency property instead.
- `ColorChanged`: An event that fires on SelectedColor change.
- `Color` property contains nested properties you may bind to or use to retrieve the color in code-behind:
- `Color.A`: Current Alpha, a double ranging from 0 to 255
- `Color.RGB_R`, `Color.RGB_G`, `Color.RGB_B`: Dimensions of the RGB color space, each is a 0-255 double
- `Color.HSV_H`: Hue in the HSV color space, a 0-360 double
- `Color.HSV_S`: Saturation in the HSV color space, a 0-100 double
- `Color.HSV_V`: Value in the HSV color space, a 0-100 double
- `Color.HSL_H`: Hue in the HSL color space, a 0-360 double
- `Color.HSL_S`: Saturation in the HSL color space, a 0-100 double
- `Color.HSL_L`: Lightness in the HSL color space, a 0-100 double
- `ColorState` dependency property contains all info about the current state of the control. Use this property to bind controls together. **Do not use it for any other purpose, use the other properties listed above.**
Apart from those, some controls have unique properties:
- `SecondColorState`, `SecondColor`, and `SecondaryColor` are functionally identical to `ColorState`, `Color`, and `SelectedColor` respectively. These are present on controls that have a secondary color.
- `HintColorState`, `HintNotifyableColor`, and `HintColor` are functionally identical to `ColorState`, `Color`, and `SelectedColor` respectively. These are present on controls that have a hint color. The hint color is a color field that can be used to obtain the primary color from an external source when the user clicks a button.
- `UseHintColor` enables the hint color or disables it (disabled by default).
- `SmallChange` lets you change `SmallChange` of sliders, which is used as sensitivity for when the user turns the scroll wheel with the cursor over the sliders. Present on controls with sliders.
- `ShowAlpha` lets you hide the alpha channel on various controls. Present on all controls containing either an alpha slider or a hex color textbox.
- `ShowFractionalPart` lets you hide the digits after the "." in the textboxes showing HSV and HSL values. Present on `ColorSliders` and on other controls containing `ColorSliders`.
- `PickerType`: HSV or HSL, present on `SquarePicker` and on controls that contain `SquarePicker`.
- `HexRepresentation`: RGBA or ARGB, present on `HexColorTextBox` and on controls that contain `HexColorTextBox`.
# Styling
Styling differs between AvaloniaUI and WPF version. See the respective READMEs for more info.
## AvaloniaUI
See [AvaloniaUI Styling](https://github.com/PixiEditor/ColorPicker/tree/master/src/ColorPicker.AvaloniaUI/README.md#styling)
## WPF
See [WPF Styling](https://github.com/PixiEditor/ColorPicker/tree/master/src/ColorPicker/README.md#styling)
# Other
Read flabbet's article on the theory behind the first version of this project
on [dev.to](https://dev.to/flabbet/how-does-color-pickers-work-1275)