Implementing ColorPickerButton

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

Component Overview

• 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

Documentation and Navigation Guide

Getting Started

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

Color Selection & Groups

• 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

Customization Settings

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

UI Appearance Properties

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

Quick Start Example

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

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

Pattern 2: Display Selected Color as Text

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

Pattern 3: Set Color Group and Color

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

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

Key Props

SelectedColor

SelectedColorGroup

SelectedAsBackcolor

SelectedAsText

ColorUISize

Text

Common Use Cases

Use Case 1: Theme Color Selector

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

Use Case 2: Color Code Input

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

Use Case 3: Compact Color Picker

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