syncfusion-wpf-color-palette

Compare original and translation side by side

🇺🇸

Original

English

🇨🇳

Translation

Chinese

Implementing Syncfusion WPF Color Palettes

实现Syncfusion WPF颜色选择器

The

SfColorPalette

is a versatile color picker component that allows users to select colors from organized swatches. It provides multiple color sets, binding support, and extensive customization options.

SfColorPalette

是一款多功能颜色选择组件，允许用户从分类整理的色卡中选取颜色。它提供多种颜色集合、绑定支持以及丰富的自定义选项。

When to Use This Skill

适用场景

Use this skill when you need to:

Add a color picker interface to your WPF application
Allow users to select colors from predefined swatches
Bind selected colors to UI elements (brushes, backgrounds, etc.)
Navigate between different color swatches (Material, Office, Metro, Grayscale, etc.)
Customize the appearance (foreground, background, flow direction)
Apply themes or customize the color palette styling

在以下场景中可以使用该组件：

为WPF应用添加颜色选择界面
允许用户从预定义色卡中选择颜色
将选中的颜色绑定到UI元素（如画刷、背景等）
在不同色卡间切换（Material、Office、Metro、灰度等）
自定义外观（前景色、背景色、布局方向）
应用主题或自定义颜色选择器样式

Quick Overview

快速概览

The Color Palette component consists of:

Color Swatches: Different organized color sets (Material, Office, etc.)
Swatch Button: Located at top-right to switch between color packages
Color Items: Individual colors available in the current swatch
Tooltip Preview: Shows the selected color when hovering
SelectedColor Property: Returns the currently selected color as a
```
Color
```
object

颜色选择器组件包含以下部分：

颜色色卡：不同分类的颜色集合（如Material、Office等）
色卡切换按钮：位于右上角，用于切换不同颜色包
颜色项：当前色卡中的单个可选颜色
悬停预览提示：鼠标悬停时显示选中的颜色
SelectedColor属性：返回当前选中的颜色，类型为
```
Color
```
对象

Documentation and Navigation Guide

文档与导航指南

Getting Started

快速入门

📄 Read: references/getting-started.md

Assembly references and NuGet package setup
Adding the control via designer, XAML, and C#
Basic Color Palette creation
Selecting colors and handling events

📄 阅读： references/getting-started.md

程序集引用与NuGet包配置
通过设计器、XAML和C#三种方式添加控件
基础颜色选择器创建
颜色选择与事件处理

Color Binding

颜色绑定

📄 Read: references/color-binding.md

Binding the SelectedColor property to other objects
Creating color to brush converters
Two-way data binding with the UI
Binding selected colors to shapes and controls

📄 阅读： references/color-binding.md

将SelectedColor属性绑定到其他对象
创建颜色到画刷的转换器
与UI进行双向数据绑定
将选中颜色绑定到形状和控件

Swatches Navigation

色卡切换

📄 Read: references/swatches-navigation.md

Available color swatches overview
Switching between different swatch collections
Understanding swatch button functionality
Customizing swatch availability

📄 阅读： references/swatches-navigation.md

可用颜色色卡概览
在不同色卡集合间切换
理解色卡切换按钮的功能
自定义可访问的色卡

Appearance and Theming

外观与主题

📄 Read: references/appearance-theming.md

Customizing foreground and background colors
Setting flow direction (LTR/RTL support)
Applying built-in themes with SfSkinManager
Creating custom themes with Theme Studio

📄 阅读： references/appearance-theming.md

自定义前景色与背景色
设置布局方向（支持LTR/RTL）
使用SfSkinManager应用内置主题
通过Theme Studio创建自定义主题

Quick Start Example

快速入门示例

xaml

<Window
    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
    xmlns:syncfusion="http://schemas.syncfusion.com/wpf"
    Title="Color Palette Example" Height="400" Width="500">
    <Grid>
        <StackPanel Margin="20">
            <TextBlock Text="Select a Color:" FontSize="14" Margin="0,0,0,10"/>
            <syncfusion:SfColorPalette 
                x:Name="colorPalette"
                Height="250"
                Width="300"
                HorizontalAlignment="Left"/>
            
            <TextBlock Text="Selected Color:" FontSize="14" Margin="0,20,0,10"/>
            <Rectangle 
                Fill="{Binding ElementName=colorPalette, Path=SelectedColor, Converter={StaticResource ColorToBrushConverter}}"
                Height="50"
                Width="300"
                HorizontalAlignment="Left"/>
        </StackPanel>
    </Grid>
</Window>

xaml

