ComboBoxとModelの連携

概要

WPF in C# with MVVM using Caliburn Microの40分50秒目あたりからを参考に、前回までのテキストボックスとViewModelの連携を踏襲し、ComboBoxとのバインディングを試す。

完成形

• 表示の値Keyと選択値Valueをもつコンボボックスをもつ単一ウィンドウアプリを作る。
• データ用のModelクラスを扱う。

Modelを追加する

今回も動画内容に沿って実装を行う。40分50秒めあたりからだけど、前回記事からの流れのまま開始するので、必要であれば参照のこと。

ModelsにPersonModelクラスを追加

ソリューションエクスプローラでModelsフォルダ下にクラスを追加。
中身は単に FirstNameとLastNameを保持するstringだけとする。

usingSystem;usingSystem.Collections.Generic;usingSystem.Linq;usingSystem.Text;usingSystem.Threading.Tasks;namespaceWPFtut01.Models{publicclassPersonModel{publicstringFirstName{get;set;}publicstringLastName{get;set;}}}

ViewModelを編集

選んだ際のComboBoxとデータをやりとりするBindableCollectionと。中身のPersonModelを追加する。
MVVMで紐づけられるように、単純なCollectionやDictionaryでなくBindableCollectionを使う模様。

privateBindableCollection<PersonModel>_people=newBindableCollection<PersonModel>();publicBindableCollection<PersonModel>People{get{return_people;}set{_people=value;}}privatePersonModel_selectedPerson;publicPersonModelSelectedPerson{get{return_selectedPerson;}set{_selectedPerson=value;NotifyOfPropertyChange(()=>SelectedPerson);}}

ComboBoxに入るグループは People とし、選択される個人名は SelectedPerson としている。

Modelのコンストラクタを作成

前回同様、VS2019上で 'ctor'とタイプし、タブキーを2回押すとsnippet展開される。
今回はPeopleにPersonを4人ぶんつっこんでみる。

publicShellViewModel(){People.Add(newPersonModel{FirstName="カタリナ",LastName="クラエス"});People.Add(newPersonModel{FirstName="マリア",LastName="キャンベル"});People.Add(newPersonModel{FirstName="メアリ",LastName="ハント"});People.Add(newPersonModel{FirstName="ソフィア",LastName="アスカルト"});}

ViewにComboBoxを追加する

ShellView.xamlにコメントを入れ、ここまで編集してきた内容を整理。
ComboBoxを追加し、x:NameにPeopleを指定し、次のようにSelectedItemをSelectedPersonをバインドする。

<ComboBoxGrid.Row="3"Grid.Column="1"x:Name="People"SelectedItem="{Binding Path=SelectedPerson, Mode=OneWayToSource}"DisplayMemberPath="FirstName"></ComboBox>

追加内容としては、選択だけなのでOneWayToSource。

ここまでの内容でテスト実行

ComboBoxにPeopleの内容が反映されるようになった。

選択Valueが表示されるようTextBlockを追加

<TextBlockGrid.Row="3"Grid.Column="2"x:Name="SelectedPerson_LastName"/>

x:Nameの値は、アンダースコア付きでプロパティ呼び出しになる（らしい）
ここまでの内容を実行すると完成形のとおりになる。

コンボボックスを変更すると、TextBlockが連動して変更されるようになる。

まとめ

• WinFormsなどのようにComboBoxの変更イベントを関数で作成するわけではない
• ComboBoxへ紐づけるオブジェクトはCaliburn.Microが用意しているBindableCollectionを使う
• 選択値の取得の アンダースコア付きプロパティとかは、ちゃんと公式ドキュメント等参照したい

次の記事：Buttonを使う