syncfusion-winforms-color-picker-dropdown

Compare original and translation side by side

🇺🇸

Original

English

🇨🇳

Translation

Chinese

Implementing ColorPickerButton

实现ColorPickerButton

The ColorPickerButton is a Windows Forms control that displays a dropdown with the ColorUIControl, allowing users to select colors from predefined groups (Standard, System, Custom, and User colors). It combines a button with a professional color picker interface similar to Visual Studio's color picker.

ColorPickerButton 是一款Windows Forms控件，它会展示带有ColorUIControl的下拉面板，允许用户从预定义颜色组（标准、系统、自定义和用户颜色）中选择颜色。它将按钮与类似Visual Studio颜色选择器的专业颜色选择界面相结合。

When to Use This Skill

何时使用本技能

User needs a color picker dropdown control in a Windows Forms application
Implementing color selection UI with multiple color groups
Customizing button appearance to reflect selected colors
Integrating color input into forms without a full dialog
Displaying colors inline within application layouts

用户需要在Windows Forms应用中使用颜色选择下拉控件
实现支持多颜色组的颜色选择UI
自定义按钮外观以反映选中的颜色
无需完整弹窗即可在表单中集成颜色输入功能
在应用布局中内嵌展示颜色选项

Component Overview

组件概览

The ColorPickerButton provides:

Multiple Color Groups: Standard, System, Custom, and User color options
Color Selection: Interactive color picking with programmatic access
Button Integration: Displays colors on the button face or as text
Dropdown Customization: Adjustable ColorUIControl size and appearance
Easy Integration: Works in designer and programmatic code

ColorPickerButton提供以下能力：

多颜色组支持： 标准、系统、自定义和用户颜色选项
颜色选择功能： 交互式选色，同时支持编程方式访问
按钮集成： 可在按钮表面展示颜色或以文本形式展示
下拉面板自定义： 可调整ColorUIControl的尺寸和外观
易集成： 支持设计器和编码两种集成方式

Documentation and Navigation Guide

文档与导航指南

Getting Started

入门指引

📄 Read: references/getting-started.md

Assembly deployment and NuGet setup
Adding via Visual Studio designer
Adding via code programmatically
Creating and initializing instances
Testing the component

📄 阅读： references/getting-started.md

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

Color Selection & Groups

颜色选择与颜色组

📄 Read: references/color-selection.md

Selecting colors programmatically and interactively
Working with color groups (SystemColors, StandardColors, CustomColors, UserColors)
Setting initial selected color and group
Color change events and handling
Getting selected color at runtime

📄 阅读： references/color-selection.md

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

Customization Settings

自定义配置

📄 Read: references/customization.md

Sizing the dropdown ColorUIControl
Button appearance properties
Display selected color as button background
Display selected color as button text
Advanced customization and styling

📄 阅读： references/customization.md

调整下拉ColorUIControl的尺寸
按钮外观属性配置
将选中颜色展示为按钮背景
将选中颜色展示为按钮文本
高级自定义和样式设置

UI Appearance Properties

UI外观属性

📄 Read: references/ui-properties.md

Button text, size, and positioning
Color display modes and appearance
Component properties and events
Border and styling
Layout and docking

📄 阅读： references/ui-properties.md

按钮文本、尺寸和位置
颜色展示模式和外观
组件属性和事件
边框和样式
布局和停靠

Quick Start Example

快速入门示例

csharp

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);
    }
}

csharp

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);
    }
}

Common Patterns

常见用法示例

Pattern 1: Display Selected Color as Button Background

示例1：将选中颜色展示为按钮背景

csharp

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

csharp

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

Pattern 2: Display Selected Color as Text

示例2：将选中颜色展示为文本

csharp

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

csharp

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

Pattern 3: Set Color Group and Color

示例3：设置颜色组和颜色

csharp

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

csharp

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

Pattern 4: Customize Dropdown Size

示例4：自定义下拉面板尺寸

csharp

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

csharp

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

Key Props

核心属性

Property	Type	Purpose
`SelectedColor`	System.Drawing.Color	Gets/sets the currently selected color
`SelectedColorGroup`	ColorUISelectedGroup	Sets which color group tab is focused (StandardColors, SystemColors, CustomColors, UserColors, None)
`SelectedAsBackcolor`	bool	When true, button background displays the selected color
`SelectedAsText`	bool	When true, button text displays the selected color value
`ColorUISize`	System.Drawing.Size	Gets/sets the size of the dropdown ColorUIControl
`Text`	string	Gets/sets the button text

属性	类型	用途
`SelectedColor`	System.Drawing.Color	获取/设置当前选中的颜色
`SelectedColorGroup`	ColorUISelectedGroup	设置默认选中的颜色组标签页（StandardColors、SystemColors、CustomColors、UserColors、None）
`SelectedAsBackcolor`	bool	设为true时，按钮背景会展示选中的颜色
`SelectedAsText`	bool	设为true时，按钮文本会展示选中的颜色值
`ColorUISize`	System.Drawing.Size	获取/设置下拉ColorUIControl的尺寸
`Text`	string	获取/设置按钮文本

Common Use Cases

常见使用场景

Use Case 1: Theme Color Selector

场景1：主题颜色选择器

csharp

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

csharp

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

Use Case 2: Color Code Input

场景2：颜色代码输入

csharp

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

csharp

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

Use Case 3: Compact Color Picker

场景3：紧凑型颜色选择器

csharp

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

csharp

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

Next Steps

后续步骤

Read references/getting-started.md to set up the component
Check references/color-selection.md for color handling
Review references/customization.md for styling options
See references/ui-properties.md for appearance control

阅读 references/getting-started.md 完成组件设置
查看 references/color-selection.md 了解颜色处理相关内容
查阅 references/customization.md 了解样式配置选项
参考 references/ui-properties.md 实现外观控制