C#のComboBoxを使ってみた

C#でComboBox（ドロップダウンリストを表示してユーザーに選択してもらうコントロール）を使ってみました。

ComboBoxとは
コレクションをバインディングする

XAML
XAMLの説明
コード
コードの説明
実行結果

ComboBoxにオブジェクトのプロパティを選択肢として表示する

XAML（プロパティを表示する）
XAML（プロパティを表示する）の説明
コード（プロパティを表示する）
コード（プロパティを表示する）の説明
実行結果（プロパティを表示する）

ComboBoxとは

下図のようにドロップダウンリストを表示して、ユーザーにリストの中から選択をしてもらうためのコントロールです。

項目の編集などの機能もありますが、今回は基本的な機能だけを使ってみました。

コレクションをバインディングする

ComboBoxに表示するアイテムを設定するには、リストなどのコレクションをバインディングします。

「まどか」「ほむら」「さやか」という3つの選択肢から、一人を選択して、選択した結果をTextBlockに表示するアプリを作ってみます。

XAML

<Window x:Class="WpfApp1.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"
        xmlns:local="clr-namespace:WpfApp1"
        mc:Ignorable="d"
        Title="MainWindow" Height="200" Width="200" Loaded="Window_Loaded" >
    <Grid>
        <StackPanel>
            <ComboBox Name="comboBoxMain" ItemsSource="{Binding}" IsEditable="False" SelectionChanged="ComboBoxMain_SelectionChanged" />
            <TextBlock Text="XMLでのバインディング" />
            <TextBlock Text="{Binding ElementName=comboBoxMain, Path=SelectedItem}" />
            <TextBlock Text="選択結果をコードで取り出し" />
            <TextBlock Name="textBlockMain" />
        </StackPanel>
    </Grid>
</Window>

XAMLの説明

StackPanelでComboBoxと複数のTextBlockを並べました。

WindowにLoadedイベントを、ComboBoxにSelectionChangedイベントを設定します。

TextプロパティにBinding ElementName=comboBoxMain, Path=SelectedItemとバインディングを設定したTextBlockがあります。これは、ComboBoxの選択結果をそのままTextBlockにバインディングしている状態です。こうすると、コード側で何もしなくてもComboBoxの選択結果がTextBlockに連動します。つまり、XAMLだけで完結するわけですね。

ComboBoxの選択結果に応じて処理を行いたい場合もあります。そこでComboBoxにSelectionChangedイベントを設定して、イベントハンドラの方で処理を行います。今回はその結果をTextBlockMainに表示します。

コード

using System.Collections.Generic;
using System.Windows;

namespace WpfApp1
{
    public partial class MainWindow : Window
    {
        public MainWindow()
        {
            InitializeComponent();
        }

        private void Window_Loaded(object sender, RoutedEventArgs e)
        {
            List<string> testItems = new List<string>();
            testItems.Add("まどか");
            testItems.Add("ほむら");
            testItems.Add("さやか");

            comboBoxMain.ItemsSource = testItems;
        }

        private void ComboBoxMain_SelectionChanged(object sender, System.Windows.Controls.SelectionChangedEventArgs e)
        {
            var selectedItem = comboBoxMain.SelectedItem;
            if (selectedItem != null)
            {
                textBlockMain.Text = selectedItem.ToString();
            }
        }
    }
}

コードの説明

Window_Loadedで、stringのListを作ります。そのListをComboBoxにバインディングします。

ComboBoxでユーザーが選択をするとComboBoxMain_SelectionChangedが呼び出されます。そうしたら、ComboBox.SelectedItemを取り出します。これが、ユーザーの選択結果です。

SelectedItemがnullでない場合、TextBlock.Textに選択結果を代入します。SelectedItemの型はobjectですので、stringに変換します。

実行結果

アプリを起動した状態です。ComboBoxには何も選択されていません。

ComboBoxをクリックすると、選択肢が表示されます。

選択肢をクリックすると、クリックされた選択肢がComboBoxとTextBlockに表示されます。

ComboBoxにオブジェクトのプロパティを選択肢として表示する

ComboBoxのバインディング用に専用のListを作るのは面倒なこともあります。そこで、オブジェクトのプロパティを選択肢として表示させるようにしてみます。

以下のサンプルでは、PersonというクラスにNameとColorというプロパティを設定して、NameをConboBoxに表示し、選択したNameに対応するColorをTextBlockに表示します。

XAML（プロパティを表示する）

<Window x:Class="WpfApp1.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"
        xmlns:local="clr-namespace:WpfApp1"
        mc:Ignorable="d"
        Title="MainWindow" Height="200" Width="200" Loaded="Window_Loaded" >
    <Grid>
        <StackPanel>
            <ComboBox Name="comboBoxMain" ItemsSource="{Binding}" DisplayMemberPath="Name" IsEditable="False" SelectionChanged="ComboBoxMain_SelectionChanged" />
            <TextBlock Text="XMLでのバインディング" />
            <TextBlock Text="{Binding ElementName=comboBoxMain, Path=SelectedItem.Color}" />
            <TextBlock Text="選択結果をコードで取り出し" />
            <TextBlock Name="textBlockMain" />
        </StackPanel>
    </Grid>
</Window>

XAML（プロパティを表示する）の説明

基本的には最初のXAMLと同じです。

ComboBoxにDisplayMemberPathというプロパティを設定して、バインディングするオブジェクトのプロパティを指定します。

XMLでバインディングする方のTextBlockに、Binding ElementName=comboBoxMain, Path=SelectedItem.Colorという感じでSelectedItemの子要素として表示するプロパティを指定します。

コード（プロパティを表示する）

using System.Collections.Generic;
using System.Windows;

namespace WpfApp1
{
    public partial class MainWindow : Window
    {
        public MainWindow()
        {
            InitializeComponent();
        }

        private void Window_Loaded(object sender, RoutedEventArgs e)
        {
            List<Person> testItems = new List<Person>();
            testItems.Add(new Person { Name = "まどか", Color = "ピンク" });
            testItems.Add(new Person { Name = "ほむら", Color = "紫" });
            testItems.Add(new Person { Name = "さやか", Color = "青" });

            comboBoxMain.ItemsSource = testItems;
        }

        private void ComboBoxMain_SelectionChanged(object sender, System.Windows.Controls.SelectionChangedEventArgs e)
        {
            var selectedItem = (Person)comboBoxMain.SelectedItem;
            if (selectedItem != null)
            {
                textBlockMain.Text = selectedItem.Color;
            }
        }
    }

    public class Person
    {
        public string Name { get; set; }
        public string Color { get; set; }
    }
}

コード（プロパティを表示する）の説明

Personクラスを設定します。このクラスには、NameとColorの2つのプロパティがあります。いずれもstringです。

Window_LoadedイベントでComboBoxにバインディングするListは、Person型にします。

ComboBox_SelectionChangedイベントでSelectedItemはobject型になりますので、Personにキャストします。そうすると、取り出したSelectedItemオブジェクトの各プロパティにアクセスできます。

実行結果（プロパティを表示する）

実行すると下図のようになります。

ComboBoxでの表示に対応したプロパティ値がTextBlockに表示されていることがわかりますね。

Previous: C#のListViewのヘッダーをクリックして列をソートする方法 Next: C#のTextBoxで最下行に自動でスクロールする方法

公開日 2020-12-13