Getting Started with WPF ColorPicker

18 Nov 201810 minutes to read

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

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

WPF ColorPicker can be added to an application by dragging it from the toolbox onto a view in the designer. The following dependent assembly will be added automatically:

• Syncfusion.Shared.WPF

Adding WPF ColorPicker via XAML

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

1. Create a new WPF project in Visual Studio.

2. Add the following required assembly reference to the project:

   • Syncfusion.Shared.WPF

3. Import the Syncfusion^® WPF schema http://schemas.syncfusion.com/wpf and declare the WPF ColorPicker on the XAML page.

   XAML

   <Window x:Class="ColorPickerSample.MainWindow"
           xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
           xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
           xmlns:syncfusion="http://schemas.syncfusion.com/wpf"
           Title="MainWindow" Height="450" Width="800">
       <Grid>
           <syncfusion:ColorPicker Name="colorPicker" Height="100" Width="280"/>
       </Grid>
   </Window>

Adding WPF ColorPicker via C#

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

1. Create a new WPF application in Visual Studio.

2. Add the following required assembly reference to the project:

   • Syncfusion.Shared.WPF

3. Include the required namespace and create an instance of the WPF ColorPicker.

   C#

   // Required usings:
   // using Syncfusion.Windows.Shared;
      
   ColorPicker colorPicker = new ColorPicker();
   colorPicker.Width = 300;
   colorPicker.Height = 100;

Select a Color

You can select a solid color or a gradient color from WPF ColorPicker using the Color and Brush properties. The default value of Color is Transparent, and the default value of Brush is null.

Select Solid Color

You can select a solid color by using the Color property.

XAML

<syncfusion:ColorPicker x:Name="colorPicker"
                         Color="Yellow"/>

C#

ColorPicker colorPicker = new ColorPicker();
colorPicker.Color = Colors.Yellow;

Select a Gradient Color

You can select a linear or radial gradient brush that contains multiple colors from the WPF ColorPicker.

Linear Gradient

A linear gradient can be configured with multiple colors and their locations along the gradient axis using GradientStop objects and the StartPoint and EndPoint properties. The selected colors are combined in a linear manner based on StartPoint and EndPoint.

XAML

<syncfusion:ColorPicker x:Name="colorPicker" Width="200">
   <syncfusion:ColorPicker.Brush>
        <LinearGradientBrush StartPoint="0,0" EndPoint="1,1">
             <GradientStop Color="Yellow" Offset="0.0" />
             <GradientStop Color="Red" Offset="0.25" />
             <GradientStop Color="Blue" Offset="0.75" />
             <GradientStop Color="LimeGreen" Offset="1.0" />
        </LinearGradientBrush>
    </syncfusion:ColorPicker.Brush>
 </syncfusion:ColorPicker>

C#

//Creating the linear gradient brush
LinearGradientBrush linearGradient = new LinearGradientBrush();
linearGradient.StartPoint = new Point(0, 0);
linearGradient.EndPoint = new Point(1, 1);
linearGradient.GradientStops.Add(new GradientStop(Colors.Yellow, 0.0));
linearGradient.GradientStops.Add(new GradientStop(Colors.Red, 0.25));
linearGradient.GradientStops.Add(new GradientStop(Colors.Blue, 0.75));
linearGradient.GradientStops.Add(new GradientStop(Colors.LimeGreen, 1.0));

//Assigning a linear gradient brush to ColorPicker
ColorPicker colorPicker= new ColorPicker();
colorPicker.Brush = linearGradient;

Radial Gradient

A radial gradient is similar to a linear gradient, except that the axis is defined by a circle. The selected gradient colors are combined in a circular manner based on the GradientOrigin, Center, and RadiusPoint property values.

XAML

