WPF

C#WPFの道#20!ComboBoxの書き方と使い方を解りやすく解説

ComboBox(コンボボックス)とは?

ComboBoxとは,一覧の中から,任意の項目を選択するときに使うコントロールです。

主な使い方

使い方は,単純にItemsに文字をAddして使うやり方もできますが,実際のプログラミングでは,表示されている文字とは別に,内部ではIdで扱うことがほとんどなので,基本的にはItemsSourceにデータバインディングをして使うことになります。今回はそれぞれのやり方を見ていきます。

パターン1:単純にItemsに文字をAddして使う

  • Xamlにコンボボックスとボタンを設置
  • コンストラクタでコンボボックスに文字列を3つ追加
  • ボタンクリックイベントで各プロパティの内容を確認するメッセージボックスを表示

実行結果

  • シンプルに文字列が3つ追加されている。

「222」を選択してCheckボタンを押下したときのメッセージボックス

  • SelectedIndexは「1」。これはインデックスが0始まりなので2番目を選択したためインデックスは1となる。
  • SelectedValueとTextは両方「222」となる。

この方法は非常にシンプルだが,任意の文字列を表示して,内部ではIDで管理するというコーディングができない。実際のプログラミングでは使用することはないと思います。私は基本的に使いません。プロトタイプで取り急ぎ表示させる時くらいにしか用途はないかと思います。

パターン2:データバインディング(単一項目表示)

ここからはデータバインディングする方法を見ていきたいと思います。データバインディングする場合は,任意のクラスを作成して,そのリストをコンボボックスのItemsSourceに設定します。Idと表示文字をセットにして,コンボボックスで扱うだけであれば,SelectedValuePathとDisplayMemberPathを使用することで実現できます。

  • ItemsSource
    • コンボボックスにバインディングするリスト
  • SelectedValuePath
    • 選択されているときにSelectedValueで取得される項目を設定
  • DisplayMemberPath
    • 表示する文字の項目を設定。Textで取得される値。
  • コンボボックスにデータバインディングするためのクラスです。IDと名前と電話番号のクラスです。
  • SelectedValuePathとDisplayMemberPathを設定しています。
  • 表示文字はNameを表示し,内部的にはIdで処理をすることができます。
  • 選択されているIdはSelectedValueで取得できます。
  • 選択されているNameはTextで取得することができます。
  • PrivateフィールドにObservableCollectionでCustomerのリストを宣言しています。
  • コンストラクタで3つのCustomerを生成して_customersにAddしています。
  • ボタンクリック時に各プロパティの値を確認しています。
  • SelectedItemはObject型の為Customerクラスに変換し,取得できた場合のみ処理しています。

実行結果

  • ObservableCollectionに追加したCustomerクラスのNameの値がリストされています。これはDisplayMemberPathに「Name」を設定しているためです。

「name2」を選択して「check」ボタンを押下したとき

  • SelectedIndexには「1」が設定されています。
  • SelectedValueには「2」が設定されています。これはSelectedValuePathで「Id」を設定しているためです。
  • Textには「name2」が設定されています。これはDisplayMemberPathに「Name」を設定しているためです。
  • SelectedItemには選択されているCustomerの値が取得できています。

この方法を使えば,任意の表示項目と,内部で扱うIdを分けてコーディングすることができます。ただ,表示する項目を加工したい場合や,複数のコントロールに分けて表示するレイアウトにしたい場合は実現できないので,次に紹介するItemTemplateとDataTemplateを使用するやり方で実現します。

パターン3:リストに複数のコントロールを表示する場合

リストに複数のコントロールを置く場合はItemTemplateとDataTemplateを使って実現できます。

  • ItemTemplateとDataTemplateエリアを記述します。
  • DataTemplateの中に任意のコントロールを設置します。ここではStackPanelの中に複数のTextBlockを設置しています。
  • TextBlockのTextにはItemsSourceにデータバインディングする値に対応するプロパティをバインドしています。

実行結果

  • 複数のTextBlockが表示されています。

2番目の値を選択して「check」を押下したとき

  • SelectedIndexには「1」が設定されています。
  • SelectedValueとTextには「Customer」という文字が表示されています。これはCustomerクラスをToString()したときの文字列です。今回はSelectedValuePathとDisplayMemberPathを設定していないためこうなっています。SelectedValuePathをIdにしておくことで,SelectedValueをIdで取得することは可能です。
  • SelectedItemには選択されているCustomerの値が取得できています。この値を常に参照するという事であれば,SelectedValuePathを設定しなくてもコーディングは可能です。

サンプルコード全体

WPFの道!

C#を正しい3層構造で造れてますか?

非売品コースを受け取る