mcpField
S
syncfusion-wpf-colorpicker

syncfusion-wpf-colorpicker

github.com/syncfusion開発5160 回インストール1 週間前に更新
リポジトリ

syncfusion-wpf-colorpicker について

Syncfusion の WPF ColorPicker の実装を案内するスキルです。単色やグラデーションの選択・編集に加え、イベント処理とテーマ設定を扱います。

主な機能

  1. 01RGB、HSV、16進数による色編集
  2. 02単色とグラデーションブラシの選択
  3. 03グラデーションエディターとスポイト
  4. 04カラーパレットと不透明度の設定
  5. 05テーマと色変更イベント

活用シーン

  1. 01WPF アプリへの色選択機能の追加
  2. 02線形または放射状グラデーションの設定
  3. 03色やブラシの変更への応答
  4. 04組み込みまたはカスタムテーマの適用

インストール

コマンドをコピーしてターミナルで実行します。

$npx skills add https://github.com/syncfusion/wpf-ui-components-skills --skill syncfusion-wpf-colorpicker

インストール後、Claude Code で/syncfusion-wpf-colorpickerを入力して読み込まれたか確認します。

同梱ファイル

SKILL.md と一緒にインストールされる参考資料やスクリプト。

references/
appearance-theming.md
customization.md
events-integration.md
getting-started.md
solid-gradient-colors.md

詳細

WPF ColorPicker の実装

ColorPicker は、色の値を選択・調整するための WPF ユーザーインターフェイスコントロールです。RGB（赤、緑、青）、HSV（色相、彩度、明度）、16 進コードなど、複数の色指定に対応しており、グラデーションエディター、スポイト、カラーパレット、テーマ設定の機能を備えています。

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

次のような場合は ColorPicker を使用してください。

  • WPF アプリケーションで、ユーザーが単色を選択できるようにする
  • 複数のカラーストップを持つ線形または放射状のグラデーションブラシを作成する
  • RGB、HSV、または 16 進数の入力を使って色の値を手動で編集する
  • アプリ内の任意の場所から色を選択できるスポイトツールを追加する
  • 色の不透明度／アルファチャンネルを制御する
  • 色をすばやく選択できるカラーパレットを用意する
  • 色変更イベントとブラシ変更イベントを処理する
  • 組み込みテーマまたはカスタムテーマを適用し、アプリケーションのデザインに合わせる

ナビゲーションガイド

はじめに

📄 参照: references/getting-started.md

  • アセンブリの依存関係と NuGet パッケージの設定
  • Designer、XAML、C# を使った ColorPicker の追加
  • コントロールの構造の概要
  • 基本的な設定
単色とグラデーションカラー

📄 参照: references/solid-gradient-colors.md

  • Color プロパティを使った単色の選択
  • StartPoint、EndPoint、GradientStops を使った線形グラデーションの作成
  • GradientOrigin、Center、RadiusX、RadiusY を使った放射状グラデーションの作成
  • 実行時の色編集と選択
  • アルファチャンネルを使った不透明度の管理
  • 単色、線形、グラデーションの各モードの切り替え
カスタマイズオプション

📄 参照: references/customization.md

  • カラーパレットの表示／非表示の切り替え
  • グラデーションブラシの表示モード（Default と Extended）
  • コントラストのための反転色の計算
  • ScRGB カラーのサポート
  • アルファ値エディターの表示／非表示の切り替え
  • ブラシモードの切り替えの制限
外観とテーマ設定

📄 参照: references/appearance-theming.md

  • 組み込みテーマのサポート
  • テーマ適用のための SfSkinManager との統合
  • ThemeStudio によるカスタムテーマの作成
  • テーマに基づく外観のカスタマイズ
イベントと統合

📄 参照: references/events-integration.md

  • ColorChanged イベントの処理
  • SelectedBrushChanged イベントの処理
  • 実行時の色変更通知
  • 他のコントロールとの統合パターン

クイックスタート

基本的な XAML の設定
<Window xmlns:syncfusion="http://schemas.syncfusion.com/wpf">
    <Grid>
        <syncfusion:ColorPicker Name="colorPicker" 
                                Width="280" 
                                Height="100"/>
    </Grid>
</Window>
基本的な C# の設定
using Syncfusion.Windows.Shared;

ColorPicker colorPicker = new ColorPicker();
colorPicker.Width = 300;
colorPicker.Height = 100;
grid.Children.Add(colorPicker);
初期色の設定
<syncfusion:ColorPicker Color="Yellow" />

よく使われるパターン

パターン 1：単色の選択 - Color プロパティと IsColorPaletteVisible="True" を設定し、ユーザーが単色を選択できるようにします。

パターン 2：グラデーションの選択 - LinearGradientBrush または RadialGradientBrush と GradientStops を使って Brush プロパティを設定し、グラデーションを選択できるようにします。

パターン 3：色の変更への対応 - ColorChanged イベントと SelectedBrushChanged イベントを購読し、リアルタイムの色／ブラシの更新を処理します。

パターン 4：アルファチャンネルを非表示にする - 不透明色のみを使用する場合は、IsAlphaVisible="False" を設定します。

パターン 5：単色に固定する - グラデーションモードへの切り替えを防ぐには、EnableSolidToGradientSwitch="False" を設定します。

主なプロパティ

プロパティ型用途
ColorColor選択した単色を取得または設定します
BrushBrush選択したグラデーションブラシまたは単色ブラシを取得または設定します
IsAlphaVisibleboolアルファ（不透明度）コントロールを表示／非表示にします
IsColorPaletteVisiblebool組み込みカラーパレットを表示／非表示にします
EnableSolidToGradientSwitchboolモード間の切り替えを許可／禁止します
GradientBrushDisplayModeenum表示モード（Default または Extended）を設定します

主なイベント

イベント発生するタイミング
ColorChanged選択した単色が変更されたとき
SelectedBrushChanged選択したブラシ（グラデーション）が変更されたとき

依存関係

  • アセンブリ： Syncfusion.Shared.WPF
  • フレームワーク： .NET Framework 4.5+
  • 依存関係： Syncfusion WPF 共通コンポーネント

コメント

Markdown 対応