Back to Details

syncfusion-winui-dropdown-color-palette

Compare original and translation side by side

🇺🇸

Original

English
🇨🇳

Translation

Chinese

Implementing Syncfusion WinUI DropDown Color Palette

实现Syncfusion WinUI DropDown Color Palette控件

The 
SfDropDownColorPalette
control provides a rich visual interface for color selection. It displays a dropdown with selected color highlighted at the top, offers standard colors, theme colors with variants, and supports custom color palettes and additional color selection through a More Colors dialog.
SfDropDownColorPalette
控件为颜色选择提供了丰富的可视化界面。它会显示一个下拉菜单，顶部高亮显示已选颜色，提供标准颜色、带变体的主题颜色，还支持自定义调色板以及通过「更多颜色」对话框选择其他颜色。

When to Use This Skill

何时使用本技能

Use this skill when you need to:
  • Add color selection to your WinUI application
  • Let users choose from theme and standard color palettes
  • Customize available colors for your brand
  • Implement a split-mode button with color selection
  • Track recently selected colors
  • Show color tooltips on hover
  • Allow users to pick any color from a spectrum
当你需要以下功能时，可以使用本技能：
  • 为WinUI应用添加颜色选择功能
  • 让用户从主题和标准调色板中选择颜色
  • 为你的品牌自定义可用颜色
  • 实现带颜色选择的拆分模式按钮
  • 追踪最近选择的颜色
  • 鼠标悬停时显示颜色提示
  • 允许用户从色谱中选择任意颜色

Control Overview

控件概述

The DropDown Color Palette combines several color selection areas:
SectionPurpose
Selected Color ButtonDisplays currently selected color; clicking opens palette
Automatic ColorQuick access to default color (usually black)
Theme ColorsPredefined theme colors with shade variants
Standard Colors10 standard colors (red, green, blue, yellow, etc.)
Recently UsedColors selected from More Colors dialog
More Colors...Opens spectrum dialog for any color
下拉调色板包含多个颜色选择区域：
区域用途
已选颜色按钮显示当前选中的颜色；点击可打开调色板
自动颜色快速访问默认颜色（通常为黑色）
主题颜色预定义的主题颜色及色调变体
标准颜色10种标准颜色（红、绿、蓝、黄等）
最近使用从「更多颜色」对话框中选择过的颜色
更多颜色...打开色谱对话框以选择任意颜色

Documentation and Navigation Guide

文档与导航指南

Getting Started

入门指南

📄 Read: references/getting-started.md
  • Install NuGet package (Syncfusion.Editors.WinUI)
  • Install NuGet package (Syncfusion.Editors.WinUI)
  • Note: ensure the NuGet package is updated to the latest 
    Syncfusion.Editors.WinUI
    version via the NuGet package manager.
  • Add control in XAML and C#
  • Set selected color programmatically (SelectedBrush)
  • Handle SelectedBrushChanged event
  • Access color value in code
📄 阅读： references/getting-started.md
  • 安装NuGet包（Syncfusion.Editors.WinUI）
  • 安装NuGet包（Syncfusion.Editors.WinUI）
  • 注意：请通过NuGet包管理器确保NuGet包已更新至最新版
    Syncfusion.Editors.WinUI
    。
  • 在XAML和C#中添加控件
  • 以编程方式设置选中颜色（SelectedBrush）
  • 处理SelectedBrushChanged事件
  • 在代码中访问颜色值

Control Structure

控件结构

📄 Read: references/palette-structure.md
  • Understand each color section (selected, automatic, theme, standard, recent)
  • Learn about color tooltips
  • Discover More Colors option
  • Understand theme variant behavior
📄 阅读： references/palette-structure.md
  • 了解每个颜色区域（已选、自动、主题、标准、最近）
  • 了解颜色提示功能
  • 探索「更多颜色」选项
  • 理解主题变体行为

Dropdown Customization

下拉菜单自定义

📄 Read: references/dropdown-customization.md
  • Change dropdown alignment (DropDownPlacement)
  • Convert to split-mode button (DropDownMode = Split)
  • Bind commands for button click action
  • Customize header UI with templates
  • Handle dropdown open/close events
📄 阅读： references/dropdown-customization.md
  • 更改下拉菜单对齐方式（DropDownPlacement）
  • 转换为拆分模式按钮（DropDownMode = Split）
  • 绑定按钮点击动作的命令
  • 使用模板自定义头部UI
  • 处理下拉菜单的打开/关闭事件

Palette Customization

调色板自定义

📄 Read: references/color-palette-customization.md
  • Add custom colors to palette
  • Define custom theme color groups
  • Add custom standard colors
  • Remove unwanted color sections
  • Integrate SfColorPalette for advanced customization
📄 阅读： references/color-palette-customization.md
  • 向调色板添加自定义颜色
  • 定义自定义主题颜色组
  • 添加自定义标准颜色
  • 移除不需要的颜色区域
  • 集成SfColorPalette进行高级自定义

More Colors Dialog

更多颜色对话框

📄 Read: references/more-colors-dialog.md
  • Let users pick any color from spectrum
  • Track recently used colors
  • Differentiate recent colors from palette colors
  • Customize color spectrum behavior
📄 阅读： references/more-colors-dialog.md
  • 允许用户从色谱中选择任意颜色
  • 追踪最近使用的颜色
  • 区分最近使用颜色与调色板颜色
  • 自定义色谱行为

Quick Start

快速开始

Basic Implementation (XAML)

基础实现（XAML）

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

