syncfusion-winui-dropdown-color-picker

用途

本技能用于指导在 WinUI 应用中实现 Syncfusion 的 DropDown Color Picker 控件（SfDropDownColorPicker）。该控件是一个用于颜色选择与编辑的多功能控件，以带下拉按钮的颜色光谱形式呈现，适用于需要交互式颜色选择 UI 的场景。

主要能力

颜色编辑：可拖动选择颜色，或以 RGB、HSV、HSL、CMYK、十六进制格式手动输入数值。
色相光谱滑块：快速选择色相值。
颜色通道模式：可在 RGB、HSV、HSL、CMYK 颜色空间之间切换。
拆分模式：可选按钮与下拉箭头分离的拆分模式。
下拉自定义：控制下拉位置（full、center、left、right、top、bottom）。
不透明度控制：调整 alpha/透明度值。
事件处理：提供 SelectedBrushChanged、DropDownOpened、DropDownClosed 事件。
自定义模板：可自定义头部与下拉按钮 UI。

使用方式

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

命名空间：Syncfusion.UI.Xaml.Editors。

基础实现（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;
}

关键属性：

SelectedBrush（Brush）：当前选中的颜色，常见值如 Colors.Blue、new SolidColorBrush()。
DropDownMode（enum）：下拉行为，常见值 Dropdown、Split。
DropDownPlacement（FlyoutPlacementMode）：下拉位置，常见值 Full、Top、Bottom、Left、Right。
Command（ICommand）：按钮点击时触发的命令，自定义 ICommand 实现。

适用场景

主题颜色选择器：允许用户选择应用主题颜色。

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

拆分按钮模式直接应用：点击按钮应用上次选中的颜色，打开下拉更改颜色。

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

自定义颜色编辑器界面：嵌入特定颜色选择器配置。

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

定位下拉（右上角）：控制颜色选择器打开的位置。

<editors:SfDropDownColorPicker DropDownPlacement="TopEdgeAlignedRight" />

常见模式：

颜色绑定到 UI 元素：选中颜色后立即应用到目标元素。

void ColorPicker_SelectedBrushChanged(object sender, SelectedBrushChangedEventArgs e)
{
    targetRectangle.Fill = e.NewBrush;
}

验证颜色选择：

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

拆分模式配合自定义命令：

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

参考指南导航

入门：references/getting-started.md，包含安装与 NuGet 设置、创建含 DropDown Color Picker 的项目、基础 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 绑定模式、完整模板示例。

限制

资料未提供该控件的收费、价格、平台兼容性、性能效果等具体信息，暂未提供。

技能介绍

用途

主要能力

使用方式

适用场景

参考指南导航

限制