Skip to main content

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.AvaloniaUI"
...>

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.AvaloniaUI.Templates;assembly=ColorPicker.AvaloniaUI">
 <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.