Basic Implementation (C#)

基础实现（C#）

csharp
using Syncfusion.UI.Xaml.Editors;

public sealed partial class MainPage : Page
{
    public MainPage()
    {
        this.InitializeComponent();
        var colorPalette = new SfDropDownColorPalette();
        grid.Children.Add(colorPalette);
    }
}
csharp
using Syncfusion.UI.Xaml.Editors;

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

Common Patterns

常见模式

Pattern 1: Set and Get Selected Color

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

xaml
<editors:SfDropDownColorPalette SelectedBrush="Yellow" x:Name="palette" />
csharp
// 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);
xaml
<editors:SfDropDownColorPalette SelectedBrush="Yellow" x:Name="palette" />
csharp
// 获取选中颜色
var selectedBrush = palette.SelectedBrush as SolidColorBrush;
if (selectedBrush != null)
{
    Color selectedColor = selectedBrush.Color;
}

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

Pattern 2: Respond to Color Selection Changes

模式2：响应颜色选择变化

xaml
<editors:SfDropDownColorPalette 
    SelectedBrushChanged="Palette_SelectedBrushChanged"
    x:Name="palette" />
csharp
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;
}
xaml
<editors:SfDropDownColorPalette 
    SelectedBrushChanged="Palette_SelectedBrushChanged"
    x:Name="palette" />
csharp
private void Palette_SelectedBrushChanged(object sender, SelectedBrushChangedEventArgs e)
{
    var oldBrush = e.OldBrush as SolidColorBrush;
    var newBrush = e.NewBrush as SolidColorBrush;
    
    // 在某处应用颜色
    textBlock.Foreground = newBrush;
}

Pattern 3: Split Mode with Command

模式3：带命令的拆分模式

xaml
<editors:SfDropDownColorPalette 
    DropDownMode="Split"
    Command="{x:Bind ApplyColorCommand}"
    x:Name="palette" />
csharp
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;
}
xaml
<editors:SfDropDownColorPalette 
    DropDownMode="Split"
    Command="{x:Bind ApplyColorCommand}"
    x:Name="palette" />
csharp
private ICommand applyColorCommand;
public ICommand ApplyColorCommand => applyColorCommand;

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

Pattern 4: Dropdown Alignment

模式4：下拉菜单对齐

xaml
<editors:SfDropDownColorPalette 
    DropDownPlacement="BottomEdgeAlignedRight"
    x:Name="palette" />
Common Placement Options:
  • Auto
    - Best available position (default)
  • BottomEdgeAlignedLeft
    - Below, left-aligned
  • BottomEdgeAlignedRight
    - Below, right-aligned
  • TopEdgeAlignedLeft
    - Above, left-aligned
  • TopEdgeAlignedRight
    - Above, right-aligned
xaml
<editors:SfDropDownColorPalette 
    DropDownPlacement="BottomEdgeAlignedRight"
    x:Name="palette" />
常见对齐选项：
  • Auto
    - 最佳可用位置（默认）
  • BottomEdgeAlignedLeft
    - 下方左对齐
  • BottomEdgeAlignedRight
    - 下方右对齐
  • TopEdgeAlignedLeft
    - 上方左对齐
  • TopEdgeAlignedRight
    - 上方右对齐

Pattern 5: Detect Palette Open/Close

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

xaml
<editors:SfDropDownColorPalette 
    DropDownOpened="Palette_DropDownOpened"
    DropDownClosed="Palette_DropDownClosed"
    x:Name="palette" />
csharp
private void Palette_DropDownOpened(object sender, EventArgs e)
{
    // Palette opened
}

private void Palette_DropDownClosed(object sender, EventArgs e)
{
    // Palette closed
}
xaml
<editors:SfDropDownColorPalette 
    DropDownOpened="Palette_DropDownOpened"
    DropDownClosed="Palette_DropDownClosed"
    x:Name="palette" />
csharp
private void Palette_DropDownOpened(object sender, EventArgs e)
{
    // 调色板已打开
}

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

Key Properties

关键属性

PropertyTypePurpose
SelectedBrush
Brush
Gets/sets the currently selected color (default: Black)
DropDownPlacement
FlyoutPlacementMode
Position of dropdown relative to button (default: Auto)
DropDownMode
DropDownMode
Dropdown or Split mode (default: Dropdown)
Command
ICommand
Command executed when button clicked (Split mode)
ContentTemplate
DataTemplate
Customize selected color button appearance
DropDownButtonTemplate
DataTemplate
Customize dropdown arrow button (Split mode)
属性类型用途
SelectedBrush
Brush
获取/设置当前选中的颜色（默认：黑色）
DropDownPlacement
FlyoutPlacementMode
下拉菜单相对于按钮的位置（默认：Auto）
DropDownMode
DropDownMode
下拉模式或拆分模式（默认：Dropdown）
Command
ICommand
按钮点击时执行的命令（拆分模式）
ContentTemplate
DataTemplate
自定义选中颜色按钮的外观
DropDownButtonTemplate
DataTemplate
自定义下拉箭头按钮（拆分模式）

Reference Files

参考文件

All detailed documentation is organized by feature:
  • getting-started.md - Setup and basic implementation
  • palette-structure.md - Understanding color sections
  • dropdown-customization.md - Button and dropdown customization
  • color-palette-customization.md - Custom color definitions
  • more-colors-dialog.md - Spectrum picker and recent colors
Ready to implement? Choose a specific task from the Navigation Guide above and read the corresponding reference file.
所有详细文档按功能分类整理：
  • getting-started.md - 安装与基础实现
  • palette-structure.md - 理解颜色区域
  • dropdown-customization.md - 按钮与下拉菜单自定义
  • color-palette-customization.md - 自定义颜色定义
  • more-colors-dialog.md - 色谱选择器与最近颜色
准备好开始实现了吗？ 从上面的导航指南中选择一个具体任务，然后阅读对应的参考文件。