syncfusion-winforms-color-picker-dropdown

实现 ColorPickerButton

ColorPickerButton 是一个 Windows Forms 控件，可显示一个包含 ColorUIControl 的下拉菜单，让用户从预定义的分组（标准、系统、自定义和用户颜色）中选择颜色。它将按钮与专业的颜色选择界面相结合，外观类似 Visual Studio 的颜色选择器。

何时使用此技能

• 用户需要在 Windows Forms 应用程序中使用颜色选择下拉控件
• 实现包含多个颜色分组的颜色选择 UI
• 自定义按钮外观以反映所选颜色
• 无需完整对话框即可将颜色输入集成到窗体中
• 在应用程序布局中内嵌显示颜色

组件概览

ColorPickerButton 提供以下功能：

• 多个颜色分组： 标准、系统、自定义和用户颜色选项
• 颜色选择： 支持交互式选色和编程访问
• 按钮集成： 在按钮表面或文本中显示颜色
• 下拉菜单自定义： 可调整 ColorUIControl 的大小和外观
• 轻松集成： 支持在设计器中使用，也支持通过代码配置

文档和导航指南

入门

📄 阅读： references/getting-started.md

• 程序集部署和 NuGet 设置
• 通过 Visual Studio 设计器添加
• 通过代码以编程方式添加
• 创建和初始化实例
• 测试组件

颜色选择与分组

📄 阅读： references/color-selection.md

• 通过编程和交互方式选择颜色
• 使用颜色分组（SystemColors、StandardColors、CustomColors、UserColors）
• 设置初始选中颜色和分组
• 颜色更改事件及其处理
• 在运行时获取选中颜色

自定义设置

📄 阅读： references/customization.md

• 设置下拉 ColorUIControl 的大小
• 按钮外观属性
• 将选中颜色显示为按钮背景色
• 将选中颜色显示为按钮文本
• 高级自定义和样式设置

UI 外观属性

📄 阅读： references/ui-properties.md

• 按钮文本、大小和位置
• 颜色显示模式和外观
• 组件属性和事件
• 边框和样式
• 布局和停靠

快速入门示例

using Syncfusion.Windows.Forms;

public class ColorPickerForm : Form
{
    public ColorPickerForm()
    {
        // Create ColorPickerButton instance
        var colorPicker = new ColorPickerButton();
        colorPicker.Text = "Select a Color";
        colorPicker.Location = new System.Drawing.Point(10, 10);
        colorPicker.Size = new System.Drawing.Size(150, 30);
        
        // Set initial selected color and group
        colorPicker.SelectedColor = System.Drawing.Color.Red;
        colorPicker.SelectedColorGroup = Syncfusion.Windows.Forms.ColorUISelectedGroup.StandardColors;
        
        // Add to form
        this.Controls.Add(colorPicker);
        
        // Set initial form properties
        this.Text = "ColorPickerButton Demo";
        this.Size = new System.Drawing.Size(400, 300);
    }
}

常见模式

模式 1：将选中颜色显示为按钮背景色

colorPickerButton1.SelectedAsBackcolor = true;
colorPickerButton1.SelectedColor = System.Drawing.Color.OrangeRed;
// Button background now shows the selected color

模式 2：将选中颜色显示为文本

colorPickerButton1.SelectedAsText = true;
colorPickerButton1.SelectedColor = System.Drawing.Color.Blue;
// Button text displays the selected color name/value

模式 3：设置颜色分组和颜色

colorPickerButton1.SelectedColorGroup = Syncfusion.Windows.Forms.ColorUISelectedGroup.StandardColors;
colorPickerButton1.SelectedColor = System.Drawing.Color.Green;
// Focus the Standard Colors group when dropdown opens

模式 4：自定义下拉菜单大小

colorPickerButton1.ColorUISize = new System.Drawing.Size(250, 280);
// Adjust dropdown dimensions for your layout

关键属性

属性	类型	用途
SelectedColor	System.Drawing.Color	获取/设置当前选中的颜色
SelectedColorGroup	ColorUISelectedGroup	设置当前聚焦的颜色分组选项卡（StandardColors、SystemColors、CustomColors、UserColors、None）
SelectedAsBackcolor	bool	为 true 时，按钮背景显示选中的颜色
SelectedAsText	bool	为 true 时，按钮文本显示选中的颜色值
ColorUISize	System.Drawing.Size	获取/设置下拉 ColorUIControl 的大小
Text	string	获取/设置按钮文本

常见用例

用例 1：主题颜色选择器

// Let users pick a theme color that shows on the button
colorPickerButton.SelectedAsBackcolor = true;
colorPickerButton.SelectedColorGroup = ColorUISelectedGroup.StandardColors;

用例 2：颜色代码输入

// Show selected color value and group
colorPickerButton.SelectedAsText = true;
colorPickerButton.SelectedColorGroup = ColorUISelectedGroup.CustomColors;

用例 3：紧凑型颜色选择器

// Minimize space with compact size
colorPickerButton.ColorUISize = new System.Drawing.Size(200, 200);
colorPickerButton.Size = new System.Drawing.Size(80, 25);

后续步骤

• 阅读 references/getting-started.md 以设置组件
• 查看 references/color-selection.md 了解颜色处理
• 阅读 references/customization.md 了解样式选项
• 查看 references/ui-properties.md 了解外观控制