syncfusion-wpf-color-picker-palette

WPF ColorPickerPalette の実装

ColorPickerPalette は、テーマカラー、標準カラー、カスタムカラー、拡張カラーオプションを備えた、視覚的なパレット形式の豊富なカラー選択コントロールです。柔軟なカスタマイズオプションを使ってカラー選択機能を実装する場合に、このスキルを使用してください。

このスキルを使用する場面

次のような場合に ColorPickerPalette を使用します。

• 定義済みのパレット（テーマ、標準、カスタム）からユーザーが色を選択できるようにする
• 最近使用した色を表示する
• 選択肢を拡張する「その他の色」オプションを提供する
• カラーパネルとその表示状態をカスタマイズする
• 色の選択イベントを処理する
• RTL のフロー方向に対応する
• 透明色または「色なし」オプションを有効にする

コンポーネントの概要

ColorPickerPalette が提供する機能：

• 複数のカラーソース： テーマカラー、標準カラー、カスタムカラー、最近使用した色
• 柔軟なモード： ドロップダウン（既定）、パレット（展開）、分割（ボタン＋ドロップダウン）
• 豊富なカスタマイズ： パネルの表示状態、サイズ、アイコン、ヘッダー、テーマ
• イベントのサポート： SelectedBrushChanged イベントと SelectedCommand バインディング
• アクセシビリティ： ツールチップのサポート、キーボードナビゲーション、RTL のサポート

---

ドキュメントのナビゲーションガイド

はじめに

📄 参照： references/getting-started.md

• インストールとアセンブリ参照
• デザイナー、XAML、C# による ColorPickerPalette の追加
• コントロールの構造と主要なプロパティ
• プログラムによる初期色の設定
• テーマとローカライズのサポート

色の管理

📄 参照： references/color-management.md

• プログラムによる色へのアクセスと変更
• カラーブラシの操作
• 色の自動設定
• 透明色の選択
• テーマカラーのバリエーションと標準カラー
• カスタムカラーコレクション
• 最近使用した色のパネル

外観とカスタマイズ

📄 参照： references/appearance-customization.md

• フロー方向（RTL）のサポート
• パネルの表示オプション（テーマ、標準、カスタム、最近使用した色）
• 表示モード（ドロップダウン、パレット、分割）
• 色アイテムとパレットのサイズ変更
• アイコンのカスタマイズとサイズ設定
• ヘッダーテンプレートのカスタマイズ

イベントと操作

📄 参照： references/events-interactions.md

• SelectedBrushChanged イベントの処理
• SelectedCommand のバインディングパターン
• 「色なし」ボタンの機能
• 色名のツールチップのサポート
• その他の色ウィンドウとの操作
• ヘッダーテンプレートのカスタマイズ

---

クイックスタートの例

<Window xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
        xmlns:syncfusion="http://schemas.syncfusion.com/wpf" 
        Title="ColorPickerPalette Sample">
    <Grid>
        
        <syncfusion:ColorPickerPalette x:Name="colorPickerPalette" 
                                       Color="Red"
                                       GenerateThemeVariants="True"
                                       GenerateStandardVariants="True"
                                       RecentlyUsedPanelVisibility="Visible"
                                       Width="60" 
                                       Height="40" />
    </Grid>
</Window>

C# コードビハインド：

using Syncfusion.Windows.Tools.Controls;

public partial class MainWindow : Window {
    public MainWindow() {
        InitializeComponent();

        // Handle color selection
        colorPickerPalette.SelectedBrushChanged += ColorPickerPalette_SelectedBrushChanged;
    }

    private void ColorPickerPalette_SelectedBrushChanged(object sender, SelectedBrushChangedEventArgs e) {
        var newColor = e.NewColor;
        var newBrush = e.NewBrush;
        // Apply color to UI elements
    }
}

---

よく使用されるパターン

• カラーパネルのカスタマイズ： ThemePanelVisibility、StandardPanelVisibility、RecentlyUsedPanelVisibility、MoreColorOptionVisibility を設定して、表示するパネルを制御します
• カスタムカラーコレクション： CustomColorsCollection プロパティを ObservableCollection<CustomColor> にバインドし、SetCustomColors="True" を設定します
• コマンドを使用した分割モード： Mode="Split" を設定し、SelectedCommand をバインドすると、ドロップダウンにアクセスできるボタンの動作を設定できます
• 展開パレットモード： Mode="Palette" を設定すると、パレットが常に表示されます。色アイテムのサイズは BorderWidth／BorderHeight を調整して変更できます

詳しい例は、appearance-customization.md と events-interactions.md を参照してください。

---

主なプロパティ

プロパティ	型	用途
Color	Color	選択した色を取得／設定します（デフォルト：Black）
SelectedBrush	Brush	選択したブラシを取得／設定します
Mode	PickerMode	ドロップダウン、パレット、または分割モードです
Themes	PaletteTheme	Office、Apex、Metro などです
GenerateThemeVariants	bool	テーマカラーのバリエーションの表示／非表示を切り替えます
GenerateStandardVariants	bool	標準カラーのバリエーションの表示／非表示を切り替えます
CustomColorsCollection	ObservableCollection<CustomColor>	カスタムカラー項目です
SetCustomColors	bool	カスタムカラーの表示を有効にします
BorderWidth / BorderHeight	double	カラー項目の寸法です
PopupWidth / PopupHeight	double	パレットポップアップのサイズです
RecentlyUsedPanelVisibility	Visibility	最近選択した色を表示します
ThemePanelVisibility	Visibility	テーマカラーを表示します
StandardPanelVisibility	Visibility	標準カラーを表示します
MoreColorOptionVisibility	Visibility	「その他の色」ボタンを表示します
NoColorVisibility	Visibility	透明／色なしボタンを表示します
AutomaticColor	Color	リセット時のデフォルト色です

---

よくあるユースケース

• テキストカラーの選択： 標準色／テーマカラーを表示するドロップダウンモードを使用し、SelectedBrushChanged で書式を適用します
• 図形の塗りつぶし色の選択： カスタムのブランドカラーを使用する分割モードで、SelectedCommand をバインドします
• テーマカラーの選択： GenerateThemeVariants="True" を指定するパレットモードで、カラーのバリエーションを表示します
• カラー履歴パネル： RecentlyUsedPanelVisibility="Visible" を有効にして、最近使用した色にすばやくアクセスできるようにします

---

次のステップ

1. 基本から始める： getting-started.md を読んで、ColorPickerPalette をセットアップします
2. 色をカスタマイズする： color-management.md を使って、色のソースを管理します
3. コントロールをスタイル設定する： appearance-customization.md のカスタマイズを適用します
4. インタラクションを処理する： events-interactions.md のイベント処理を実装します