「東雲忠太郎」の平凡な日常のできごと

2024.08.04

C# WPF の MVVM パターンで `ComboBox` に `Dictionary` データを表示する方法

カテゴリ： WPFC#.NET

C# WPF の MVVM パターンで `ComboBox` に `Dictionary` データを表示する方法を示します。以下は、キーと値のペアを `ComboBox` に表示するサンプルコードです。

## プロジェクトの設定

Visual Studio で新しい WPF アプリケーションプロジェクトを作成します。

## クラスの構成

### ビューモデル (ViewModel)

まず、ビューモデルを作成します。このビューモデルでは、`Dictionary` データと選択された項目をバインドします。

```csharp

using System.Collections.Generic;

using System.ComponentModel;

using System.Runtime.CompilerServices;

using System.Windows.Input;

public class MainViewModel : INotifyPropertyChanged

{

private KeyValuePair<string, string> _selectedItem;

private Dictionary<string, string> _items;

public Dictionary<string, string> Items

{

get => _items;

set

{

_items = value;

OnPropertyChanged();

}

public KeyValuePair<string, string> SelectedItem

{

get => _selectedItem;

set

{

_selectedItem = value;

OnPropertyChanged();

}

public MainViewModel()

{

Items = new Dictionary<string, string>

{

{ "1", "Item 1" },

{ "2", "Item 2" },

{ "3", "Item 3" }

};

}

public event PropertyChangedEventHandler PropertyChanged;

protected void OnPropertyChanged([CallerMemberName] string propertyName = null)

{

PropertyChanged?.Invoke(this, new PropertyChangedEventArgs(propertyName));

}

```

### ビュー (View)

次に、`ComboBox` に `Dictionary` データを表示するための XAML コードを作成します。

`MainWindow.xaml`:

```xml

<Window x:Class="WpfApp.MainWindow"

xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"

xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"

xmlns:d="http://schemas.microsoft.com/expression/blend/2008"

xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"

mc:Ignorable="d"

Title="MainWindow" Height="350" Width="525">

<Grid>

<ComboBox ItemsSource="{Binding Items}"

SelectedValuePath="Key"

DisplayMemberPath="Value"

SelectedValue="{Binding SelectedItem.Key}"

Margin="10" Width="200" Height="30"/>

<TextBlock Text="{Binding SelectedItem.Value}"

Margin="10" Width="200" Height="30"/>

</StackPanel>

</Grid>

</Window>

```

### ビューコードビハインド (View Code-Behind)

最後に、ビューのコードビハインドファイルでデータコンテキストを設定します。

`MainWindow.xaml.cs`:

```csharp

public partial class MainWindow : Window

{

public MainWindow()

{

InitializeComponent();

DataContext = new MainViewModel();

}

```

この例では、`MainViewModel` に `Dictionary<string, string>` データを設定し、`ComboBox` にバインドしています。`ComboBox` の `ItemsSource` プロパティに `Items` をバインドし、`SelectedValuePath` にキー、`DisplayMemberPath` に値を指定しています。選択されたアイテムは `SelectedItem` プロパティにバインドされ、選択された値が `TextBlock` に表示されます。