syncfusion-winui-dropdown-color-palette

用途

本技能用于指导在 Windows 桌面应用中实现 Syncfusion WinUI 的 DropDown Color Palette 控件（SfDropDownColorPalette）。该控件提供丰富的可视化颜色选择界面，适合需要让用户从预设或自定义调色板中选取颜色的场景。

主要能力

控件将多个颜色选择区域组合在一个下拉面板中：

选中颜色按钮：显示当前选中的颜色，点击后打开调色板。
自动颜色：快速访问默认颜色（通常为黑色）。
主题颜色：预定义主题颜色及其深浅变体。
标准颜色：10 种标准颜色（红、绿、蓝、黄等）。
最近使用：来自“更多颜色”对话框中所选的颜色。
更多颜色…：打开光谱对话框以选择任意颜色。

控件还支持颜色工具提示、主题变体行为，以及通过 SfColorPalette 进行高级自定义。

使用方式

安装与基础实现

通过 NuGet 包管理器安装 Syncfusion.Editors.WinUI 包，并确保更新到最新版本。

XAML 基础实现：

<Page
    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
    xmlns:editors="using:Syncfusion.UI.Xaml.Editors">
    <Grid>
        <editors:SfDropDownColorPalette x:Name="colorPalette" />
    </Grid>
</Page>

C# 基础实现：

using Syncfusion.UI.Xaml.Editors;

public sealed partial class MainPage : Page
{
    public MainPage()
    {
        this.InitializeComponent();
        var colorPalette = new SfDropDownColorPalette();
        grid.Children.Add(colorPalette);
    }
}

设置与获取选中颜色

<editors:SfDropDownColorPalette SelectedBrush="Yellow" x:Name="palette" />

// 获取选中颜色
var selectedBrush = palette.SelectedBrush as SolidColorBrush;
if (selectedBrush != null)
{
    Color selectedColor = selectedBrush.Color;
}

// 设置新颜色
palette.SelectedBrush = new SolidColorBrush(Colors.Red);

响应颜色选择变化

<editors:SfDropDownColorPalette 
    SelectedBrushChanged="Palette_SelectedBrushChanged"
    x:Name="palette" />

private void Palette_SelectedBrushChanged(object sender, SelectedBrushChangedEventArgs e)
{
    var oldBrush = e.OldBrush as SolidColorBrush;
    var newBrush = e.NewBrush as SolidColorBrush;
    
    // 将颜色应用到某处
    textBlock.Foreground = newBrush;
}

拆分模式与命令

<editors:SfDropDownColorPalette 
    DropDownMode="Split"
    Command="{x:Bind ApplyColorCommand}"
    x:Name="palette" />

private ICommand applyColorCommand;
public ICommand ApplyColorCommand => applyColorCommand;

public void ApplyColorToSelectedText(object param)
{
    // 应用当前选中颜色
    richTextBox.Document.Selection.CharacterFormat.BackgroundColor = 
        (palette.SelectedBrush as SolidColorBrush).Color;
}

下拉对齐

<editors:SfDropDownColorPalette 
    DropDownPlacement="BottomEdgeAlignedRight"
    x:Name="palette" />

常用放置选项：Auto（默认，最佳可用位置）、BottomEdgeAlignedLeft、BottomEdgeAlignedRight、TopEdgeAlignedLeft、TopEdgeAlignedRight。

检测调色板打开/关闭

<editors:SfDropDownColorPalette 
    DropDownOpened="Palette_DropDownOpened"
    DropDownClosed="Palette_DropDownClosed"
    x:Name="palette" />

private void Palette_DropDownOpened(object sender, EventArgs e)
{
    // 调色板已打开
}

private void Palette_DropDownClosed(object sender, EventArgs e)
{
    // 调色板已关闭
}

关键属性

SelectedBrush（Brush）：获取/设置当前选中颜色，默认 Black。
DropDownPlacement（FlyoutPlacementMode）：下拉相对于按钮的位置，默认 Auto。
DropDownMode（DropDownMode）：下拉或拆分模式，默认 Dropdown。
Command（ICommand）：拆分模式下按钮点击时执行的命令。
ContentTemplate（DataTemplate）：自定义选中颜色按钮外观。
DropDownButtonTemplate（DataTemplate）：自定义下拉箭头按钮（拆分模式）。

适用场景

为 WinUI 应用添加颜色选择功能。
让用户从主题和标准调色板中选择颜色。
为品牌自定义可用颜色。
实现带颜色选择的拆分模式按钮。
跟踪最近选择的颜色。
悬停时显示颜色工具提示。
允许用户从光谱中选择任意颜色。

限制

本技能资料未提供关于收费、价格、平台兼容性范围、性能指标或具体效果的信息，相关内容暂未提供。