syncfusion-maui-toolkit-picker について
Syncfusion の SfPicker を .NET MAUI アプリに実装するためのガイドです。表示モード、データバインディング、外観、操作、アクセシビリティ、ローカライズを扱います。
主な機能
- 01インライン、Dialog、RelativeDialog モード
- 02単列・複数列の選択
- 03データバインディングと動的更新
- 04ヘッダー、フッター、アイテムテンプレートのカスタマイズ
- 05選択イベントと MVVM コマンド
- 06アクセシビリティとローカライズのガイド
活用シーン
- 01日付、時刻、色、国のピッカー作成
- 02UI 要素の近くへのポップアップ配置
- 03変化するコレクションとの列バインド
- 04ローカライズアプリ向け選択 UI の調整
インストール
コマンドをコピーしてターミナルで実行します。
npx skills add https:/ / github.com/ syncfusion/ maui-toolkit-ui-components-skills --skill syncfusion-maui-toolkit-pickerインストール後、Claude Code で/syncfusion-maui-toolkit-pickerを入力して読み込まれたか確認します。
同梱ファイル
SKILL.md と一緒にインストールされる参考資料やスクリプト。
references/accessibility.mdadvanced-features.mdcolumn-headers.mdcolumns.mdcustomization.mdevents-commands.mdgetting-started.mdheader-footer-selection.mdlocalization.mdpicker-modes.mdpopulating-items.md詳細
.NET MAUI Picker(SfPicker)の実装
Syncfusion .NET MAUI Picker(SfPicker)コントロールを使用すると、複数列、さまざまな表示モード、豊富なカスタマイズオプションに対応したカスタマイズ可能なピッカーインターフェイスから項目を選択できます。日付ピッカー、時刻ピッカー、カラーピッカー、国選択ピッカーなど、スクロール可能なリストから項目を選択する必要があるあらゆる場面に適しています。
このスキルを使用する場合
以下が必要な場合に、このスキルを使用してください。
- Syncfusion Picker を使用して、.NET MAUI アプリケーションに項目選択インターフェイスを実装する
- 日付ピッカー、時刻ピッカー、カラーピッカー、国選択ピッカーなどのカスタムピッカーを作成する
- Default、Dialog、RelativeDialog モードでピッカーコントロールを表示する
- 複雑なデータ選択のシナリオ向けに複数列のピッカーを設定する
- ヘッダー、フッター、選択ビュー、列ヘッダーなど、ピッカーの外観をカスタマイズする
- ItemsSource と ObservableCollection を使用して、ピッカーの列にデータをバインドする
- SelectionChanged、OkButtonClicked、CancelButtonClicked などのピッカーイベントを処理する
- ピッカーコントロールのアクセシビリティ機能を実装する
- 多言語に対応するために、ピッカーのコンテンツをローカライズする
- ループ表示や項目テンプレートなどの高度な機能を適用する
コンポーネントの概要
.NET MAUI Picker(SfPicker)には、以下の機能があります。
- 複数の表示モード:Default(インライン)、Dialog(ポップアップ)、RelativeDialog(位置指定ポップアップ)
- 複数列への対応:独立したデータソースを使用して複数の列を表示
- カスタマイズ可能なビュー:ヘッダー、フッター、選択ビュー、列ヘッダー
- 豊富なデータバインディング:単純なコレクションと複雑なオブジェクトに対応
- イベント駆動型アーキテクチャ:ユーザー操作に対応するイベントとコマンド
- アクセシビリティへの対応:WCAG 準拠とスクリーンリーダーへの対応
- ローカライズ:多言語対応とカルチャ固有の書式設定
- 高度なカスタマイズ:項目テンプレート、スタイル、視覚効果
ドキュメントとナビゲーションガイド
はじめに
📄 参照先: references/getting-started.md
以下が必要な場合:
- Syncfusion .NET MAUI Picker をインストールして設定する
- NuGet パッケージ(Syncfusion.Maui.Toolkit)を追加する
- Syncfusion ハンドラー(ConfigureSyncfusionToolkit)を登録する
- XAML または C# で基本的なピッカーを実装する
- 初期の高さと幅のプロパティを設定する
ピッカーのモードと表示
📄 参照先: references/picker-modes.md
以下が必要な場合:
- Default、Dialog、RelativeDialog モードから選択する
- ピッカーをポップアップダイアログとして表示する
- 特定の UI 要素を基準にピッカーの位置を指定する
- RelativePosition オプション(AlignTop、AlignTopLeft、AlignBottomRight など)を設定する
- カスタムの位置指定に RelativeView を設定する
- PopupWidth と PopupHeight でポップアップのサイズを制御する
- IsOpen プロパティを使用してプログラムからピッカーを開閉する
列の設定
📄 参照先: references/columns.md
以下が必要な場合:
- ピッカーに単一または複数の列を追加する
- DisplayMemberPath を使用して、オブジェクトの特定のプロパティを表示する
- 列の幅をカスタマイズする
- SelectedIndex プロパティと SelectedItem プロパティを設定する
- ItemsSource をデータコレクションにバインドする
- 複数列のピッカーの列区切り線の色を設定する
- 列の動的な追加と削除を管理する
ヘッダー、フッター、選択ビュー
📄 参照先: references/header-footer-selection.md
以下が必要な場合:
- ヘッダービュー(PickerHeaderView)を追加してカスタマイズする
- ヘッダーのテキストと高さを設定する
- OK ボタンと Cancel ボタンを含むフッタービューを設定する
- ShowOkButton プロパティを有効または無効にする
- フッターボタンのテキスト(OkButtonText、CancelButtonText)をカスタマイズする
- 選択ビューの外観をスタイル設定する
- IsSelectionImmediate を使用して、選択内容を即時に更新する
列ヘッダー
📄 参照: references/column-headers.md
次のことが必要な場合:
- 列ヘッダービュー(PickerColumnHeaderView)を追加する
- 個々の列に HeaderText プロパティを設定する
- 列ヘッダーの高さを設定する
- 列ヘッダーのスタイルをカスタマイズする
- 複数列のヘッダーレイアウトを実装する
アイテムの設定とデータバインディング
📄 参照: references/populating-items.md
次のことが必要な場合:
- ItemsSource を ObservableCollection にバインドする
- データソースを作成して設定する
- XAML と C# でバインディングコンテキストを設定する
- カスタムプロパティを持つ複雑なオブジェクトをバインドする
- 動的なデータの更新と再読み込みに対応する
- MVVM のデータバインディングパターンを実装する
イベントとコマンド
📄 参照: references/events-commands.md
次のことが必要な場合:
- Opened、Closing、Closed イベントを処理する
- SelectionChanged イベントに応答する
- OkButtonClicked と CancelButtonClicked イベントを処理する
- MVVM で SelectionChangedCommand を使用する
- AcceptCommand と DeclineCommand を実装する
- イベント引数とパラメーターにアクセスする
- Closing イベントでピッカーが閉じるのをキャンセルする
カスタマイズとスタイル設定
📄 参照: references/customization.md
次のことが必要な場合:
- カスタムのアイテム表示にアイテムテンプレートを適用する
- ビジュアルスタイル(色、フォント、背景)をカスタマイズする
- テキストのスタイルと書式を設定する
- ビジュアル状態を実装する
- カスタムテーマとスタイルを適用する
アクセシビリティ
📄 参照: references/accessibility.md
次のことが必要な場合:
- WCAG に準拠する
- キーボードナビゲーションのサポートを実装する
- スクリーンリーダーとの互換性を設定する
- アクセシビリティのための ARIA 属性を追加する
- フォーカスの動作を管理する
- アクセシビリティのベストプラクティスに従う
ローカライズ
📄 参照: references/localization.md
次のことが必要な場合:
- 多言語サポートを実装する
- ローカライズ用のリソースファイルを設定する
- 文化圏固有の書式設定を行う
- 右から左に記述する(RTL)言語に対応する
高度な機能
📄 参照: references/advanced-features.md
次のことが必要な場合:
- ループ(循環スクロール)を有効にする
- ピッカーのテキスト表示モードを設定する
- データテンプレートセレクターを実装する
- ピッカーのパフォーマンスを最適化する
- 複雑なカスタムシナリオに対応する
- 特殊なケースの問題を解決する