syncfusion-winui-dropdown-color-palette

Syncfusion WinUI ドロップダウンカラーパレットの実装

SfDropDownColorPalette コントロールは、色を選択するための豊富な視覚的インターフェイスを提供します。選択した色を上部に強調表示するドロップダウンを表示し、標準色やバリエーション付きのテーマ色を提供します。また、カスタムカラーパレットや、その他の色を選択するための「その他の色」ダイアログにも対応しています。

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

次のような場合にこのスキルを使用します。

• WinUI アプリケーションに色選択機能を追加する
• テーマや標準のカラーパレットからユーザーが選べるようにする
• ブランドに合わせて使用可能な色をカスタマイズする
• 色選択機能付きの分割モードボタンを実装する
• 最近選択した色を追跡する
• ホバー時に色のツールチップを表示する
• 色相スペクトルから任意の色を選択できるようにする

コントロールの概要

ドロップダウンカラーパレットは、複数の色選択領域を組み合わせています。

セクション	目的
選択色ボタン	現在選択されている色を表示します。クリックするとパレットが開きます
自動色	既定色（通常は黒）にすばやくアクセスできます
テーマ色	色合いのバリエーションを備えた、あらかじめ定義されたテーマ色です
標準色	10 色の標準色（赤、緑、青、黄など）です
最近使用した色	「その他の色」ダイアログで選択した色です
その他の色...	任意の色を選択できる色相スペクトルダイアログを開きます

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

はじめに

📄 参照: references/getting-started.md

• NuGet パッケージ（Syncfusion.Editors.WinUI）をインストールする
• NuGet パッケージ（Syncfusion.Editors.WinUI）をインストールする
• 注：NuGet パッケージマネージャーを使用して、NuGet パッケージを最新の Syncfusion.Editors.WinUI バージョンに更新してください。
• XAML と C# にコントロールを追加する
• 選択色をプログラムで設定する（SelectedBrush）
• SelectedBrushChanged イベントを処理する
• コードから色の値にアクセスする

コントロールの構造

📄 参照: references/palette-structure.md

• 各色セクション（選択色、自動色、テーマ色、標準色、最近使用した色）について理解する
• 色のツールチップについて学ぶ
• 「その他の色」オプションについて確認する
• テーマのバリエーションの動作を理解する

ドロップダウンのカスタマイズ

📄 参照: references/dropdown-customization.md

• ドロップダウンの配置を変更する（DropDownPlacement）
• 分割モードボタンに切り替える（DropDownMode = Split）
• ボタンのクリック操作にコマンドをバインドする
• テンプレートを使ってヘッダー UI をカスタマイズする
• ドロップダウンの開閉イベントを処理する

パレットのカスタマイズ

📄 参照: references/color-palette-customization.md

• パレットにカスタム色を追加する
• カスタムテーマ色グループを定義する
• カスタム標準色を追加する
• 不要な色セクションを削除する
• 高度なカスタマイズのために SfColorPalette を統合する

「その他の色」ダイアログ

📄 参照: references/more-colors-dialog.md

• 色相スペクトルから任意の色を選択できるようにする
• 最近使用した色を追跡する
• 最近使用した色とパレットの色を区別する
• 色相スペクトルの動作をカスタマイズする

クイックスタート

基本的な実装（XAML）

<Page
    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
    xmlns:editors="using:Syncfusion.UI.Xaml.Editors">
    <Grid>
        <editors:SfDropDownColorPalette x:Name="colorPalette" />
    </Grid>
</Page>

基本的な実装（C#）

using Syncfusion.UI.Xaml.Editors;

public sealed partial class MainPage : Page
{
    public MainPage()
    {
        this.InitializeComponent();
        var colorPalette = new SfDropDownColorPalette();
        grid.Children.Add(colorPalette);
    }
}

よくあるパターン

パターン 1：選択色を設定して取得する

<editors:SfDropDownColorPalette SelectedBrush="Yellow" x:Name="palette" />

// Get the selected color
var selectedBrush = palette.SelectedBrush as SolidColorBrush;
if (selectedBrush != null)
{
    Color selectedColor = selectedBrush.Color;
}

// Set a new color
palette.SelectedBrush = new SolidColorBrush(Colors.Red);

パターン 2：色の選択変更に対応する

<editors:SfDropDownColorPalette 
    SelectedBrushChanged="Palette_SelectedBrushChanged"
    x:Name="palette" />

private void Palette_SelectedBrushChanged(object sender, SelectedBrushChangedEventArgs e)
{
    var oldBrush = e.OldBrush as SolidColorBrush;
    var newBrush = e.NewBrush as SolidColorBrush;
    
    // Apply color somewhere
    textBlock.Foreground = newBrush;
}

パターン 3：コマンドを使った分割モード

<editors:SfDropDownColorPalette 
    DropDownMode="Split"
    Command="{x:Bind ApplyColorCommand}"
    x:Name="palette" />

private ICommand applyColorCommand;
public ICommand ApplyColorCommand => applyColorCommand;

public void ApplyColorToSelectedText(object param)
{
    // Apply the currently selected color
    richTextBox.Document.Selection.CharacterFormat.BackgroundColor = 
        (palette.SelectedBrush as SolidColorBrush).Color;
}

パターン 4：ドロップダウンの配置

<editors:SfDropDownColorPalette 
    DropDownPlacement="BottomEdgeAlignedRight"
    x:Name="palette" />

一般的な配置オプション：

• Auto - 利用可能な最適な位置（既定）
• BottomEdgeAlignedLeft - 下側、左揃え
• BottomEdgeAlignedRight - 下側、右揃え
• TopEdgeAlignedLeft - 上側、左揃え
• TopEdgeAlignedRight - 上側、右揃え

パターン 5：パレットの開閉を検出する

<editors:SfDropDownColorPalette 
    DropDownOpened="Palette_DropDownOpened"
    DropDownClosed="Palette_DropDownClosed"
    x:Name="palette" />

private void Palette_DropDownOpened(object sender, EventArgs e)
{
    // Palette opened
}

private void Palette_DropDownClosed(object sender, EventArgs e)
{
    // Palette closed
}

主なプロパティ

プロパティ	型	用途
SelectedBrush	Brush	現在選択されている色を取得／設定します（既定値：Black）
DropDownPlacement	FlyoutPlacementMode	ボタンに対するドロップダウンの位置（既定値：Auto）
DropDownMode	DropDownMode	ドロップダウンモードまたは分割モード（既定値：Dropdown）
Command	ICommand	ボタンのクリック時に実行されるコマンド（分割モード）
ContentTemplate	DataTemplate	選択した色のボタンの外観をカスタマイズします
DropDownButtonTemplate	DataTemplate	ドロップダウン矢印ボタンをカスタマイズします（分割モード）

参照ファイル

詳細なドキュメントは、機能ごとに整理されています。

• getting-started.md - セットアップと基本的な実装
• palette-structure.md - 色セクションについて
• dropdown-customization.md - ボタンとドロップダウンのカスタマイズ
• color-palette-customization.md - カスタム色の定義
• more-colors-dialog.md - スペクトラムピッカーと最近使用した色

---

実装を始めましょうか？ 上記のナビゲーションガイドから具体的なタスクを選び、対応する参照ファイルをお読みください。