WPFでComboBoxを実装する方法【書き方を解説】

.NET開発者のためのブログメディア

ComboBoxは、あらかじめ設定された項目のリストからユーザーに選択してもらうようにするためのコントロールです。ユーザー情報を入力してもらう場合などで、テキストボックスと並んで頻繁に利用することになるので、入力フォームを作成する際には、コードの書き方やデータの追加方法を押さえておきましょう。

SE: あらかじめ設定した項目からユーザーに選んでもらうようにするにはどうしたら良いですか？

PL: それならComboBoxがおすすめですね。データの追加方法も併せてみていきましょうか。

ComboBoxとは？

ComboBoxは、あらかじめ設定されている複数の項目から単一の選択肢をユーザーに選んでもらうために設置するものです。例えば、住所の都道府県や年齢層、性別などのユーザーの基本情報を入力してもらう場合によく使われます。WPFでは、XAMLを使ってComboBoxの大きさや、フォントを定義して、C#のコードからインスタンス化してデータの追加を行う形式で書かれるのが一般的です。

ComboBoxの実装方法

ComboBoxへのデータ追加方法は2種類あり、XAMLファイルにComboBoxの大きさやフォントなどを定義する点は共通です。addプロパティを使用して直接追加する方法と、データバインディングしてデータを追加する方法があります。WPFでは、一般的に後者がよく使われるようです。

直接アイテムを追加する方法

<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="450" Width="800">
    <Grid>
        <StackPanel>
            <ComboBox>
                <ComboBoxItem>1</ComboBoxItem>
                <ComboBoxItem>2</ComboBoxItem>
                <ComboBoxItem>3</ComboBoxItem>
            </ComboBox>
        </StackPanel>
    </Grid>
    
</Window>

<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="450" Width="800">

<Grid>

</ComboBox>

</StackPanel>

</Grid>

</Window>

using System.Windows.Input;
using System.Windows.Media;
using System.Windows.Media.Imaging;
using System.Windows.Navigation;
using System.Windows.Shapes;

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

using System.Windows.Input;

using System.Windows.Media;

using System.Windows.Media.Imaging;

using System.Windows.Navigation;

using System.Windows.Shapes;

namespace WpfApp1

{

public partial class MainWindow : Window

{

public MainWindow()

{

InitializeComponent();

}

実行結果

このコードでは、コンボボックスに対して直接表示するアイテムを追加して表示しています。

データバインディングして表示する方法

<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="450" Width="800">
    <Grid>
        <StackPanel>
            <ComboBox ItemsSource="{Binding Test_Dic}" SelectedValuePath="Key" DisplayMemberPath="Value"/>
        </StackPanel>
    </Grid>
</Window>