syncfusion-maui-checkbox について
Syncfusion の SfCheckBox を .NET MAUI アプリに実装するためのドキュメントスキルです。チェックボックスの状態、外観、イベント処理、選択パターンを扱います。
主な機能
- 013つのチェック状態
- 02外観とテキストのカスタマイズ
- 03状態変更イベントの処理
- 04VisualStateManager によるスタイル設定
- 05親子関係と全選択パターン
活用シーン
- 01単一または複数選択の追加
- 02利用規約の同意画面の作成
- 03MAUI での状態別スタイル設定
- 04状態変更の抑止や連携
インストール
コマンドをコピーしてターミナルで実行します。
npx skills add https:/ / github.com/ syncfusion/ maui-ui-components-skills --skill syncfusion-maui-checkboxインストール後、Claude Code で/syncfusion-maui-checkboxを入力して読み込まれたか確認します。
同梱ファイル
SKILL.md と一緒にインストールされる参考資料やスクリプト。
references/events.mdgetting-started.mdvisual-customization.mdvisual-states.md詳細
.NET MAUI でのチェックボックスの実装
Syncfusion .NET MAUI CheckBox(SfCheckBox)は、ユーザーが選択肢のセットから 1 つ以上を選択できる選択コントロールです。3 つの状態(チェック済み、未チェック、不確定状態)をサポートし、幅広い外観のカスタマイズや、イベント駆動型の状態管理に対応しています。
このスキルを使用するタイミング
次のような場合に、このスキルを使用します。
- チェックボックスコントロールを実装する場合(.NET MAUI アプリケーション内)
- 選択コントロールを追加する場合(単一選択または複数選択のシナリオ)
- 3 状態チェックボックスを作成する場合(不確定状態のサポートを含む)
- チェックボックスの外観をカスタマイズする場合(色、形状、サイズ、テキスト)
- チェックボックスのイベントを処理する場合(StateChanged、StateChanging)
- VisualStateManager を使用してビジュアル状態を適用する場合
- チェックボックスグループを構築する場合(設定、フォーム、フィルターなどの複数選択シナリオ)
- すべて選択する機能を備えた親子関係のチェックボックス階層を実装する場合
- 利用規約への同意 UI を作成する場合
- MAUI のスタイル設定を使用してアクセシブルな選択コントロールを追加する場合
コンポーネントの概要
SfCheckBox コントロールは、次の機能を提供します。
- 3 状態のサポート:チェック済み、未チェック、不確定状態
- 外観のカスタマイズ:色、角の半径、線の太さ、チェックマークの色
- テキストのカスタマイズ:フォント、色、配置、改行モード
- イベント処理:StateChanged イベントと StateChanging イベント
- Visual State Manager:各状態に合わせた外観のカスタマイズ
- アニメーション制御:状態変更アニメーションの有効化/無効化
ドキュメントとナビゲーションガイド
はじめにとインストール
📄 参照: references/getting-started.md
参照するタイミング:ユーザーが初めて SfCheckBox を設定する場合、インストール手順が必要な場合、または基本的な実装例を確認したい場合。
説明するトピック:
- Syncfusion.Maui.Buttons NuGet パッケージのインストール
- Syncfusion ハンドラーの登録(ConfigureSyncfusionCore)
- CheckBox の基本的な実装(XAML および C#)
- チェックボックスのキャプションテキストの設定
- 3 つの状態(チェック済み、未チェック、不確定状態)の理解
- 単一チェックボックスのシナリオ(利用規約、同意書)
- 複数のチェックボックスグループ(複数選択オプション)
- 親子関係における中間状態
- すべて選択するチェックボックスのパターン
外観のカスタマイズ
📄 参照: references/visual-customization.md
参照するタイミング:ユーザーがチェックボックスの外観をカスタマイズしたい場合、色を変更したい場合、サイズを調整したい場合、テキストのスタイルを変更したい場合、またはアニメーションを制御したい場合。
説明するトピック:
- 形状のカスタマイズ(角を丸くするチェックボックスの CornerRadius)
- 状態ごとの色(CheckedColor、UncheckedColor)
- 線の太さのカスタマイズ
- キャプションテキストの外観(TextColor、FontFamily、FontSize、FontAttributes、HorizontalTextAlignment)
- チェックマークの色のカスタマイズ
- LineBreakMode のオプション(テキストの折り返しまたは切り詰め)
- サイズのカスタマイズ(ControlSize プロパティ)
- フォントの自動スケーリング(FontAutoScalingEnabled)
- アニメーションの制御(EnabledAnimation)
- チェックボックスとテキストの間隔
イベントと状態管理
📄 参照: references/events.md
参照するタイミング:ユーザーがチェックボックスの状態変更に応答する必要がある場合、選択を検証する必要がある場合、またはチェックボックスの切り替え時にカスタムロジックを実装する場合。
説明するトピック:
- StateChanged イベントと StateChangedEventArgs
- StateChanging イベント(状態変更前にキャンセル可能)
- XAML と C# でのイベント処理パターン
- プログラムによる状態変更
- イベント駆動型の UI 更新
- Cancel プロパティによる状態変更の防止
- 複数のチェックボックスの状態の連携
VisualStateManager によるビジュアル状態
📄 参照先: references/visual-states.md
読むタイミング:VisualStateManager を使用して、チェック済み、未チェック、または中間状態に応じて異なる外観を適用したい場合。
対象トピック:
- SfCheckBox の Visual State Manager の概要
- 3 つのビジュアル状態(Checked、Unchecked、Intermediate)
- VisualStateGroups を使用した XAML の実装
- Visual State のセッターを使用した C# の実装
- 状態ごとのプロパティのカスタマイズ
- 各状態の完全なサンプル