【完全ガイド】WinUI 3 (.NET 8) ComboBoxで自作クラスをバインドする方法と選択イベントの取得方法

2025年7月22日

WinUI 3 (.NET 8) でデスクトップアプリを開発していて、「セレクトボックス（ComboBox）に自作クラスをバインドしたい」「選択変更イベントを取得したい」と思ったことはありませんか？

この記事では、ComboBox に List<string> ではなく自作クラス List<T> をバインドする方法と、選択変更を検知するためのイベントハンドリング方法について、実用的なサンプルコードとともに分かりやすく解説します。

✅ ComboBoxとは？WinUI 3 における基本的な使い方

<ComboBox Header="選択してください" Width="200">
    <ComboBoxItem Content="選択肢1" />
    <ComboBoxItem Content="選択肢2" />
</ComboBox>

これだけでも動作しますが、実際のアプリでは List<T> のようなデータを使って動的に項目を生成したいケースが多いです。

✅ 自作クラスを ComboBox にバインドする方法

▼ 1. 自作クラスを定義する

public class MyOption
{
    public int Id { get; set; }
    public string Name { get; set; } // 表示に使う
}

▼ 2. XAML側：DisplayMemberPath を指定する

<ComboBox
        x:Name="MyComboBox"
        ItemsSource="{x:Bind Options}"
        SelectedItem="{x:Bind SelectedOption, Mode=TwoWay}"
        DisplayMemberPath="Name"
        Header="選択してください"
        SelectionChanged="MyComboBox_SelectionChanged"
        Width="200"/>

▼ 3. C#コードビハインド側

public sealed partial class MainWindow : Window
{
    public List<MyOption> Options { get; } = new()
    {
        new MyOption { Id = 1, Name = "オプションA" },
        new MyOption { Id = 2, Name = "オプションB" },
        new MyOption { Id = 3, Name = "オプションC" }
    };

    public MyOption SelectedOption { get; set; }

    public MainWindow()
    {
        this.InitializeComponent();
    }
}

✅ 初期値を設定する方法（デフォルト選択）

▼ 方法1：SelectedIndex

MyComboBox.SelectedIndex = 0; // 最初の項目を選択

▼ 方法2：SelectedItem に直接オブジェクトを指定

SelectedOption = Options.FirstOrDefault(x => x.Id == 2);

注意: x:Bind を使っている場合は SelectedOption に代入するほうが安全です。

✅ ComboBox の選択値が変更されたときのイベントを検知する

▶ SelectionChanged イベントの使い方

<ComboBox SelectionChanged="MyComboBox_SelectionChanged" />

private void MyComboBox_SelectionChanged(object sender, SelectionChangedEventArgs e)
{
    if (MyComboBox.SelectedItem is MyOption selected)
    {
        Debug.WriteLine($"選ばれた: {selected.Id} - {selected.Name}");
    }
}

✅ MVVMパターンを使いたい場合の補足

private MyOption _selectedOption;
public MyOption SelectedOption
{
    get => _selectedOption;
    set
    {
        if (_selectedOption != value)
        {
            _selectedOption = value;
            // 値が変更されたときの処理
            Debug.WriteLine($"選択されたオプション: {_selectedOption?.Name}");
        }
    }
}

🔚 まとめ

内容	方法
ComboBox に自作クラスを表示する	ItemsSource + DisplayMemberPath を使う
初期選択を設定する	SelectedIndex または SelectedItem を使う
値の変更を検知する	SelectionChanged イベントを使う
MVVMでの変更通知	プロパティセッターで処理を記述する