C#

【WPF】ComboBoxの使い方と実装方法を解説(バインド)

WPFではComboBox(コンボボックス)と呼ばれる、プログラムの開発ではよく利用されるコントロールが存在します。

プロダウン形式で項目のリストを表示するため、余計なスペースをとることなく画面に配置することが可能です。

 他のUIコントロールの使い方も知りたい方はここをクリック!!

画面作成で使う「コントロール」一覧
(種類別に紹介)

\ WPFのコントロールについて詳しくみる /

この記事ではComboBoxの基本的な使い方と実装方法について詳しく解説していますので、ぜひ参考にしてみてください。

プログラミングを更に学びたい方必見

選抜された現役エンジニアから学べるプログラミングスクールで、現場や副業で役に立つノウハウやスキルを習得してみませんか?

オンラインに特化しているので場所に捉われず、自分のライフスタイルに合わせて受講することができます。

副業に興味がある方に人気の「はじめての副業コース」をはじめ、Web開発やシステム開発・アプリ開発などカテゴリ毎に受講ができ、初心者の方でも挫折することなく学ぶことができます。

まずはこの機会に現役のプロに無料相談をしてみましょう。

\ プログラミングスクールの詳細を確認する /

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

ComboBoxとは、入力機能(テキストボックス)プルダウンメニュー機能(リストボックス)の両方を併せ持ちボックスのコントロールことです。

ユーザーは事前に定義されたリスト内の項目を選択するか、テキストボックスに値を入力することができます。

リストボックス部分は通常状態で非表示になっており、ComboBoxの右端にある矢印をクリックすることで画面に選択項目が表示されます。

ComboBoxの使い方と実装方法

ComboBoxにアイテムを追加するには複数の方法があります。基本的にはItemsSourceプロパティにデータバインディングして使うことが多いです。

ComboBoxへリストを追加する方法として、大きく分類すると5種類あります。

  1. XAMLにソースを記述して追加する方法
  2. ItemsプロパティのAddメソッドで追加する方法
  3. ItemsSourceプロパティで追加する方法
  4. データバインディングしてアイテムを追加する方法
  5. Enum(列挙体)をアイテムとして追加する方法

それぞれの使い方と実装法を確認してみましょう。

 

XAMLに記述してアイテムを追加する方法

この方法はソースファイルにコードを記述することなく、コンボボックスにアイテムを追加することができます。

ComboBoxItemのContentプロパティにアイテム名を設定します。この例ではアイテムを4つコンボボックスに追加しています。

<Window x:Class="ComboBoxSample.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="170" Width="280">
    <Grid>
        <ComboBox Name="cmbSample" Margin="10,10,10,94" IsEditable="True">
            <ComboBoxItem Content="晴れ"/>
            <ComboBoxItem Content="曇り"/>
            <ComboBoxItem Content="雨"/>
            <ComboBoxItem Content="雪"/>
        </ComboBox>
    </Grid>
</Window>
using System.Windows;

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

上記のコードを実行すると次のような結果になります。

通常コンボボックスのテキストボックス部分は入力が無効化されているので、XAMLでComboBoxの IsEditable プロパティをtrueにしています。

 

ItemsプロパティのAddメソッドで追加する方法

この方法はXAMLとソースファイルの両方にソースコードを記述することでアイテムを追加する方法です。

XAMLにComboBoxのコントロールを配置するコードを記述し、ソースファイルでコンボボックスのアイテムを追加します。

<Window x:Class="ComboBoxSample.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="170" Width="280">
    <Grid>
        <ComboBox Name="cmbSample" Margin="10,10,10,94" IsEditable="True"/>
    </Grid>
</Window>
using System.Windows;

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

            cmbSample.Items.Add("晴れ");
            cmbSample.Items.Add("曇り");
            cmbSample.Items.Add("雨");
            cmbSample.Items.Add("雪");
        }
    }
}

ここでは、コンストラクタでコンボボックスに4つのアイテムを追加しています。

上記のコードを実行すると次のような結果になります。XAMLでアイテムを追加した場合と同じ結果です。

 

ItemsSourceプロパティでアイテムを追加する方法

コードビハインドのソースファイルに配列やList<T>などのコレクションの要素をItemsSourceプロパティに直接データを設定します。

XAMLは先ほどと同じ記述です。ソースファイルを次のように変更します。

