syncfusion-winui-dropdown-color-palette

实现 Syncfusion WinUI 下拉颜色调色板

SfDropDownColorPalette 控件提供丰富的颜色选择可视化界面。它会显示一个下拉面板，在顶部突出显示选中的颜色，并提供标准颜色、带有变体的主题颜色，还支持自定义颜色调色板以及通过“更多颜色”对话框选择其他颜色。

何时使用此技能

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

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

控件概览

下拉颜色调色板包含多个颜色选择区域：

区域	用途
已选颜色按钮	显示当前选中的颜色；单击可打开调色板
自动颜色	快速使用默认颜色（通常为黑色）
主题颜色	预定义的主题颜色及其阴影变体
标准颜色	10 种标准颜色（红色、绿色、蓝色、黄色等）
最近使用	从“更多颜色”对话框中选择的颜色
更多颜色...	打开色谱对话框，以选择任意颜色

文档与导航指南

入门

📄 阅读： references/getting-started.md

• 安装 NuGet 包（Syncfusion.Editors.WinUI）
• 安装 NuGet 包（Syncfusion.Editors.WinUI）
• 注意：确保通过 NuGet 包管理器将 NuGet 包更新到最新的 Syncfusion.Editors.WinUI 版本。
• 在 XAML 和 C# 中添加控件
• 以编程方式设置选中的颜色（SelectedBrush）
• 处理 SelectedBrushChanged 事件
• 在代码中访问颜色值

控件结构

📄 阅读： references/palette-structure.md

• 了解各个颜色区域（选中、自动、主题、标准、最近使用）
• 了解颜色工具提示
• 探索“更多颜色”选项
• 了解主题变体的行为

下拉菜单自定义

📄 阅读： references/dropdown-customization.md

• 更改下拉菜单对齐方式（DropDownPlacement）
• 转换为分体模式按钮（DropDownMode = Split）
• 为按钮单击操作绑定命令
• 使用模板自定义标题 UI
• 处理下拉菜单打开/关闭事件

调色板自定义

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

• 向调色板添加自定义颜色
• 定义自定义主题颜色组
• 添加自定义标准颜色
• 移除不需要的颜色区域
• 集成 SfColorPalette 以进行高级自定义

“更多颜色”对话框

📄 阅读： references/more-colors-dialog.md

• 让用户从色谱中选择任意颜色
• 跟踪最近使用的颜色
• 区分最近使用的颜色和调色板颜色
• 自定义色谱行为

快速入门

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

常见模式

模式 1：设置和获取选中的颜色

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

// Get the selected color
var selectedBrush = palette.SelectedBrush as SolidColorBrush;
if (selectedBrush != null)
{
    Color selectedColor = selectedBrush.Color;
}

// Set a new color
palette.SelectedBrush = new SolidColorBrush(Colors.Red);

模式 2：响应颜色选择更改

<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;
    
    // Apply color somewhere
    textBlock.Foreground = newBrush;
}

模式 3：使用命令的分体模式

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

private ICommand applyColorCommand;
public ICommand ApplyColorCommand => applyColorCommand;

public void ApplyColorToSelectedText(object param)
{
    // Apply the currently selected color
    richTextBox.Document.Selection.CharacterFormat.BackgroundColor = 
        (palette.SelectedBrush as SolidColorBrush).Color;
}

模式 4：下拉菜单对齐方式

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

常见放置选项：

• Auto - 自动选择最佳可用位置（默认）
• BottomEdgeAlignedLeft - 下方左对齐
• BottomEdgeAlignedRight - 下方右对齐
• TopEdgeAlignedLeft - 上方左对齐
• TopEdgeAlignedRight - 上方右对齐

模式 5：检测调色板的打开/关闭

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

private void Palette_DropDownOpened(object sender, EventArgs e)
{
    // Palette opened
}

private void Palette_DropDownClosed(object sender, EventArgs e)
{
    // Palette closed
}

主要属性

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

参考文件

所有详细文档按功能分类：

• getting-started.md - 设置和基本实现
• palette-structure.md - 了解颜色分区
• dropdown-customization.md - 按钮和下拉菜单自定义
• color-palette-customization.md - 自定义颜色定义
• more-colors-dialog.md - 色谱选择器和最近使用的颜色

---

准备好开始实现了吗？ 请从上方的导航指南中选择一项具体任务，并阅读对应的参考文件。