MessengerでViewModelからViewに通知する

Messenger 前回までで、足し算プログラムの基本的な部分はできました。 ですが、例えば計算が終わったあと、ダイアログを表示する場合はどうでしょうか。 今ViewModelからViewへの通知はBindingのINotifyPropertyChangedしか方法がありません。 INotifyPropertyChangedではViewでダイアログを表示することは出来ないので別の方法が必要になります。 それがMessengerです。 Messengerは、ViewModelやModelからViewに通知したいときに一意の文字列とパラメータを渡してViewに通知を行うことができます。 計算終了をMessengerで通知する 通知を行うMessengerはMessenger.Defaultで取得することができます。 今回はMainViewModel.csのCalcCommandで計算が終わったとに、Messengerで通知を送ってみましょう。 CalcCommand = new RelayCommand(() => { //CalcCommandが呼び出された時、この中が実行されるので //Modelを使って処理を行う //足し算 SumModel.LaunchSum(); //MessengerでViewに通知する Messenger.Default.Send<int>(SumModel.Result,”CalcCompleteMessage”); }); Sendメソッドは送りたいメッセージのパラメータ、送りたいメッセージの一意の名前を引数としています。 ではMainPage.xaml.csのコンストラクタ内にMessengerのメッセージを受信する処理を書きましょう public sealed partial class MainPage : Page { public MainPage() { this.InitializeComponent(); Messenger.Default.Register<int>(this,”CalcCompleteMessage”, async result => { MessageDialog dialog = new MessageDialog(string.Format(“計算が完了しました。結果は{0}です”,result),”通知”); await dialog.ShowAsync(); }); } } Calcボタンをクリックすると計算結果がダイアログで表示されれば完成です。

Commandでユーザーの入力を検知する

Command MVVMにおいて、Viewで受け付けるユーザーからの入力(Buttonを押すなど)はCommandとしてViewModelで処理を行います。 CommandはICommandインターフェースを実装したクラスが必要となります。 MVVMLightToolkitではRelayCommandというクラスがあるのでこれをつかって、Commandを実装してきます。 Commadを実装するところは、ViewModelになります。 MainViewModel.csのメンバとして、RelayCommand型のCalcCommandを追加します。 //計算開始コマンド public RelayCommand CalcCommand { get; set; } 続いて、CalcCommandを初期化するために、コンストラクタで CalcCommandをnewします。そのとき、コンストラクタ引数としてActionをいれます。 そうすることで、そのCommandを実行した時、Action内が呼び出されます。 つまり、ViewからCommandが送られたら、Command内のActionを実行し、Action内部でModelを使って計算を行います。 CalcCommand = new RelayCommand(() => { //CalcCommandが呼び出された時、この中が実行されるので //Modelを使って処理を行う //足し算 SumModel.LaunchSum(); }); MainViewModel.csの全体はこのようになります。 public class MainViewModel : ViewModelBase { //Model private Sum sumModel; public Sum SumModel { get { return sumModel; } set { sumModel = value; RaisePropertyChanged(“SumModel”);…

Bindingでデータの疎結合を行う

Binding 前回、ViewとModelとViewModelのファイルの疎結合を行いました。 続いて足し算に用いるデータである1つめの値、2つめの値、1と2を足した結果の3つのint型のデータをBindingでViewと疎結合を行います。 Bindingについて知らない人はWindowsストアアプリプログラミングTipsのBindingの章を見てください。 まず、データBindingを行うには、Bindingしたいコントロール(3つのTextBox)のDataContextプロパティにBindingしたいデータ(Value1,Value2,Resut)を入れる必要があります。 今回の場合、TextBoxのDataContextは親コントロールであるPageクラスのDataContextと同じものになるので PageクラスのDataContextにMainViewModelを入れます。 MainPage.xamlのPageタグに名前空間を追加して、 xmlns:viewModel=”using:MvvmSample.ViewModel” DataContextプロパティにMainViewModelを入れます。 <!–DataContext–> <Page.DataContext> <viewModel:MainViewModel /> </Page.DataContext> 次に3つのTextBoxにBindingの構文を書きます。 今回DataContextはMainViewModelなのでBindingのPathはSumModel.Value1となります。 <Grid Background=”{ThemeResource ApplicationPageBackgroundThemeBrush}”> <TextBlock HorizontalAlignment=”Left” Margin=”108,126,0,0″ TextWrapping=”Wrap” Text=”Sum” VerticalAlignment=”Top” FontSize=”72″ FontFamily=”Segoe UI Light”/> <TextBlock HorizontalAlignment=”Left” Margin=”456,285,0,0″ TextWrapping=”Wrap” Text=”+” VerticalAlignment=”Top” FontSize=”72″ FontFamily=”Segoe UI Light”/> <TextBlock HorizontalAlignment=”Left” Margin=”825,285,0,0″ TextWrapping=”Wrap” Text=”=” VerticalAlignment=”Top” FontSize=”72″ FontFamily=”Segoe UI Light”/> <!–1番目の値–> <TextBox Text=”{Binding SumModel.Value1,Mode=TwoWay}” HorizontalAlignment=”Left”…

MVVMの基本的なプロジェクトを作る

Viewを作る 今回は単純な足し算をするプログラムをMVVMで作ります。 まず、ViewにあたるXAMLを作ります。 今回のViewは最初に作成されたMainPage.xamlを使います。 MainPage.xamlをこのようなページにしましょう。 1つめのたす値であるTextBoxと2つめのたす値であるTextBox、更に足した結果を表示するTextBox、 計算開始するButtonが設置されていれば大丈夫です。 XAMLはこのようにしました。 <Grid Background=”{ThemeResource ApplicationPageBackgroundThemeBrush}”> <TextBlock HorizontalAlignment=”Left” Margin=”108,126,0,0″ TextWrapping=”Wrap” Text=”Sum” VerticalAlignment=”Top” FontSize=”72″ FontFamily=”Segoe UI Light”/> <TextBox HorizontalAlignment=”Left” Margin=”180,318,0,0″ TextWrapping=”Wrap” VerticalAlignment=”Top” Width=”222″/> <TextBox HorizontalAlignment=”Left” Margin=”564,318,0,0″ TextWrapping=”Wrap” VerticalAlignment=”Top” Width=”222″/> <TextBox HorizontalAlignment=”Left” Margin=”909,318,0,0″ TextWrapping=”Wrap” VerticalAlignment=”Top” Width=”222″ IsReadOnly=”True”/> <TextBlock HorizontalAlignment=”Left” Margin=”456,285,0,0″ TextWrapping=”Wrap” Text=”+” VerticalAlignment=”Top” FontSize=”72″ FontFamily=”Segoe UI Light”/> <TextBlock HorizontalAlignment=”Left” Margin=”825,285,0,0″ TextWrapping=”Wrap” Text=”=”…

MVVMLightToolkitを導入する

MVVMLightToolkit MVVMを実現するには、ICommandインターフェースを実装したオリジナルのCommandクラスや、INotifyPropertyChanagedインターフェースを実装したりなど、 そこで、すでにいろいろな機能が実装されているMVVMLightToolkitを導入します。 その他のライブラリとしては、Livetなどが有名です。 MVVMLightToolkitはNugetからインストールできます。 参照設定を右クリック→[Nugetパッケージの管理]を押します。 検索ボックスに「mvvmlight」と入力し、検索してMVVMLightToolkitをインストールします。 これでプロジェクトにMVVMLightToolkitをインストールすることができました。