syncfusion-maui-combobox について
Syncfusion SfComboBoxの実装と設定を扱う、.NET MAUI開発者向けのスキルガイドです。編集可能な選択、フィルタリング、検索、複数選択、UIカスタマイズを機能別に解説します。
主な機能
- 01編集可能・選択専用モード
- 02トークン表示付き単一・複数選択
- 03組み込み・カスタムフィルタリング
- 04データバインディングと表示形式
- 05ドロップダウンのスタイルとテンプレート
- 06検索文字のハイライトと追加読み込み
活用シーン
- 01検索可能なドロップダウンの作成
- 02フォームへの複数選択の追加
- 03大規模な候補リストへの追加読み込み設定
- 04項目、ヘッダー、フッターのカスタマイズ
インストール
コマンドをコピーしてターミナルで実行します。
npx skills add https:/ / github.com/ syncfusion/ maui-ui-components-skills --skill syncfusion-maui-comboboxインストール後、Claude Code で/syncfusion-maui-comboboxを入力して読み込まれたか確認します。
同梱ファイル
SKILL.md と一緒にインストールされる参考資料やスクリプト。
references/advanced-features.mdai-smart-searching.mdediting-modes.mdevents-and-methods.mdfiltering.mdgetting-started.mdheader-footer.mdhighlighting-text.mdsearching.mdselection.mdui-customization.md詳細
.NET MAUI ComboBox の実装
Syncfusion .NET MAUI ComboBox(SfComboBox)は、ユーザーが値を入力するか、あらかじめ定義された選択肢のリストからオプションを選択できる強力な選択コントロールです。ドロップダウンリストと編集可能なテキストボックスの機能を組み合わせており、データバインディング、フィルタリング、検索、単一/複数選択、および豊富なカスタマイズオプションに対応しています。
このスキルを使用する場面
次のような要件がある場合に、このスキルを使用してください。
- 編集可能または編集不可のテキスト入力を備えたドロップダウン選択コントロールを実装する
- フィルタリングやオートコンプリート機能を備えた検索可能なドロップダウンを有効にする
- トークンまたは区切り文字による表示で、複数選択モードに対応する
- コレクションのデータをドロップダウンリストにバインドし、表示形式をカスタマイズする
- AI を活用したスマート検索など、カスタムフィルタリングロジックを適用する
- ヘッダー、フッター、項目テンプレート、スタイルでドロップダウン UI をカスタマイズする
- 検索時に一致したテキストを強調表示する
- 大規模なデータセットに対して、追加読み込み機能を実装する
- 適切なオートメーションサポートを備えた、アクセシブルな選択コントロールを実装する
コンポーネントの概要
主な機能:
- 編集可能モードと編集不可モード: 自由なテキスト入力を許可するか、ドロップダウンからの選択のみにするかを切り替えます
- 単一選択と複数選択: トークンまたは区切り文字による表示で、単一項目または複数項目の選択に対応します
- フィルタリングと検索: StartsWith/Contains モードとカスタムフィルターロジックを備えた、組み込みのテキストフィルタリング
- データバインディング: DisplayMemberPath と TextMemberPath を使用して、任意の IEnumerable ソースにバインドします
- UI のカスタマイズ: ドロップダウン、項目、トークン、ヘッダー、フッターの豊富なスタイル設定オプション
- スマート機能: AI を活用した検索、テキストの強調表示、追加読み込み、自動サイズ調整
- イベントとメソッド: 選択の変更、ドロップダウンの状態、ユーザー操作に対応する充実したイベントモデル
ドキュメントとナビゲーションガイド
はじめに
📄 参照: references/getting-started.md
- インストールと NuGet パッケージのセットアップ(Syncfusion.Maui.Inputs)
- Syncfusion Core ハンドラーの登録(ConfigureSyncfusionCore)
- XAML と C# での基本的な ComboBox の実装
- ItemsSource、DisplayMemberPath、TextMemberPath によるデータバインディング
- 最小限の動作サンプル
編集モード
📄 参照: references/editing-modes.md
- 編集可能/編集不可モードを設定する IsEditable プロパティ
- クリアボタンを制御する IsClearButtonVisible
- 入力テキストを取得/設定する Text プロパティ
- CursorPosition の管理
選択
📄 参照: references/selection.md
- 単一選択(SelectedItem、SelectedIndex)
- 複数選択(SelectionMode、SelectedItems)
- 複数選択時の表示モード(Token、Delimiter)
- TokensWrapMode(Wrap、None)
- SelectedValue と SelectedValuePath
- SelectionChanging イベントと SelectionChanged イベント
- プログラムによる選択と Clear メソッド
フィルタリング
📄 参照: references/filtering.md
- IsFilteringEnabled によるフィルタリングの有効化
- フィルターモード(StartsWith、Contains)
- IComboBoxFilterBehavior によるカスタムフィルタリング
- カスタムフィルターロジックに対応する GetMatchingIndexes の実装
- MinimumPrefixCharacters による制約
検索
📄 参照: references/searching.md
- TextSearchMode の設定(StartsWith、Contains)
- DisplayMemberPath と TextMemberPath に基づく検索
- 編集モードでの検索動作
- プレフィックス文字数の制約(MinimumPrefixCharacters)
UI のカスタマイズ
📄 参照: references/ui-customization.md
- プレースホルダーと色
- クリアボタンとドロップダウンアイコンのカスタマイズ
- 境界線のスタイル設定(Stroke、ShowBorder)
- MaxDropDownHeight の設定
- カスタム項目表示のための ItemTemplate と DataTemplateSelector
- ドロップダウンのスタイル設定(Background、Stroke、StrokeThickness、CornerRadius、Shadow)
- ドロップダウン項目のスタイル設定(Font、Color、Height、Padding)
- DropDownPlacement(Top、Bottom、Auto、None)
- DropDownButtonSettings のカスタマイズ
- トークン項目のスタイル設定
- テキストの配置とカーソル位置
- キーボード動作のための ReturnType
- ShowSuggestionsOnFocus
- UI テスト向けの AutomationId サポート
ヘッダーとフッター
📄 参照: references/header-footer.md
- ShowDropDownHeaderView によるヘッダービューの追加
- ShowDropDownFooterView によるフッタービューの追加
- ヘッダーとフッターのカスタムテンプレート
- 高さの設定
テキストのハイライト
📄 参照: references/highlighting-text.md
- TextHighlightMode(FirstOccurrence、MultipleOccurrence)
- ハイライトの色とフォント属性のカスタマイズ
- StartsWith モードと Contains モードでのハイライト
高度な機能
📄 参照: references/advanced-features.md
- EnableAutoSize による自動サイズ調整
- NoResultsFoundText と NoResultsFoundTemplate
- さらに読み込む機能(MaximumSuggestion、LoadMoreText、LoadMoreTemplate)
- プログラムによる制御のための IsDropDownOpen
- ReturnCommand と ReturnCommandParameter
- Liquid Glass Effect(EnableLiquidGlassEffect)
イベントとメソッド
📄 参照: references/events-and-methods.md
- SelectionChanging イベント(キャンセルオプション付き)
- SelectionChanged イベント(AddedItems、RemovedItems)
- ValueChanged イベント(OldValue、NewValue)
- Completed イベント
- DropDownOpening、DropDownOpened、DropDownClosed イベント
- ClearButtonClicked イベント
- LoadMoreButtonTapped イベント
- Clear() メソッド
AI を活用したスマート検索
📄 参照: references/ai-smart-searching.md
- インテリジェント検索のための Azure OpenAI の統合
- AI フィルタリング用 IComboBoxFilterBehavior の実装
- 正確な結果を得るためのプロンプトエンジニアリング
- CancellationToken を使った非同期フィルタリング
- フォールバックの仕組み(Soundex、Levenshtein アルゴリズム)