簡単MVVM入門 with Prism

Prismを用いたMVVMの簡単なサンプルページが少なかったので勉強も兼ねて書いてみる。

MVVMとは、大規模なプログラムになってくるとコードビハインドにコードを書いてると魑魅魍魎と化してしまい、保守性が損なわれてしまうのでView+Model+ViewModelの三役でプログラムを制御できたらいいなってことで開発された技術である。多分WebフレームワークのMVCみたいなものである。.NET標準機能だけでMVVMを実装すると大変なのでLivetとかPrismみたいなMVVMフレームワークを用いるのが普通らしい。今回は足し算するだけのWPFアプリケーションを作ってみよう。

Prismの導入

NuGet経由で

Modelの実装

ここにはViewModel,Viewに書かれるべきでない処理を書いてやる。プログラムの大まかなロジックとかはここに書いてやれば良い。特筆することはない。

Model.cs

using System;
using System.Collections.Generic;
using System.Linq;
using System.Text;
using System.Threading.Tasks;

namespace Calclator.Model
{
    class Models
    {
        public double calc(double x, double y)
        {
            return x + y;
        }    
    }
}

VIewModelの実装

View,ViewModel間の状態変化を通知するのにINotifyPropertyChangedなるものを実装しないといけないのだが、.NET標準機能のみで実装すると面倒なのである。そこでPrismの出番である。BindableBaseというのが標準実装されていてこいつを使えば以下のように実装できる。コード中で実装されているDelegateCommandというやつはViewのボタンとデータバインディングしてやり処理を行う時に用いる。普通のMVVMならICommandとか実装してやらないとダメらしいけどここもPrismが頑張ってくれている。

ViewModel.cs

using System;
using System.Collections.Generic;
using System.Linq;
using System.Text;
using System.Threading.Tasks;
using Calclator.Model;
using Calclator.ViewModel;

using Microsoft.Practices.Prism.Commands;
using Microsoft.Practices.Prism.Mvvm;

namespace Calclator.ViewModel
{
    class ViewModels : BindableBase
    {
        public Models model;

        public ViewModels()
        {
            model = new Models();
        }

        private double _x;
        public double X
        {
            get { return _x; }
            set { SetProperty(ref _x, value); }
        }

        private double _y;
        public double Y
        {
            get { return _y; }
            set { SetProperty(ref _y, value); }
        }

        private double _ans;
        public double Ans
        {
            get { return _ans; }
            set { SetProperty(ref _ans, value); }
        }

        private DelegateCommand calcComamnd;
        public DelegateCommand calcCommand
        {
            get { return calcComamnd = calcComamnd ?? new DelegateCommand(calc); }
        }

        private void calc()
        {
            Ans = model.calc(X, Y);
        }
    }
}

Viewの実装

ツールボックスからTextBoxを3つ、ボタンを1つ並べてやり、TextBoxをそれぞれViewModelsのX,Y,Ansとデータバインディング、ButtonをcalcCommandとバインディングしてやる。コードビハインドにはInitializeComponent()の下にthis.DataContext = new ViewModels()とだけ書いてやれば良い。コードビハインドの行数の少なさ、これがMVVMの醍醐味と言えよう。(多分)