<syncfusion:ColorPicker x:Name="colorPicker" Width="200">
    <syncfusion:ColorPicker.Brush>
        <RadialGradientBrush GradientOrigin="0.5,0.5" Center="0.5,0.5" RadiusX="0.5" RadiusY="0.5">
            <GradientStop Color="Yellow" Offset="0" />
            <GradientStop Color="Red" Offset="0.25" />
            <GradientStop Color="Blue" Offset="0.75" />
            <GradientStop Color="LimeGreen" Offset="1" />
        </RadialGradientBrush>
    </syncfusion:ColorPicker.Brush>
</syncfusion:ColorPicker>

C#

// Required usings:
// using System.Windows;
// using System.Windows.Media;
// using Syncfusion.Windows.Shared;

//Creating a radial gradient brush
RadialGradientBrush radialGradient = new RadialGradientBrush();
radialGradient.GradientOrigin = new Point(0.5, 0.5);
radialGradient.Center = new Point(0.5, 0.5);
radialGradient.RadiusX = 0.5;
radialGradient.RadiusY = 0.5;
radialGradient.GradientStops.Add(new GradientStop(Colors.Yellow, 0.0));
radialGradient.GradientStops.Add(new GradientStop(Colors.Red, 0.25));
radialGradient.GradientStops.Add(new GradientStop(Colors.Blue, 0.75));
radialGradient.GradientStops.Add(new GradientStop(Colors.LimeGreen, 1.0));

//Assigning the radial gradient brush to ColorPicker
colorPicker.Brush = radialGradient;

Change Selected Color at runtime

The selected color and brush in the WPF ColorPicker can be observed using the SelectedBrushChanged and ColorChanged events.

XAML

<syncfusion:ColorPicker ColorChanged="ColorPicker_ColorChanged"
                        SelectedBrushChanged="ColorPicker_SelectedBrushChanged"
                        Name="colorPicker"/>

C#

ColorPicker colorPicker = new ColorPicker();
colorPicker.SelectedBrushChanged += ColorPicker_SelectedBrushChanged;
colorPicker.ColorChanged += ColorPicker_ColorChanged;

C#

//Invoked when the selected color is changed
private void ColorPicker_ColorChanged(DependencyObject d, DependencyPropertyChangedEventArgs e) {
    //Read the new and old color
    Color newColor = (Color)e.NewValue;
    Color oldColor = (Color)e.OldValue;
}

//Invoked when the selected brush is changed
private void ColorPicker_SelectedBrushChanged(DependencyObject d, DependencyPropertyChangedEventArgs e) {
    //Read the new and old brush
    Brush newBrush = (Brush)e.NewValue;
    Brush oldBrush = (Brush)e.OldValue;
}

Change opacity of the color

You can change the opacity of the selected color using the A (alpha) value editor or the alpha slider in the WPF ColorPicker. You can hide the alpha value editor and the slider by setting the IsAlphaVisible property to false. The default value of IsAlphaVisible is true.

XAML

<syncfusion:ColorPicker IsAlphaVisible="False" x:Name="colorPicker" />

C#

ColorPicker colorPicker = new ColorPicker();
colorPicker.IsAlphaVisible = false;

Switch between Solid, Linear and Gradient brush mode

You can switch the color-selection mode by clicking the corresponding Solid, Linear, or Gradient button placed in the bottom-right corner of the WPF ColorPicker. The default brush mode is Solid.

Hide the brush mode switch buttons

You can hide the Solid, Linear, and Gradient brush-mode switch buttons by setting the EnableSolidToGradientSwitch property to false. The default value of EnableSolidToGradientSwitch is true.

XAML

<syncfusion:ColorPicker x:Name="colorPicker" EnableSolidToGradientSwitch="false"/>

C#

ColorPicker colorPicker = new ColorPicker();
colorPicker.EnableSolidToGradientSwitch = false;

Click here to download the sample that showcases the WPF ColorPicker overall features.

Theme

The WPF ColorPicker supports various built-in themes. Refer to the links below to apply themes,

• Apply theme using SfSkinManager

• Create a custom theme using ThemeStudio