syncfusion-wpf-combobox

Syncfusion WPF ComboBox（ComboBoxAdv）の実装

Syncfusion® WPF ComboBoxAdv コントロールの実装に関する包括的なガイドです。ComboBoxAdv は強力なドロップダウンコンポーネントで、ユーザーは値を入力するか、一覧から項目を選択できます。複数選択、編集、オートコンプリート、データバインディングなどの高度な機能に対応しています。

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

次のような場合に、このスキルを使用してください。

• WPF アプリケーションでドロップダウン選択を実装する
• チェックボックスまたはトークンで複数選択を有効にする
• オートコンプリート機能付きの編集可能なドロップダウンを追加する
• MVVM パターンを使用してドロップダウンコントロールにデータをバインドする
• テンプレートで項目の表示をカスタマイズする
• ユーザーへの入力案内にウォーターマーク（既定のテキスト）を設定する
• 複数選択の表示にカスタム区切り文字を設定する
• デザイン時の編集に Expression Blend を統合する
• SfSkinManager または ThemeStudio を使用してテーマを適用する

コンポーネントの概要

ComboBoxAdv コントロール（Syncfusion.Windows.Tools.Controls.ComboBoxAdv）は、標準の WPF ドロップダウン機能を次のように拡張します。

主な機能：

• チェックボックス、トークン、OK／キャンセルボタンによる複数選択
• オートコンプリート（Suggest モード）に対応した編集モード
• DisplayMemberPath を使用した ItemsSource 経由のデータバインディング
• 選択項目を閉じるアイコン付きのトークンで表示
• ウォーターマークのサポート（DefaultText プロパティ）
• 複数選択表示用のカスタム区切り文字
• 複雑な UI 向けの項目テンプレート
• 組み込みテーマおよびカスタムテーマのサポート
• デザイン時の編集に対応した Expression Blend との統合

名前空間： Syncfusion.Windows.Tools.Controls
アセンブリ： Syncfusion.Shared.WPF
スキーマ： http://schemas.syncfusion.com/wpf

ドキュメントおよびナビゲーションガイド

はじめに

📄 参照： references/getting-started.md

• インストールとアセンブリの配置
• デザイナー、XAML、C# を使用したコントロールの追加
• データモデルと ViewModel の作成
• 基本的なデータバインディングのパターン
• DisplayMemberPath の設定
• ItemTemplate のカスタマイズ
• テーマの設定と適用

選択と複数選択

📄 参照： references/selection-multiselection.md

• 単一選択（SelectedItem、SelectedIndex、SelectedValue）
• 複数選択の有効化（AllowMultiSelect）
• SelectedItems によるプログラムからの選択
• SelectAll 機能
• 複数選択用の OK／キャンセルボタン
• OnItemChecked／OnItemUnchecked のオーバーライド
• 視覚的に項目を表現するトークンのサポート（EnableToken）
• トークンの編集とキーボード操作
• SelectionChanged イベントの処理

編集とオートコンプリート

📄 参照： references/editing-autocomplete.md

• テキスト入力用の IsEditable プロパティ
• オートコンプリートモード（Suggest、None）
• ドロップダウン項目の動的なフィルタリング
• トークンに対応した編集モード
• テキスト検索と項目の照合

ウォーターマークと区切り文字

📄 参照： references/watermark-delimiter.md

• ウォーターマーク用の DefaultText プロパティ
• SelectedValueDelimiter のカスタマイズ
• 使用パターンとベストプラクティス

データバインディング

📄 参照： references/data-binding.md

• ItemsSource バインディングの基本
• MVVM に対応したモデルと ViewModel の作成
• DisplayMemberPath と ItemTemplate の比較
• ObservableCollection のパターン
• SelectedItems との双方向バインディング
• INotifyPropertyChanged の実装

カスタマイズと Blend 対応

📄 参照： references/customization-blendability.md

• Expression Blend のワークフロー
• スタイルの編集とテンプレートのカスタマイズ
• SfSkinManager によるテーマの適用
• ThemeStudio によるカスタムテーマの作成
• コントロールの外観のカスタマイズ

クイックスタート

静的な項目を持つ基本的な ComboBoxAdv

