syncfusion-wpf-colorpicker

Implementing WPF ColorPicker

The ColorPicker is a WPF user interface control for selecting and adjusting color values. It supports multiple color specifications including RGB (Red Green Blue), HSV (Hue Saturation Value), and hexadecimal codes, with built-in gradient editor, eyedropper, color palette, and theming support.

When to Use This Skill

Use the ColorPicker when you need to:

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

📄 Read: references/getting-started.md

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

Solid and Gradient Colors

📄 Read: references/solid-gradient-colors.md

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

📄 Read: references/customization.md

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

📄 Read: references/appearance-theming.md

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

Events and Integration

📄 Read: references/events-integration.md

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 - Set Color property and IsColorPaletteVisible="True" for user solid color picking.

Pattern 2: Gradient Selection - Set Brush property with LinearGradientBrush or RadialGradientBrush with GradientStops for gradient selection.

Pattern 3: Respond to Color Changes - Subscribe to ColorChanged and SelectedBrushChanged events to handle real-time color/brush updates.

Pattern 4: Hide Alpha Channel - Set IsAlphaVisible="False" for opaque colors only.

Pattern 5: Lock to Solid Colors - Set EnableSolidToGradientSwitch="False" to prevent gradient mode switching.

Key Properties

Property	Type	Purpose
`Color`	Color	Gets or sets the selected solid color
`Brush`	Brush	Gets or sets the selected gradient or solid brush
`IsAlphaVisible`	bool	Shows/hides alpha (opacity) controls
`IsColorPaletteVisible`	bool	Shows/hides built-in color palette
`EnableSolidToGradientSwitch`	bool	Allows/prevents switching between modes
`GradientBrushDisplayMode`	enum	Sets display mode (Default or Extended)

Key Events

Event	Triggered When
`ColorChanged`	Selected solid color changes
`SelectedBrushChanged`	Selected brush (gradient) changes

Dependencies

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