Implementing WPF ColorPicker

When to Use This Skill

• Allow users to select solid colors in WPF applications
• Create linear or radial gradient brushes with multiple color stops
• Edit color values manually using RGB, HSV, or Hex input
• Include an eyedropper tool for picking colors from anywhere in the app
• Control color opacity/alpha channel
• Provide a color palette for quick color selection
• Handle color-changed and brush-changed events
• Apply built-in or custom themes to match application design

Navigation Guide

Getting Started

• Assembly dependencies and NuGet package setup
• Adding ColorPicker via Designer, XAML, and C#
• Control structure overview
• Basic configuration

Solid and Gradient Colors

• Selecting solid colors with Color property
• Creating linear gradients with StartPoint, EndPoint, and GradientStops
• Creating radial gradients with GradientOrigin, Center, RadiusX, RadiusY
• Runtime color editing and selection
• Managing opacity with alpha channel
• Switching between solid, linear, and gradient modes

Customization Options

• Enabling/disabling color palette visibility
• Gradient brush display modes (Default vs Extended)
• Inverted color calculation for contrast
• ScRGB color support
• Hiding or showing alpha value editors
• Restricting brush mode transitions

Appearance and Theming

• Built-in theme support
• SfSkinManager integration for theme application
• ThemeStudio custom theme creation
• Theme-based appearance customization

Events and Integration

• ColorChanged event handling
• SelectedBrushChanged event handling
• Runtime color change notifications
• Integration patterns with other controls

Quick Start

Basic XAML Setup

<Window xmlns:syncfusion="http://schemas.syncfusion.com/wpf">
    <Grid>
        <syncfusion:ColorPicker Name="colorPicker" 
                                Width="280" 
                                Height="100"/>
    </Grid>
</Window>

Basic C# Setup

using Syncfusion.Windows.Shared;

ColorPicker colorPicker = new ColorPicker();
colorPicker.Width = 300;
colorPicker.Height = 100;
grid.Children.Add(colorPicker);

Set Initial Color

<syncfusion:ColorPicker Color="Yellow" />

Common Patterns

Pattern 1: Solid Color Selection

<syncfusion:ColorPicker x:Name="solidColorPicker"
                        Color="Blue"
                        IsColorPaletteVisible="True"/>

Pattern 2: Gradient Selection

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

Pattern 3: Respond to Color Changes

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

private void ColorPicker_ColorChanged(DependencyObject d, 
                                      DependencyPropertyChangedEventArgs e)
{
    // Handle color change
    Color selectedColor = (Color)e.NewValue;
}

private void ColorPicker_SelectedBrushChanged(DependencyObject d, 
                                              DependencyPropertyChangedEventArgs e)
{
    // Handle brush change
    Brush selectedBrush = (Brush)e.NewValue;
}

Pattern 4: Hide Alpha Channel

<syncfusion:ColorPicker IsAlphaVisible="False" />

Pattern 5: Lock to Solid Colors Only

<syncfusion:ColorPicker EnableSolidToGradientSwitch="false" />

Key Properties

Color

Brush

IsAlphaVisible

IsColorPaletteVisible

EnableSolidToGradientSwitch

GradientBrushDisplayMode

Key Events

ColorChanged

SelectedBrushChanged

Dependencies

• Assembly: Syncfusion.Shared.WPF
• Framework: .NET Framework 4.5+
• Dependencies: Syncfusion WPF shared components