syncfusion-winui-dropdown-color-picker

Syncfusion WinUI ドロップダウンカラーピッカーの実装

WinUI ドロップダウンカラーピッカー（SfDropDownColorPicker）は、色の選択と編集に対応した多用途なコントロールです。複数のカラーチャネルモード、透明度の調整、豊富なカスタマイズオプションを備え、色スペクトルをドロップダウンボタンとして表示します。

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

• ユーザーのニーズ：ドロップダウン動作に対応したインタラクティブな色選択 UI
• ユーザーのニーズ：複数の色形式（RGB、HSV、HSL、CMYK、16 進数）への対応
• ユーザーのニーズ：カスタマイズ可能なドロップダウンの配置と分割ボタンモード
• ユーザーのニーズ：ドロップダウン内に埋め込んだカラーピッカーのカスタマイズ
• ユーザーのニーズ：色変更イベントの処理と色のバインド
• ユーザーのニーズ：カスタムヘッダー UI またはドロップダウンボタンのスタイル設定

コンポーネントの概要

主な機能

• 色の編集：ドラッグして色を選択するか、RGB、HSV、HSL、CMYK、16 進数形式で値を手動入力
• 色相スペクトルスライダー：色相の値をすばやく選択
• カラーチャネルモード：RGB、HSV、HSL、CMYK のカラースペースを切り替え
• 分割モード：ボタンとドロップダウン矢印を分離するオプション
• ドロップダウンのカスタマイズ：配置を制御（全体、中央、左、右、上、下）
• 透明度の制御：アルファ値／透明度を調整
• イベント処理：SelectedBrushChanged、DropDownOpened、DropDownClosed イベント
• カスタムテンプレート：ヘッダーとドロップダウンボタンの UI をカスタマイズ

必須の NuGet パッケージ

• Syncfusion.Editors.WinUI

**注：**アプリケーションをビルドまたはリリースする前に、NuGet パッケージマネージャーを使用して Syncfusion.Editors.WinUI NuGet パッケージを最新の利用可能なバージョンに更新してください。

名前空間

• Syncfusion.UI.Xaml.Editors

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

タスクに応じてリファレンスガイドを選択してください。

はじめに

📄 参照先： references/getting-started.md

• インストールと NuGet のセットアップ
• ドロップダウンカラーピッカーを使ったプロジェクトの作成
• 基本的な XAML と C# の実装
• プログラムによる色の選択
• インタラクティブな色選択
• カラーチャネルの切り替え（RGB、HSV、HSL、CMYK）
• 透明度とアルファ値の調整
• 16 進数カラーエディターの使用方法

カラーピッカーのカスタマイズ

📄 参照先： references/color-picker-customization.md

• 埋め込みカラーピッカーのカスタマイズ
• AttachedFlyout と DropDownFlyout の使用
• ブラシの種類のオプション（SolidColorBrush、LinearGradientBrush など）
• サイズと外観のカスタマイズ
• 埋め込みカラーピッカーの例

ドロップダウンのモードと配置

📄 参照先： references/dropdown-modes-and-placement.md

• ドロップダウンの配置モード
• DropDownPlacement プロパティの使用方法
• 分割モード（ボタンとドロップダウン矢印）
• 分割モードでのコマンドのバインド
• ドロップダウンとフルドロップダウンの動作の違い
• カスタムヘッダー UI のスタイル設定

イベントとコマンド

📄 参照先： references/events-and-commands.md

• SelectedBrushChanged イベント
• OldBrush プロパティと NewBrush プロパティ
• DropDownOpened イベントと DropDownClosed イベント
• コマンドのバインドパターン
• イベント処理のコード例

ヘッダーと UI のカスタマイズ

📄 参照先： references/header-and-ui-customization.md

• 選択した色のボタン用 ContentTemplate
• ドロップダウンボタン用 DropDownButtonTemplate
• XAML でのカスタム UI のスタイル設定
• 分割モードのカスタムヘッダー
• DataContext のバインドパターン
• テンプレートの完全な例

クイックスタートの例

