syncfusion-winforms-color-picker-dropdown

ColorPickerButton の実装

ColorPickerButton は、ColorUIControl を含むドロップダウンを表示する Windows Forms コントロールです。あらかじめ定義されたグループ（標準、システム、カスタム、ユーザーの色）から色を選択できます。ボタンと、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 を参照してください