【WPF】ComboBoxでデータバインディングを行う。

はじめに

ComboBoxでデータバインディングを行う場合の備忘録を記載します。

ComboBox

ComboBoxはWebでいうSelectタグと同じものです。
XAMLではComboBoxタグを用いて画面表示を行います。

<StackPanel Orientation="Horizontal">
    <Label Content="テスト" Margin="10"/>
    <ComboBox x:Name="TestBox"
              Width="80"
              Margin="10"
              ItemsSource="{Binding Tests}"
              SelectedValuePath="Value"
              DisplayMemberPath="DisplayValue"
              SelectedItem = "{Binding SelectedTest}"/>
</StackPanel>

※ItemSourceでComboBoxのItemを、SelectedItemで選択された値をそれぞれバインディングします。

上記のXAMLで以下のような画面になります。

ViewModelを作成

先ほどBinding～と記載した部分をViewModel側で定義します。

public class MainWindowViewModel : BindableBase
{
    public MainWindowViewModel()
    {
        // 起動時に選択肢をセット
        Tests.Add(new TestViewModel(1, "テスト1"));
        Tests.Add(new TestViewModel(2, "テスト2"));
    }
    
    private ObservableCollection<TestViewModel> _tests
        = new();
    public ObservableCollection<TestViewModel> Tests
    {
        get { return _tests; }
        set { SetProperty(ref _tests, value); }
    }
    
    private TestViewModel _selectedTest;
    public TestViewModel SelectedTest
    {
        get { return _selectedTest; }
        set { SetProperty(ref _selectedTest, value); }
    }
}

※内部処理用の値と表示用の値をそれぞれ使い分けたいので以下のようにViewModel(TestViewModel)を作成しています。

public sealed class TestViewModel
{
    // 完全コンストラクタパターン
    public TestViewModel(int value, string displayValue)
    {
        Value = value;
        DisplayValue = displayValue;
    }

    public int Value { get; }
    public string DisplayValue { get; }
}

以上でComboBoxで選択した値がSelectedTestプロパティから取得できるようになります。

おわりに

データバインディングを使いこなせるよう今後も勉強していきます！