基本的な実装（XAML）

<Page xmlns:editors="using:Syncfusion.UI.Xaml.Editors">
    <Grid>
        <editors:SfDropDownColorPicker x:Name="colorPicker" 
                                       SelectedBrush="Blue" />
    </Grid>
</Page>

基本的な実装（C#）

using Syncfusion.UI.Xaml.Editors;

public sealed partial class MainPage : Page
{
    public MainPage()
    {
        this.InitializeComponent();
        
        SfDropDownColorPicker colorPicker = new SfDropDownColorPicker();
        colorPicker.SelectedBrush = new SolidColorBrush(Colors.Blue);
        
        grid.Children.Add(colorPicker);
    }
}

色変更の監視

// Subscribe to color change event
colorPicker.SelectedBrushChanged += ColorPicker_SelectedBrushChanged;

private void ColorPicker_SelectedBrushChanged(object sender, SelectedBrushChangedEventArgs e)
{
    var oldColor = e.OldBrush;
    var newColor = e.NewBrush;
    
    // Apply the selected color
    myElement.Background = newColor;
}

よくある使用例

1. テーマカラーセレクター

ユーザーがアプリケーションのテーマカラーを選択できるようにします。

// User selects a color → apply to app background
SfDropDownColorPicker themeColorPicker = new SfDropDownColorPicker();
themeColorPicker.SelectedBrushChanged += (s, e) => 
{
    Window.Current.Content.Background = e.NewBrush;
};

2. 直接適用するための分割ボタンモード

ボタンのクリックで最後に選択した色を適用し、ドロップダウンを開いて色を変更します。

<editors:SfDropDownColorPicker DropDownMode="Split"
                               Command="{x:Bind ApplyColorCommand}" />

3. カスタムカラーエディターのインターフェイス

特定のカラーピッカー設定を埋め込みます。

<editors:SfDropDownColorPicker>
    <FlyoutBase.AttachedFlyout>
        <editors:DropDownFlyout>
            <editors:SfColorPicker BrushTypeOptions="LinearGradientBrush" 
                                   Width="250" />
        </editors:DropDownFlyout>
    </FlyoutBase.AttachedFlyout>
</editors:SfDropDownColorPicker>

4. 配置済みのドロップダウン（右上）

カラーピッカーを開く位置を制御します：

<editors:SfDropDownColorPicker DropDownPlacement="TopEdgeAlignedRight" />

主なプロパティ

プロパティ	型	用途	一般的な値
SelectedBrush	Brush	現在選択されている色	Colors.Blue、new SolidColorBrush()
DropDownMode	enum	ドロップダウンの動作	Dropdown、Split
DropDownPlacement	FlyoutPlacementMode	ドロップダウンの位置	Full、Top、Bottom、Left、Right
Command	ICommand	ボタンのクリック時に実行されるコマンド	カスタムの ICommand 実装

一般的なパターン

パターン 1：色を UI 要素にバインドする

// When color is selected, immediately apply to target element
void ColorPicker_SelectedBrushChanged(object sender, SelectedBrushChangedEventArgs e)
{
    targetRectangle.Fill = e.NewBrush;
}

パターン 2：色の選択を検証する

void ColorPicker_SelectedBrushChanged(object sender, SelectedBrushChangedEventArgs e)
{
    // Validate color meets requirements
    if (IsValidColor(e.NewBrush))
    {
        ApplyColor(e.NewBrush);
    }
    else
    {
        colorPicker.SelectedBrush = e.OldBrush; // Revert
    }
}

パターン 3：カスタムコマンドを使った Split モード

public ICommand QuickApplyCommand => new RelayCommand(() =>
{
    // Apply current selected color without opening dropdown
    ApplySelectedColorToTextSelection();
});

次のステップ

• まずは：getting-started.md を参照して、基本的なドロップダウンカラーピッカーをセットアップします
• 次に：具体的なニーズに応じて、その他のリファレンスガイドを確認します
• 本番環境向けに：完全なカスタマイズ機能を利用するため、すべてのガイドを確認します