syncfusion-winui-dropdown-color-picker

实现 Syncfusion WinUI 下拉颜色选取器

WinUI 下拉颜色选取器（SfDropDownColorPicker）是一款功能丰富的颜色选择和编辑控件。它以可下拉按钮的形式显示颜色光谱，支持多种颜色通道模式、不透明度调整和丰富的自定义选项。

何时使用此技能

• 用户需求：具有下拉行为的交互式颜色选择界面
• 用户需求：支持多种颜色格式（RGB、HSV、HSL、CMYK、十六进制）
• 用户需求：可自定义下拉位置和分割按钮模式
• 用户需求：自定义下拉列表中嵌入的颜色选取器
• 用户需求：处理颜色更改事件并绑定颜色
• 用户需求：自定义标题 UI 或下拉按钮样式

组件概述

主要功能

• 颜色编辑：拖动以选择颜色，或手动输入 RGB、HSV、HSL、CMYK 或十六进制格式的值
• 色相光谱滑块：快速选择色相值
• 颜色通道模式：在 RGB、HSV、HSL 和 CMYK 颜色空间之间切换
• 分割模式：可选的按钮与下拉箭头分离布局
• 下拉列表自定义：控制位置（全屏、居中、左侧、右侧、顶部、底部）
• 不透明度控制：调整 Alpha/透明度值
• 事件处理：SelectedBrushChanged、DropDownOpened、DropDownClosed 事件
• 自定义模板：自定义标题和下拉按钮 UI

所需 NuGet 包

• Syncfusion.Editors.WinUI

**注意：**在构建或发布应用程序之前，请通过 NuGet 包管理器将 Syncfusion.Editors.WinUI NuGet 包更新到最新可用版本。

命名空间

• Syncfusion.UI.Xaml.Editors

文档和导航指南

根据任务选择参考指南：

入门

📄 阅读： references/getting-started.md

• 安装和 NuGet 设置
• 使用下拉颜色选取器创建项目
• 基本 XAML 和 C# 实现
• 以编程方式选择颜色
• 交互式颜色选择
• 切换颜色通道（RGB、HSV、HSL、CMYK）
• 调整不透明度和 Alpha 值
• 使用十六进制颜色编辑器

颜色选取器自定义

📄 阅读： references/color-picker-customization.md

• 自定义嵌入式颜色选取器
• 使用 AttachedFlyout 和 DropDownFlyout
• 画笔类型选项（SolidColorBrush、LinearGradientBrush 等）
• 自定义尺寸和外观
• 嵌入式颜色选取器示例

下拉模式和位置

📄 阅读： references/dropdown-modes-and-placement.md

• 下拉位置模式
• 使用 DropDownPlacement 属性
• 分割模式（按钮 + 下拉箭头）
• 分割模式下的命令绑定
• 下拉与完整下拉行为
• 自定义标题 UI 样式

事件和命令

📄 阅读： references/events-and-commands.md

• SelectedBrushChanged 事件
• OldBrush 和 NewBrush 属性
• DropDownOpened 和 DropDownClosed 事件
• 命令绑定模式
• 事件处理代码示例

标题和 UI 自定义

📄 阅读： references/header-and-ui-customization.md

• 为选中颜色按钮设置 ContentTemplate
• 为下拉按钮设置 DropDownButtonTemplate
• 在 XAML 中自定义 UI 样式
• 分割模式自定义标题
• DataContext 绑定模式
• 完整模板示例

快速入门示例

基本实现（XAML）

<Page xmlns:editors="using:Syncfusion.UI.Xaml.Editors">
    <Grid>
        <editors:SfDropDownColorPicker x:Name="colorPicker" 
                                       SelectedBrush="Blue" />
    </Grid>
</Page>

基本实现（C#）

using Syncfusion.UI.Xaml.Editors;

public sealed partial class MainPage : Page
{
    public MainPage()
    {
        this.InitializeComponent();
        
        SfDropDownColorPicker colorPicker = new SfDropDownColorPicker();
        colorPicker.SelectedBrush = new SolidColorBrush(Colors.Blue);
        
        grid.Children.Add(colorPicker);
    }
}

侦听颜色更改

// Subscribe to color change event
colorPicker.SelectedBrushChanged += ColorPicker_SelectedBrushChanged;

private void ColorPicker_SelectedBrushChanged(object sender, SelectedBrushChangedEventArgs e)
{
    var oldColor = e.OldBrush;
    var newColor = e.NewBrush;
    
    // Apply the selected color
    myElement.Background = newColor;
}

常见用例

1. 主题颜色选择器

允许用户选择应用程序主题颜色：

// User selects a color → apply to app background
SfDropDownColorPicker themeColorPicker = new SfDropDownColorPicker();
themeColorPicker.SelectedBrushChanged += (s, e) => 
{
    Window.Current.Content.Background = e.NewBrush;
};

2. 用于直接应用的分割按钮模式

单击按钮可应用上次选择的颜色，打开下拉列表以更改颜色：

<editors:SfDropDownColorPicker DropDownMode="Split"
                               Command="{x:Bind ApplyColorCommand}" />

3. 自定义颜色编辑器界面

嵌入特定的颜色选取器配置：

<editors:SfDropDownColorPicker>
    <FlyoutBase.AttachedFlyout>
        <editors:DropDownFlyout>
            <editors:SfColorPicker BrushTypeOptions="LinearGradientBrush" 
                                   Width="250" />
        </editors:DropDownFlyout>
    </FlyoutBase.AttachedFlyout>
</editors:SfDropDownColorPicker>

4. 定位下拉菜单（右上角）

控制颜色选择器的打开位置：

<editors:SfDropDownColorPicker DropDownPlacement="TopEdgeAlignedRight" />

关键属性

属性	类型	用途	常见值
SelectedBrush	Brush	当前选中的颜色	Colors.Blue、new SolidColorBrush()
DropDownMode	enum	下拉菜单行为	Dropdown、Split
DropDownPlacement	FlyoutPlacementMode	下拉菜单的位置	Full、Top、Bottom、Left、Right
Command	ICommand	点击按钮时触发的命令	自定义 ICommand 实现

常见模式

模式 1：将颜色绑定到 UI 元素

// When color is selected, immediately apply to target element
void ColorPicker_SelectedBrushChanged(object sender, SelectedBrushChangedEventArgs e)
{
    targetRectangle.Fill = e.NewBrush;
}

模式 2：验证颜色选择

void ColorPicker_SelectedBrushChanged(object sender, SelectedBrushChangedEventArgs e)
{
    // Validate color meets requirements
    if (IsValidColor(e.NewBrush))
    {
        ApplyColor(e.NewBrush);
    }
    else
    {
        colorPicker.SelectedBrush = e.OldBrush; // Revert
    }
}

模式 3：使用自定义命令的分离模式

public ICommand QuickApplyCommand => new RelayCommand(() =>
{
    // Apply current selected color without opening dropdown
    ApplySelectedColorToTextSelection();
});

后续步骤

• 从这里开始：getting-started.md，了解如何设置基本的下拉颜色选择器
• 然后探索：根据你的具体需求查看其他参考指南
• 用于生产环境：查看所有指南，了解完整的自定义功能