<Window xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
        xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
        xmlns:syncfusion="http://schemas.syncfusion.com/wpf">
    <Grid>
        <syncfusion:ComboBoxAdv Height="30" Width="200"
                                HorizontalAlignment="Center"
                                VerticalAlignment="Center">
            <syncfusion:ComboBoxItemAdv Content="Denmark" />
            <syncfusion:ComboBoxItemAdv Content="New Zealand" />
            <syncfusion:ComboBoxItemAdv Content="Canada" />
            <syncfusion:ComboBoxItemAdv Content="Russia" />
            <syncfusion:ComboBoxItemAdv Content="Japan" />
        </syncfusion:ComboBoxAdv>
    </Grid>
</Window>

MVVM を使用したデータバインド型 ComboBoxAdv

// Model
public class Country
{
    public string Name { get; set; }
    public string Code { get; set; }
}

// ViewModel
public class ViewModel : INotifyPropertyChanged
{
    private ObservableCollection<Country> countries;
    public ObservableCollection<Country> Countries
    {
        get { return countries; }
        set { countries = value; OnPropertyChanged(nameof(Countries)); }
    }

    public ViewModel()
    {
        Countries = new ObservableCollection<Country>
        {
            new Country { Name = "Denmark", Code = "DK" },
            new Country { Name = "New Zealand", Code = "NZ" },
            new Country { Name = "Canada", Code = "CA" }
        };
    }

    public event PropertyChangedEventHandler PropertyChanged;
    protected void OnPropertyChanged(string name) =>
        PropertyChanged?.Invoke(this, new PropertyChangedEventArgs(name));
}

<Window.DataContext>
    <local:ViewModel />
</Window.DataContext>
<syncfusion:ComboBoxAdv ItemsSource="{Binding Countries}"
                        DisplayMemberPath="Name"
                        Height="30" Width="200"/>

よく使われるパターン

パターン 1：トークンによる複数選択

<syncfusion:ComboBoxAdv AllowMultiSelect="True"
                        IsEditable="True"
                        EnableToken="True"
                        ItemsSource="{Binding Items}"
                        DisplayMemberPath="Name"
                        Height="Auto" Width="300"/>

パターン 2：オートコンプリート対応の編集可能なコントロール

<syncfusion:ComboBoxAdv IsEditable="True"
                        AutoCompleteMode="Suggest"
                        ItemsSource="{Binding Items}"
                        DisplayMemberPath="Name"
                        Height="30" Width="200"/>

パターン 3：区切り文字付き透かしテキスト

<syncfusion:ComboBoxAdv AllowMultiSelect="True"
                        DefaultText="Select items..."
                        SelectedValueDelimiter=" | "
                        ItemsSource="{Binding Items}"
                        DisplayMemberPath="Name"
                        Height="30" Width="300"/>

パターン 4：OK／キャンセル付き複数選択

<syncfusion:ComboBoxAdv AllowMultiSelect="True"
                        AllowSelectAll="True"
                        EnableOKCancel="True"
                        ItemsSource="{Binding Items}"
                        DisplayMemberPath="Name"
                        Height="30" Width="250"/>

主なプロパティ

プロパティ	型	説明
AllowMultiSelect	bool	複数項目の選択を有効にします
IsEditable	bool	テキストの入力と編集を許可します
EnableToken	bool	選択した項目をトークンとして表示します（複数選択）
AutoCompleteMode	AutoCompleModes	オートコンプリートの候補表示または無効を指定します
DefaultText	string	項目が選択されていない場合の透かしテキスト
SelectedValueDelimiter	string	選択した項目間の区切り文字
ItemsSource	IEnumerable	バインディング用のデータコレクション
DisplayMemberPath	string	項目表示用のプロパティパス
SelectedItem	object	現在選択されている項目
SelectedItems	ObservableCollection	選択した項目のコレクション（複数選択）
SelectedIndex	int	選択した項目のインデックス
EnableOKCancel	bool	ドロップダウンに OK／キャンセルボタンを表示します
AllowSelectAll	bool	「すべて選択」オプションを追加します

一般的なユースケース

1. 国／地域セレクター - データバインディングによる単一選択
2. タグセレクター - 視覚的なフィードバックを得られるトークン付き複数選択
3. 検索可能なドロップダウン - 大規模なリスト向けのオートコンプリート付き編集可能ドロップダウン
4. カテゴリーフィルター - 区切り文字付き複数選択
5. プロンプト付きフォーム入力 - ユーザー向けの案内に使う透かしテキスト
6. 一括選択 - 確認用の OK／キャンセル付き「すべて選択」

関連項目

• Syncfusion WPF ComboBoxAdv のドキュメント
• WPF ComboBoxAdv API リファレンス