WPF4.5入門 その33 「ComboBoxコントロール」

ComboBoxコントロールは、複数の選択肢の中から１つをユーザーに選択してもらうためのユーザーインターフェースを提供するコントロールです。オプションとして、複数の選択肢の中から１つを選ぶか、自由にテキストを入力する方法も提供することができます。

ComboBoxの基本的な使い方は、ItemsSourceプロパティにオブジェクトのコレクションを設定して、ItemTemplateで見た目を定義する方法になります。例として、以下のようなNameとAgeプロパティを持つPersonクラスを表示する場合のコードを示します。

// ComboBoxに表示するオブジェクトpublicclass Person
{
    publicstring Name { get; set; }
    publicint Age { get; set; }
}

ComboBoxのXAMLでの定義は以下のようになります。ItemTemplateに、Personクラスの表示を定義するテンプレートを設定しています。

<ComboBox x:Name="comboBox"><ComboBox.ItemTemplate><DataTemplate><StackPanel Orientation="Horizontal"><TextBlock Text="{Binding Name}"Margin="2.5"/><TextBlock Text="{Binding Age}"Margin="2.5"/></StackPanel></DataTemplate></ComboBox.ItemTemplate></ComboBox>

コードビハインドのコンストラクタで、このComboBoxコントロールのItemsSourceプロパティにデータを設定します。

var items = Enumerable.Range(1, 10)
    .Select(i => new Person { Name = "おおた" + i, Age = 20 + i })
    .ToList();

this.comboBox.ItemsSource = items;

この状態で実行すると、以下のようにItemTemplateに設定した見た目の通り「名前 年齢」の順番でデータが並んだ状態で表示されます。

また、IsEditableプロパティをtrueに設定することで、選択肢にない項目をTextBoxと同じ要領で入力できるようにもなります。選択した項目の表示場所がTextBoxになることで、ItemTemplateの表示ができなくなるため、TextSearch.TextPathプロパティで選択した項目の、どのプロパティの値を表示するのか指定する必要があります。（省略した場合は、ToStringの結果がそのまま表示されます）

<ComboBox x:Name="comboBoxEditable"Grid.Column="2"Grid.Row="2"MinWidth="150"IsEditable="True"TextSearch.TextPath="Name"><ComboBox.ItemTemplate><DataTemplate><StackPanel Orientation="Horizontal"><TextBlock Text="{Binding Name}"Margin="2.5"/><TextBlock Text="{Binding Age}"Margin="2.5"/></StackPanel></DataTemplate></ComboBox.ItemTemplate></ComboBox>

選択項目の操作

ComboBoxコントロールで選択された要素を取得するには、インデックスを取得する方法と、選択された値そのものを取得するプロパティがあります。また、Textプロパティを使うことで現在選択中の項目のテキストも取得できます。

以下のように設定した、ComboBoxコントロールのSelectedIndexプロパティ、SelectedItemプロパティ、Textプロパティを表示するプログラムの実行結果を示します。

<ComboBox x:Name="comboBox"Grid.ColumnSpan="2"TextSearch.TextPath="Name"><ComboBox.ItemTemplate><DataTemplate><StackPanel Orientation="Horizontal"><TextBlock Text="{Binding Name}"Margin="2.5"/><TextBlock Text="{Binding Age}"Margin="2.5"/></StackPanel></DataTemplate></ComboBox.ItemTemplate></ComboBox>

実行直後は、SelectedIndexプロパティが-1になっていることが確認できます。また、SelectedItemプロパティはnullでTextプロパティは空文字になっています。

3番目の項目を選択すると以下のような表示になります。

SelectedIndexプロパティが３番目を表す2になっている点と、SelectedItemプロパティが、選択項目のPersonオブジェクトになっていることが確認できます。TextプロパティはTextSearch.TextPath添付プロパティでNameプロパティを表示するようにしているため、Nameプロパティの値が表示されていることがわかります。

過去記事

• WPF4.5入門 その1 「はじめに」
• WPF4.5入門 その2 「WPFとは」
• WPF4.5入門 その3 「Hello world」
• WPF4.5入門 その4 「Mainメソッドはどこにいった？」
• WPF4.5入門 その5 「全てC#でHello world」
• WPF4.5入門 その6 「WPFを構成するものを考えてみる」
• WPF4.5入門 その7 「XAMLのオブジェクト要素と名前空間」
• WPF4.5入門 その8 「オブジェクト要素のプロパティ」
• WPF4.5入門 その9 「コレクション構文」
• WPF4.5入門 その10 「コンテンツ構文」
• WPF4.5入門 その11 「マークアップ拡張」
• WPF4.5入門 その12 「その他のXAMLの機能」
• WPF4.5入門 その13 「簡単なレイアウトを行うコントロール」
• WPF4.5入門 その14 「レイアウトコントロールのCanvasとStackPanel」
• WPF4.5入門 その15 「レイアウトコントロールのDockPanelとWrapPanel」
• WPF4.5入門 その16 「ViewBoxコントロール」
• WPF4.5入門 その17 「ScrollViewerコントロール」
• WPF4.5入門 その18 「Gridコントロール part 1」
• WPF4.5入門 その19 「Gridコントロール part 2」
• WPF4.5入門 その20 「レイアウトに影響を与えるプロパティ」
• WPF4.5入門 その21 「WPFのコンセプトと重要な機能つまみ食い」
• WPF4.5入門 その22 「Buttonコントロール」
• WPF4.5入門 その23 「DataGridコントロール その1」
• WPF4.5入門 その24 「DataGridコントロール その2」
• WPF4.5入門 その25 「TreeViewコントロール その1」
• WPF4.5入門 その26 「TreeViewコントロール その2」
• WPF4.5入門 その28 「Calendarコントロール」 - かずきのBlog@hatena
• WPF4.5入門 その29 「ContextMenuコントロール」 - かずきのBlog@hatena
• WPF4.5入門 その30「Menuコントロール」 - かずきのBlog@hatena
• WPF4.5入門 その31 「ToolBarコントロール」 - かずきのBlog@hatena
• WPF4.5入門 その32 「CheckBoxコントロール」 - かずきのBlog@hatena