<Window x:Class="ComboBoxSample.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="170" Width="280">
    <Grid>
        <ComboBox Name="cmbSample" Margin="10,10,10,94" IsEditable="True"/>
    </Grid>
</Window>
using System.Windows;

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

            cmbSample.ItemsSource = new string[] 
            {
                "晴れ", 
                "曇り", 
                "雨", 
                "雪" 
            };
        }
    }
}

上記のコードを実行すると次のような結果になります。

 

データバインディングしてアイテムを追加する方法(#1)

ここからはデータバインディングする方法です。

まず、データバインディングする上でコンボボックスの重要なプロパティを紹介します。これらのプロパティを使って選択されているデータを取得したり、コレクションを設定したりします。

プロパティ名説明
ItemsSource選択可能なデータのコレクションをバインドするためのプロパティである。基本的にObservableCollection型を使用する。
SelectedItemItemsSource のうち、現在選択されているデータである。
SelectedValueItemsSource のうち、現在選択されているデータの値である。
SelectedValuePath
SelectedValue にバインドするプロパティ名である。
DisplayMemberPath
表示するデータの名称である。

もっとも簡単なバインドの方法が次の通りです。

ItemsSourceプロパティに表示したいデータのコレクションをバインドします。

SelectedItemプロパティに選択した項目をバインドします。

<Window
    x:Class="ComboBoxSample.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"
    Title="MainWindow"
    Width="280"
    Height="170"
    mc:Ignorable="d">
    <Grid>
        <ComboBox
            Name="cmbSample"
            Margin="10,10,10,94"
            IsEditable="True"
            ItemsSource="{Binding Weathers}"
            SelectedItem="{Binding SelectItem}" />
    </Grid>
</Window>
using System.Windows;

namespace ComboBoxSample
{
    public partial class MainWindow : Window
    {
        public MainWindow()
        {
            InitializeComponent();
            DataContext = new ViewModel();
        }
    }
}

ViewModelクラス

class ViewModel
{
    public ObservableCollection Weathers { get; private set; }

    public ViewModel()
    {
        Weathers = new ObservableCollection
        {
            "晴れ",
            "曇り",
            "雨",
            "雪"
        };
    }

    public string SelectItem { get; set; }
}

上記のコードを実行すると次のような結果になります。

 

データバインディングしてアイテムを追加する方法(#2)

次は任意のクラスを作成して、そのリストをItemsSourceプロパティに設定する方法です。先ほどは表示する文字列だけ設定しましたが、Idと表示する文字列をセットにして、ItemsSourceプロパティに設定します。

ここで重要なのはSelectedValuePathプロパティとDisplayMemberPathプロパティを使用するということです。

SelectedValuePathは、選択された時にSelectedValueに渡す項目を設定します。

<Window
    x:Class="ComboBoxSample.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"
    Title="MainWindow"
    Width="280"
    Height="170"
    mc:Ignorable="d">
    <Grid>
        <ComboBox
            Name="cmbSample"
            Margin="10,10,10,94"
            IsEditable="True"
            SelectedValuePath="Id"
            DisplayMemberPath="Name"
            ItemsSource="{Binding Weathers}" 
            SelectedValue="{Binding SelectItemValue}"/>
    </Grid>
</Window>
using System.Windows;

namespace ComboBoxSample
{
    public partial class MainWindow : Window
    {
        public MainWindow()
        {
            InitializeComponent();
            DataContext = new ViewModel();
        }
    }
}

ViewModelクラス

class ViewModel
{
    public ObservableCollection Weathers { get; private set; }

    public ViewModel()
    {
        Weathers = new ObservableCollection
        {
            new Weather( 1 , "晴れ"),
            new Weather( 2, "曇り"),
            new Weather( 3, "雨"),
            new Weather( 4, "雪")
        };
    }

    public string SelectItemValue { get; set; }
}

public class Weather
{
    public Weather(int id, string name)
    {
        Id = id;
        Name = name;
    }

    public int Id { get; set; }
    public string Name { get; set; }
}

上記のコードを実行すると次のような結果になります。

ViewModelをバインディングしたコンボボックス内部の動作を確認してみます。ドロップダウンリストから項目を選択した場合、値が内部でどのように変化しているかを可視化して動作を確認します。

ボタンのクリックイベントで各プロパティの値を取得して、メッセージボックスを表示するようにコードを追加します。

<Window
    x:Class="ComboBoxSample.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"
    Title="MainWindow"
    Width="280"
    Height="170"
    mc:Ignorable="d">
    <Grid>
        <ComboBox
            Name="cmbSample"
            Margin="10,10,10,94"
            DisplayMemberPath="Name"
            IsEditable="True"
            ItemsSource="{Binding Weathers}"
            SelectedValue="{Binding SelectItemValue}"
            SelectedValuePath="Id" />
        <Button
            x:Name="btnCheck"
            Width="95"
            Height="30"
            Margin="10,0,0,10"
            Click="btnCheck_Click"
            HorizontalAlignment="Left"
            VerticalAlignment="Bottom"
            Content="確認" />
    </Grid>
</Window>
using System.Text;
using System.Windows;

namespace ComboBoxSample
{
    public partial class MainWindow : Window
    {
        public MainWindow()
        {
            InitializeComponent();
            DataContext = new ViewModel();
        }

        private void btnCheck_Click(object sender, RoutedEventArgs e)
        {
            var item = cmbSample.SelectedItem as Weather;
            if (item is null) return;

            var sb = new StringBuilder();
            sb.AppendLine("SelectedIndex:" + cmbSample.SelectedIndex);
            sb.AppendLine("SelectedValue:" + cmbSample.SelectedValue);
            sb.AppendLine("Text:" + cmbSample.Text);
            sb.AppendLine("Id:" + item.Id);
            sb.AppendLine("Name:" + item.Name);
            MessageBox.Show(sb.ToString());
        }
    }
}

ViewModelの更新はありません。上記のコードを実行してプロパティの値を確認してみましょう。

上の図では、「雲り」をコンボボックスのドロップダウンリストから選択しています。「曇り」はリストの2番目に存在します。

次の内容がメッセージボックスに表示された値です。

  • SelectedIndexには「1」が設定されている。要素のインデックス番号0から開始されるので、リストの2番目にある「曇り」はインデックス番号は「1」になります。
  • SelectedValueには「2」が設定されている。これはSelectedValuePathで「Id」をバインドしているためです。
  • Textには「曇り」が設定されている。これはDisplayMemberPathに「曇り」を設定しているためです。

このようにIdと表示する文字列のセットでコンボボックスを制御することが可能です。

 

Enum(列挙体)をアイテムとして追加する方法(#1)

続いてenumのデータをコンボボックスに表示する方法を紹介します。2パターンの実装方法があるので用途に応じて使い分けが必要です。

まずは、コンボボックスにenumの定義名をそのまま選択項目に追加してリストを作成します。

EnumのGetValuesプロパティでEnumのリストを作成し、そのデータをItemsSourceプロパティにバインドします。

<Window
    x:Class="ComboBoxSample.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"
    Title="MainWindow"
    Width="280"
    Height="170"
    mc:Ignorable="d">
    <Grid>
        <ComboBox
            Name="cmbSample"
            Margin="10,10,10,94"
            IsEditable="True"
            ItemsSource="{Binding WeatherEnums}" />
    </Grid>
</Window>
using System.Windows;

namespace ComboBoxSample
{
    public enum Weather
    {
        sunny,
        cloudy,
        rain,
        snow
    }
    public partial class MainWindow : Window
    {
        public MainWindow()
        {
            InitializeComponent();
            DataContext = new ViewModel();
        }
    }
}

ViewModelクラス

using System;

namespace ComboBoxSample
{
    class ViewModel
    {
        // Enum配列のプロパティ
        public Weather[] WeatherEnums { get; set; }

        public ViewModel()
        {
            WeatherEnums = (Weather[])Enum.GetValues(typeof(Weather));
        }
    }
}

上記のコードを実行してみましょう。

 

Enum(列挙体)をアイテムとして追加する方法(#2)

Enumと表示する文字列がセットになったリストを作成します。ここではDictionary 型を使用して「Key」と「value」のペアを作り、ItemsSourceプロパティにバインドします。

ここで重要なのはSelectedValuePathプロパティにDictionary の「key」、DisplayMemberPathプロパティにDictionaryの「value」を設定するということです。この記述を忘れてしまうとコンボボックスのドロップダウンリストに表示される値がおかしくなります。一度、どのような表示結果になるかプロパティを設定せずに動かしてみてください。

<Window
    x:Class="ComboBoxSample.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"
    Title="MainWindow"
    Width="280"
    Height="170"
    mc:Ignorable="d">
    <Grid>
        <ComboBox
            Name="cmbSample"
            Margin="10,10,10,94"
            DisplayMemberPath="Value"
            IsEditable="True"
            ItemsSource="{Binding WeatherNames}"
            SelectedValuePath="Key" />
    </Grid>
</Window>
using System.Windows;

namespace ComboBoxSample
{
    public enum Weather
    {
        sunny,
        cloudy,
        rain,
        snow
    }
    public partial class MainWindow : Window
    {
        public MainWindow()
        {
            InitializeComponent();
            DataContext = new ViewModel();
        }
    }
}

ViewModelクラス

using System;

namespace ComboBoxSample
{
    class ViewModel
    {
        // Enum配列のプロパティ
        public Dictionary<Weather, string> WeatherNames { get; set; }

        public ViewModel()
        {
            WeatherNames = new Dictionary<Weather, string>
            {
                [Weather.sunny] = "晴れ",
                [Weather.cloudy] = "曇り",
                [Weather.rain] = "雨",
                [Weather.snow] = "雪",
            };
        }
    }
}

上記のコードを実行すると次のような結果になります。

 

プログラミングを更に学びたい方必見

選抜された現役エンジニアから学べるプログラミングスクールで、現場や副業で役に立つノウハウやスキルを習得してみませんか?

オンラインに特化しているので場所に捉われず、自分のライフスタイルに合わせて受講することができます。

副業に興味がある方に人気の「はじめての副業コース」をはじめ、Web開発やシステム開発・アプリ開発などカテゴリ毎に受講ができ、初心者の方でも挫折することなく学ぶことができます。

まずはこの機会に現役のプロに無料相談をしてみましょう。

\ プログラミングスクールの詳細を確認する /

まとめ

この記事ではWPFのコントロールの1つであるComboBoxの使い方と実装方法について紹介しました。

記述パターンはいくつかありますので、プログラムの要件にあった実装方法で書くようにしましょう。

  1. XAMLにソースを記述して追加する方法
  2. ItemsプロパティのAddメソッドで追加する方法
  3. ItemsSourceプロパティで追加する方法
  4. データバインディングしてアイテムを追加する方法
  5. Enum(列挙体)をアイテムとして追加する方法

以上、最後まで読んでいただきありがとうございました。

参考記事

【WPF】アイコン付きのComboBoxを表示する方法(カスタマイズ)ComboBoxにアイコン付きのプルダウンリストを作成したい方におすすめの記事です。WPFのコンボボックスはXAMLにコードを書けるため、細かいところまで自由自在にカスタマイズができます。今回はComboBoxにアイコンと項目名をペアで表示する方法について紹介をしています。...
【WPF】ToolBarの使い方と実装方法(操作ボタンの処理をXAMLで実装する)WPFでToolBar(ツールバー)を使う方法と実装方法について解説をしています。ToolBarはユーザーの利便性と作業効率を向上させるにはなくてはならないコントロールです。アイコン付きのボタンの作成方法、バインディング、Command(コマンド)の使い方を紹介しています。...
【WPF】DataGridの使い方を徹底解説!基本的な操作方法を紹介WPFの「DataGrid」を使って行の追加、ボタンの列を追加、comboboxの列を追加するなど基本的なDataGridの操作方法を紹介しています。DataGridはWPFでアプリケーションを作る時に使う頻度が高いコントロールなので、この記事を参考にして使い方をマスターしておきましょう。...
【C#】DataGridViewの使い方をマスターしよう!基本的な操作まとめC#のDataGridViewで行の挿入、行の番号取得、列のソート、行の削除、列の幅を調整する方法など基本的なDataGridViewの使い方を紹介しています。DataGridViewはデータを表示する際に使う機会が多いコントロールなので使い方をマスターしておきましょう。...
プログラミングを学習したいなら…

プログラミングスキルを身に付けるなら、プログラミングを効率良く学べる
プログラミングスクール」がオススメです。

特にこんな方にオススメ!!
これからエンジニアを目指したい
プログラミングの専門性を高めたい
プログラミングを学んで副業をしたい
エンジニアに転職して年収をアップさせたい

プログラミングを触ったことがない未経験からでも、プログラミングスクールで学習すれば、エンジニアへ就職・転職することも可能です。

あなたの「行動力」と「やる気」で、あなたの人生を大きく変えるチャンスになることでしょう。

プログラミングスクールに興味がある方は是非チェックしてみてください。

> プログラミングを学ぶ <

COMMENT

メールアドレスが公開されることはありません。

CAPTCHA