Customizable Color Picker control for AvaloniaUI https://pixieditor.net/colorpicker
Find a file
Repository files (latest commit first)
Filename Latest commit message Latest commit date
2026-10-01 15:24:39 +10:00
Converters chore: fold up into cleaner repo structure 2026-10-01 14:58:37 +10:00
Images chore: clean up Images 2026-10-01 15:16:10 +10:00
Models chore: fold up into cleaner repo structure 2026-10-01 14:58:37 +10:00
Templates chore: fix up more stuff 2026-10-01 15:07:22 +10:00
UIExtensions chore: fold up into cleaner repo structure 2026-10-01 14:58:37 +10:00
.gitignore moved rounded stuff to style + cleanup 2022-03-26 12:00:43 +01:00
ColorPicker.csproj chore: rip out nuget stuff 2026-10-01 15:24:39 +10:00
ColorRoutedEventArgs.cs chore: fold up into cleaner repo structure 2026-10-01 14:58:37 +10:00
HueSlider.cs chore: fold up into cleaner repo structure 2026-10-01 14:58:37 +10:00
icon.png chore: compress icon.png 2026-10-01 15:13:36 +10:00
LICENSE.md clean up repo 2026-06-09 07:24:55 +10:00
LockedFramebufferExtensions.cs chore: fold up into cleaner repo structure 2026-10-01 14:58:37 +10:00
packages.lock.json chore: fix 2026-10-01 15:11:01 +10:00
PickerControlBase.cs chore: fold up into cleaner repo structure 2026-10-01 14:58:37 +10:00
README.md chore: fix up more stuff 2026-10-01 15:07:22 +10:00
sgkey.snk chore: fold up into cleaner repo structure 2026-10-01 14:58:37 +10:00
SquarePicker.cs chore: fold up into cleaner repo structure 2026-10-01 14:58:37 +10:00
SquareSlider.cs chore: fold up into cleaner repo structure 2026-10-01 14:58:37 +10:00

Discord Server Download Downloads

AvaloniaUI version of ColorPicker

demo project

Example Usage

See ColorPickerDemo for an example project.

Basic usage:

Install the NuGet package, insert a reference to the ColorPicker namespace

<Window ...
        xmlns:colorPicker="clr-namespace:ColorPicker;assembly=ColorPicker"
...>

Add the controls

<colorpicker:StandardColorPicker x:Name="main" Width="200" Height="380"/>
<colorpicker:PortableColorPicker ColorState="{Binding #main.ColorState, Mode=TwoWay}" Width="40" Height="40"/>

Styling

Out of the box, the color picker doesn't have a look. You must select a theme for it. There are 2 bundled themes:

  • SimpleColorPickerTheme - Basic theme, as close as possible to Avalonia's SimpleTheme
  • PixiPerfectColorPickerTheme - Our custom theme used in PixiEditor

Both themes are available in Dark and Light variants.

SimpleColorPickerTheme

To use a theme, go to your App.xaml and add the following:

<Application ...
        xmlns:templates="clr-namespace:ColorPicker.Templates;assembly=ColorPicker">
 <Application.Styles>
        ...
        <templates:SimpleColorPickerTheme /> <!-- or -->
        <templates:PixiPerfectColorPickerTheme />
    </Application.Styles>

You may define your own themes, AvaloniaUI version of ColorPicker is built with TemplatedControls, so look can be fully customized.

Use SimpleColorPickerTheme as a reference.