syncfusion-maui-chips

.NET MAUI Chips の実装

Syncfusion .NET MAUI Chips コントロールは、コンパクトでインタラクティブなレイアウトで情報を表示するための、多機能で豊富な機能を備えたコンポーネント（SfChip と SfChipGroup）を提供します。チップを使うと、視覚的に魅力的でカスタマイズ可能な UI 要素を通じて、情報の表示、選択、フィルタリング、アクションの実行ができます。

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

次のようなニーズがある場合は、このスキルを使用してください。

• カテゴリーデータを表示する：タグ、ラベル、カテゴリーをコンパクトでインタラクティブなチップとして表示する
• 選択インターフェースを実装する：単一選択または複数選択に対応したチップグループを作成する
• 入力チップを作成する：ユーザーが動的に追加または削除できるチップを作成する
• フィルターインターフェースを構築する：データのフィルタリングに使う複数選択インジケーターを備えたインターフェースを作成する
• アクションチップを追加する：クリック時にコマンドを実行するチップを追加する
• チップの外観をカスタマイズする：色、境界線、アイコン、フォント、画像を設定する
• チップの操作を処理する：選択イベント、クリックハンドラー、削除イベントを処理する
• チップデータをバインドする：ItemsSource と DisplayMemberPath を使用してコレクションのデータをバインドする

コンポーネントの概要

SfChip： テキスト、アイコン、閉じるボタン、カスタマイズオプションを備えた個別のチップコンポーネントです。

SfChipGroup： 複数のチップを管理するコンテナーで、次の機能に対応しています。

• 4 種類のチップ：Input、Choice、Filter、Action
• ItemsSource によるデータバインディング
• 選択モードと視覚的な状態
• レイアウトのカスタマイズ（FlexLayout、StackLayout など）
• 選択と削除のイベント処理

主な機能：

• チップの動的な作成と削除
• 単一選択モードと複数選択モード
• 視覚的な選択インジケーター
• アイコンと背景画像への対応
• 豊富なスタイル設定オプション
• MVVM コマンドへの対応
• イベント駆動型の操作

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

はじめに

📄 参照： references/getting-started.md

ユーザーに次のニーズがある場合：

• Syncfusion .NET MAUI Chips パッケージをインストールして設定する
• MauiProgram.cs で Syncfusion Core ハンドラーを登録する
• 最初の SfChip または SfChipGroup を作成する
• チップのレイアウト（FlexLayout、StackLayout）を設定する
• チップの基本的な設定と構成を理解する
• 最小限の動作するサンプルを確認する

チップの種類と選択モード

📄 参照： references/chip-types.md

ユーザーに次のニーズがある場合：

• 4 種類のチップ（Input、Choice、Filter、Action）を理解する
• チップを動的に追加・削除できる Input チップを実装する
• 単一選択（ChoiceMode: Single、SingleOrNone）の Choice チップを作成する
• 複数選択と選択インジケーターに対応した Filter チップを構築する
• コマンド実行に対応した Action チップを使用する
• 選択状態と通常状態の視覚的な状態を設定する
• ユースケースに適したチップの種類を選ぶ

カスタマイズとスタイル設定

📄 参照： references/customization.md

ユーザーに次のニーズがある場合：

• 個々の SfChip の外観をカスタマイズする
  • 閉じるボタンと選択インジケーターの表示・非表示を切り替える
  • 色（背景、テキスト、境界線、閉じるボタン、選択インジケーター）を変更する
  • 境界線のプロパティ（線の太さ、角の半径）を変更する
  • テキストのスタイル（フォントサイズ、フォントファミリー、属性、色、配置）を設定する
  • アイコン（表示、ソース、サイズ、配置）を設定する
  • 背景画像を追加する
• SfChipGroup のスタイルをカスタマイズする
  • チップと選択済みチップの色を設定する
  • 境界線とパディングを設定する
  • 項目の高さとテキストサイズを調整する
  • 選択インジケーターのスタイルを設定する
• MVVM パターン用のコマンドを実装する
• チップグループ全体に一貫したテーマを適用する

データの設定

📄 参照： references/populating-data.md

ユーザーに次のニーズがある場合：

• ItemsSource を使用してビジネスオブジェクトをチップにバインドする
• DisplayMemberPath を使用してテキストプロパティを指定する
• ImageMemberPath を使用してアイコン画像をバインドする
• チップデータ用の Model クラスと ViewModel クラスを作成する
• Items コレクションを使用して SfChip 項目を直接設定する
• 動的なチップ作成のために InputView を追加する
• データバインディングのベストプラクティスを実装する
• [Preserve] 属性を使用した AOT 公開時の考慮事項に対応する

イベントと操作

📄 参照： references/events.md

次のことが必要な場合：

• SelectionChanging イベント（選択前に発生し、キャンセル可能）を処理する
• SelectionChanged イベント（選択完了後に発生）を処理する
• ChipClicked イベントに応答する
• Input タイプのチップに対する ItemRemoved イベントを処理する
• CloseButtonClicked イベントを取得する
• イベント引数とプロパティを理解する
• チップの種類ごとにサポートされているイベントを確認する

高度な機能

📄 参照： references/advanced-features.md

次のことが必要な場合：

• チップにフォントアイコン（カスタムアイコンフォント）を適用する
• DataTemplateSelector を使用してカスタムチップテンプレートを使う
• Liquid Glass の視覚効果を実装する
• IsSelected プロパティを使用して選択状態をプログラムで制御する
• AOT パブリッシングの要件に対応する
• プラットフォーム固有のカスタマイズを適用する