Getting Started with WPF color picker (ColorPicker)

This section explains how to create a WPF ColorPicker and explains about its structure.

Structure of ColorPicker

The various elements of ColorPicker are illustrated in the following screenshot.

Structure of WPF ColorPicker

Assembly deployment

Refer to the Control Dependencies section to get the list of assemblies or NuGet package that needs to be added as a reference to use the control in any application.

Refer to this documentation to find more details about installing nuget packages in a WPF application.

Adding WPF ColorPicker via designer

1) ColorPicker / ColorEdit can be added to an application by dragging it from the toolbox to a designer view. The following dependent assemblies will be added automatically:

  • Syncfusion.Shared.WPF

    ColorPicker Drag and dropped from ToolBox

  1. Set the properties for the ColorPicker in the design mode, using the Smart Tag feature.

Adding WPF ColorPicker via XAML

To add the ColorPicker / ColorEdit manually in XAML, follow these steps:

1) Create a new WPF project in Visual Studio.

2) Add the following required assembly references to the project:

  • Syncfusion.Shared.WPF

3) Import Syncfusion WPF schema, and declare the ColorPicker in XAML page.

<Window x:Class="ColorPicker_sample.MainWindow"
        Title="MainWindow" Height="450" Width="800">

<Grid Name="grid">
    <syncfusion:ColorPicker Name="colorPicker" Height="100" Width="280" />

ColorPicker Dropdown

Adding WPF ColorPicker via C#

To add the ColorPicker manually in C#, follow these steps:

1) Create a new WPF application via Visual Studio.

2) Add the following required assembly references to the project:

  • Syncfusion.Shared.WPF

3) Include the required namespace.

using Syncfusion.Windows.Shared;

4) Create an instance of ColorPicker / ColorEdit, and add it to the window.

ColorPicker colorPicker = new ColorPicker();

colorPicker.Width = 300;


ColorPicker Control

Bind to a color

ColorPicker and ColorEdit can be easily binded to Color as well as Brush .

<Button  Background="{Binding ElementName=colorPicker, Path=Brush}" ></Button>
<syncfusion:ColorPicker Name="colorPicker" Width="300" HorizontalAlignment="Center" VerticalAlignment="Center"/>

Choose a Color

ColorPicker consist of delicate input components to select color, such as slider with Hue Spectrum,Color selection palette with saturation range, updown controls to get or set color value runtime.

Choose a color from ColorPicker

Color changed notification

Color changed in ColorPicker can be examined using SelectedBrushChanged and ColorChanged.

colorPicker.SelectedBrushChanged += ColorPicker_SelectedBrushChanged;

  private void ColorPicker_SelectedBrushChanged(DependencyObject d, DependencyPropertyChangedEventArgs e)
         // code here

Gradient Brush

ColorPicker supports Linear and Radial brush selection along with their property editors.

WPF ColorPicker Linear Gradient

WPF ColorPicker Radial Gradient