syncfusion-wpf-color-palette

实现 Syncfusion WPF 色板

SfColorPalette 是一款多功能的颜色选择器组件，用户可以从有序的色块中选择颜色。它提供多种颜色集、绑定支持和丰富的自定义选项。

何时使用此技能

在以下情况下使用此技能：

• 为 WPF 应用添加颜色选择器界面
• 允许用户从预定义色块中选择颜色
• 将所选颜色绑定到 UI 元素（画笔、背景等）
• 在不同颜色色块之间切换（Material、Office、Metro、Grayscale 等）
• 自定义外观（前景色、背景色、流向）
• 应用主题或自定义色板样式

快速概览

色板组件包含：

• 颜色色块：不同的有序颜色集（Material、Office 等）
• 色块按钮：位于右上角，用于切换颜色组
• 颜色项：当前色块中可用的单个颜色
• 工具提示预览：悬停时显示所选颜色
• SelectedColor 属性：以 Color 对象的形式返回当前所选颜色

文档与导航指南

入门

📄 阅读： references/getting-started.md

• 程序集引用和 NuGet 包设置
• 通过设计器、XAML 和 C# 添加控件
• 创建基本色板
• 选择颜色并处理事件

颜色绑定

📄 阅读： references/color-binding.md

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

色块导航

📄 阅读： references/swatches-navigation.md

• 可用颜色色块概览
• 在不同色块集合之间切换
• 了解色块按钮的功能
• 自定义可用色块

外观与主题

📄 阅读： references/appearance-theming.md

• 自定义前景色和背景色
• 设置流向（支持 LTR/RTL）
• 使用 SfSkinManager 应用内置主题
• 使用 Theme Studio 创建自定义主题

快速入门示例

<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>

常见模式

模式 1：基本颜色选择

当你需要不涉及高级绑定的简单颜色选择器时使用：

// 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;

模式 2：绑定到 UI 元素

当你希望所选颜色自动更新 UI 元素时使用：

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# 转换器：

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;
    }
}

模式 3：样式化色板

当你需要使用主题和颜色自定义外观时使用：

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

关键属性

属性	类型	默认值	用途
SelectedColor	Color	—	获取当前所选颜色
Foreground	Brush	Gray	色板 UI 的前景色
Background	Brush	Snow	色板的背景色
FlowDirection	FlowDirection	LeftToRight	布局方向（LTR 或 RTL）

常见用例

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