syncfusion-wpf-color-palette

Syncfusion WPF カラーパレットの実装

SfColorPalette は、整理された色見本から色を選択できる多用途のカラーピッカーコンポーネントです。複数の色セット、バインディングのサポート、豊富なカスタマイズオプションを備えています。

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

次のような場合に、このスキルを使用してください。

• カラーピッカーインターフェイスを追加する：WPF アプリケーションにカラーピッカーを追加するとき
• ユーザーが色見本から色を選択できるようにするとき
• 選択した色を UI 要素（ブラシ、背景など）にバインドするとき
• 異なる色見本（Material、Office、Metro、Grayscale など）間を切り替えるとき
• 外観（前景色、背景色、フロー方向）をカスタマイズするとき
• テーマを適用するか、カラーパレットのスタイルをカスタマイズするとき

概要

カラーパレットコンポーネントは、次の要素で構成されています。

• 色見本：整理されたさまざまな色セット（Material、Office など）
• 色見本ボタン：右上にあり、色パッケージを切り替えます
• 色アイテム：現在の色見本で使用できる個々の色
• ツールチッププレビュー：色にカーソルを合わせると、選択した色を表示します
• SelectedColor プロパティ：現在選択されている色を Color オブジェクトとして返します

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

はじめに

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

• アセンブリ参照と NuGet パッケージのセットアップ
• デザイナー、XAML、C# を使用したコントロールの追加
• 基本的なカラーパレットの作成
• 色の選択とイベント処理

色のバインディング

📄 参照先： references/color-binding.md

• SelectedColor プロパティを他のオブジェクトにバインドする
• 色からブラシへのコンバーターを作成する
• UI との双方向データバインディング
• 選択した色を図形やコントロールにバインドする

色見本のナビゲーション

📄 参照先： references/swatches-navigation.md

• 使用可能な色見本の概要
• 色見本コレクション間の切り替え
• 色見本ボタンの機能について
• 色見本の使用可否をカスタマイズする

外観とテーマ設定

📄 参照先： references/appearance-theming.md

• 前景色と背景色をカスタマイズする
• フロー方向を設定する（LTR/RTL 対応）
• SfSkinManager で組み込みテーマを適用する
• Theme Studio でカスタムテーマを作成する

クイックスタートの例

<Window
    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
    xmlns:syncfusion="http://schemas.syncfusion.com/wpf"
    Title="Color Palette Example" Height="400" Width="500">
    <Grid>
        <StackPanel Margin="20">
            <TextBlock Text="Select a Color:" FontSize="14" Margin="0,0,0,10"/>
            <syncfusion:SfColorPalette 
                x:Name="colorPalette"
                Height="250"
                Width="300"
                HorizontalAlignment="Left"/>
            
            <TextBlock Text="Selected Color:" FontSize="14" Margin="0,20,0,10"/>
            <Rectangle 
                Fill="{Binding ElementName=colorPalette, Path=SelectedColor, Converter={StaticResource ColorToBrushConverter}}"
                Height="50"
                Width="300"
                HorizontalAlignment="Left"/>
        </StackPanel>
    </Grid>
</Window>

よくあるパターン

パターン 1：基本的な色の選択

高度なバインディングを使わずにシンプルなカラーピッカーが必要な場合に使用します。

// Create and add the control
SfColorPalette colorPalette = new SfColorPalette();
colorPalette.Height = 300;
colorPalette.Width = 200;
this.Content = colorPalette;

// Get the selected color
Color selectedColor = colorPalette.SelectedColor;

パターン 2：UI 要素へのバインディング

選択した色で UI 要素を自動的に更新する場合に使用します。

XAML：

<Grid.Resources>
    <local:ColorToSolidColorBrushValueConverter x:Key="ColorToBrushConverter"/>
</Grid.Resources>

<Rectangle Fill="{Binding ElementName=colorPalette, Path=SelectedColor, Converter={StaticResource ColorToBrushConverter}}"/>
<syncfusion:SfColorPalette x:Name="colorPalette"/>

C# コンバーター：

public class ColorToSolidColorBrushValueConverter : IValueConverter
{
    public object Convert(object value, Type targetType, object parameter, CultureInfo culture)
    {
        if (value is Color color)
            return new SolidColorBrush(color);
        return null;
    }
    
    public object ConvertBack(object value, Type targetType, object parameter, CultureInfo culture)
    {
        return true;
    }
}

パターン 3：スタイル設定したカラーパレット

テーマと色を使って外観をカスタマイズする場合に使用します。

<syncfusion:SfColorPalette 
    x:Name="colorPalette"
    Foreground="Blue"
    Background="AliceBlue"
    FlowDirection="LeftToRight"
    Height="250"
    Width="300"/>

主なプロパティ

プロパティ	型	既定値	用途
SelectedColor	Color	—	現在選択されている色を取得します
Foreground	Brush	Gray	パレット UI の前景色
Background	Brush	Snow	パレットの背景色
FlowDirection	FlowDirection	LeftToRight	レイアウト方向（LTR または RTL）

よくあるユースケース

• テーマカスタマイザー：アプリケーションテーマ用のカスタム色をユーザーが選択できるようにします
• デザインツール：グラフィックスや UI デザインアプリケーションに統合されたカラーピッカー
• ブランディングツール：デザインシステム用のブランドカラーを選択します
• データビジュアライゼーション：チャートの系列、凡例、注釈用の色を選択します
• アクセシビリティツール：色覚異常への対応策として、すばやく色を選択できるようにします