<Window
    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
    xmlns:syncfusion="http://schemas.syncfusion.com/wpf"
    Title="Color Palette Example" Height="400" Width="500">
    <Grid>
        <StackPanel Margin="20">
            <TextBlock Text="选择颜色:" FontSize="14" Margin="0,0,0,10"/>
            <syncfusion:SfColorPalette 
                x:Name="colorPalette"
                Height="250"
                Width="300"
                HorizontalAlignment="Left"/>
            
            <TextBlock Text="已选颜色:" FontSize="14" Margin="0,20,0,10"/>
            <Rectangle 
                Fill="{Binding ElementName=colorPalette, Path=SelectedColor, Converter={StaticResource ColorToBrushConverter}}"
                Height="50"
                Width="300"
                HorizontalAlignment="Left"/>
        </StackPanel>
    </Grid>
</Window>

Common Patterns

常见使用模式

Pattern 1: Basic Color Selection

模式1：基础颜色选择

Use when you need a simple color picker without advanced binding:

csharp

// Create and add the control
SfColorPalette colorPalette = new SfColorPalette();
colorPalette.Height = 300;
colorPalette.Width = 200;
this.Content = colorPalette;

// Get the selected color
Color selectedColor = colorPalette.SelectedColor;

适用于无需高级绑定的简单颜色选择场景：

csharp

// Create and add the control
SfColorPalette colorPalette = new SfColorPalette();
colorPalette.Height = 300;
colorPalette.Width = 200;
this.Content = colorPalette;

// Get the selected color
Color selectedColor = colorPalette.SelectedColor;

Pattern 2: Binding to UI Elements

模式2：绑定到UI元素

Use when you want the selected color to automatically update UI elements:

XAML:

xaml

<Grid.Resources>
    <local:ColorToSolidColorBrushValueConverter x:Key="ColorToBrushConverter"/>
</Grid.Resources>

<Rectangle Fill="{Binding ElementName=colorPalette, Path=SelectedColor, Converter={StaticResource ColorToBrushConverter}}"/>
<syncfusion:SfColorPalette x:Name="colorPalette"/>

C# Converter:

csharp

public class ColorToSolidColorBrushValueConverter : IValueConverter
{
    public object Convert(object value, Type targetType, object parameter, CultureInfo culture)
    {
        if (value is Color color)
            return new SolidColorBrush(color);
        return null;
    }
    
    public object ConvertBack(object value, Type targetType, object parameter, CultureInfo culture)
    {
        return true;
    }
}

适用于希望选中的颜色自动更新UI元素的场景：

XAML：

xaml

<Grid.Resources>
    <local:ColorToSolidColorBrushValueConverter x:Key="ColorToBrushConverter"/>
</Grid.Resources>

<Rectangle Fill="{Binding ElementName=colorPalette, Path=SelectedColor, Converter={StaticResource ColorToBrushConverter}}"/>
<syncfusion:SfColorPalette x:Name="colorPalette"/>

C#转换器：

csharp

public class ColorToSolidColorBrushValueConverter : IValueConverter
{
    public object Convert(object value, Type targetType, object parameter, CultureInfo culture)
    {
        if (value is Color color)
            return new SolidColorBrush(color);
        return null;
    }
    
    public object ConvertBack(object value, Type targetType, object parameter, CultureInfo culture)
    {
        return true;
    }
}

Pattern 3: Styled Color Palette

模式3：自定义样式的颜色选择器

Use when you need to customize appearance with themes and colors:

xaml

<syncfusion:SfColorPalette 
    x:Name="colorPalette"
    Foreground="Blue"
    Background="AliceBlue"
    FlowDirection="LeftToRight"
    Height="250"
    Width="300"/>

适用于需要通过主题和颜色自定义外观的场景：

xaml

<syncfusion:SfColorPalette 
    x:Name="colorPalette"
    Foreground="Blue"
    Background="AliceBlue"
    FlowDirection="LeftToRight"
    Height="250"
    Width="300"/>

Key Properties

关键属性

Property	Type	Default	Purpose
`SelectedColor`	`Color`	—	Gets the currently selected color
`Foreground`	`Brush`	Gray	Foreground color of the palette UI
`Background`	`Brush`	Snow	Background color of the palette
`FlowDirection`	`FlowDirection`	LeftToRight	Layout direction (LTR or RTL)

属性	类型	默认值	用途
`SelectedColor`	`Color`	—	获取当前选中的颜色
`Foreground`	`Brush`	灰色	颜色选择器UI的前景色
`Background`	`Brush`	雪白色	颜色选择器的背景色
`FlowDirection`	`FlowDirection`	LeftToRight	布局方向（从左到右或从右到左）

Common Use Cases

常见应用场景

Theme Customizer: Allow users to pick custom colors for application themes
Design Tools: Integrated color picker for graphics or UI design applications
Branding Tools: Select brand colors for design systems
Data Visualization: Pick colors for chart series, legends, or annotations
Accessibility Tools: Provide quick color selection for color blindness solutions

主题自定义工具：允许用户为应用主题选择自定义颜色
设计工具：集成颜色选择器用于图形或UI设计应用
品牌工具：为设计系统选择品牌颜色
数据可视化：为图表系列、图例或注释选择颜色
无障碍工具：为色盲辅助方案提供快速颜色选择