syncfusion-maui-toolkit-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 Toolkit ハンドラーを登録する
• 最初の 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 を使ってアイコン画像をバインドする
• チップデータ用のモデルクラスと ViewModel クラスを作成する
• Items コレクションを使って SfChip 項目を直接設定する
• 動的なチップ作成用に InputView を追加する
• データバインディングのベストプラクティスを実装する
• [Preserve] 属性を使って AOT 発行時の考慮事項に対応する

イベントとインタラクション

📄 参照： references/events.md

ユーザーが次のことを行う必要がある場合：

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

高度な機能

📄 参照： references/advanced-features.md

ユーザーが次のことを行う必要がある場合：

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