【C#】MVVMでのComboBoxの使い方【WPF】

C#(WPF)でコンボボックスを使う方法をサンプルプログラムありで紹介します。コンボボックスのItemsSourceとSelectedItemに要素をバインドすることで簡単に用いることができます。

コンボボックス(ComboBox)を使うメリット
サンプルプログラム(MVVM)
1. View
2. ViewModel

コンボボックス(ComboBox)を使うメリット

ユーザに入力を求める際に、自由な入力欄を設けてしまうと想定外な文字列などを入力されてしまい、不都合が生じる可能性があります。

このような問題は、コンボボックスのような選択式の入力欄を用意することで解決できます。

また同じ選択式であるラジオボタンやチェックボックスと比較しても、省スペースなメリットがあります。

サンプルプログラム(MVVM)

MVVM形式で作成しています。MVVMでない方もXAMLとViewModelを見れば参考になると思います。
MVVM形式プロジェクトのベースサンプルはこちら。

ソフトの動作としては、単語の中から一つを選ぶと動的にテキストが更新されるようになっています。

ポイントは、コンボボックスのItemsSource、SelectedItemに選択肢と選択された要素をバインドさせることです。

View

XAMLは以下の通り。

<Window x:Class="ComboBox00.Views.MainView"
        xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
        xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
        Title="ComboBox00" Height="100" Width="300">
    <Grid>
        <Grid.RowDefinitions>
            <RowDefinition Height="*" />
            <RowDefinition Height="*" />
            <RowDefinition Height="*" />
        </Grid.RowDefinitions>
        <Grid.ColumnDefinitions>
            <ColumnDefinition Width="*" />
            <ColumnDefinition Width="*" />
            <ColumnDefinition Width="*" />
        </Grid.ColumnDefinitions>

        <!--コンボボックス-->
        <ComboBox Grid.Row="0" Grid.Column="0" ItemsSource="{Binding TxtsArray}" SelectedItem="{Binding selectedtxt}"/>

        <TextBlock Grid.Row="1" Grid.Column="1" HorizontalAlignment="Center" Text="選択内容→→" />
        <!--選択内容-->
        <TextBlock Grid.Row="1" Grid.Column="2" Text="{Binding selectedtxt}" />

    </Grid>
</Window>

コードビハインドは以下の通り。

namespace ComboBox00.Views
{
    public partial class MainView : Window
    {
        public MainView()
        {
            InitializeComponent();

            MainViewModel vm = new MainViewModel();
            this.DataContext = vm;
        }
    }
}

ViewModel

コンボボックスの選択肢(ItemsSpurce)にバインドさせるのはstring配列(TxtsArray)で、選択された要素(SelectedItem)にバインドさせるのはstring(selectedtxt)です。

namespace ComboBox00.ViewModels
{
    public class MainViewModel:INotifyPropertyChanged
    {
        public MainViewModel()
        {
            //配列の初期値(Comboboxの選択肢)を設定する
            TxtsArray = new string[] { "C#", "Python", "Java" };
            //選択されているテキストを設定
            selectedtxt = TxtsArray[0];
        }


        //選択されている単語
        private string _selectedtxt;
        public string selectedtxt
        {
            get { return _selectedtxt; }
            set
            {
                _selectedtxt = value;
                NotifyPropertyChanged("selectedtxt");
            }
        }

        //選択されている単語
        private string[] _TxtsArray;
        public string[] TxtsArray
        {
            get { return _TxtsArray; }
            set
            {
                _TxtsArray = value;
                NotifyPropertyChanged("TxtsArry");
            }
        }


        public event PropertyChangedEventHandler PropertyChanged;
        private void NotifyPropertyChanged(String info)
        {
            if (PropertyChanged != null)
            {
                PropertyChanged(this, new PropertyChangedEventArgs(info));
            }
        }
    }
}

XAMLにコンボボックスの選択肢を記載する方法もありますが個人的にはこの手法が好みです。
データ要素はXAMLあまり記載したくないので。

以下はGUI関連記事。