[ C# ] WPF で MVVM パターン開発 ( ビューとビューモデルの関係性 )

2017年5月8日まさお Comment

最近では、WPF アプリケーションと言えば「MVVM」と言われるくらいのようです（知りませんけどね）。ここでは、WPF アプリ開発を始めて行おうとした（結局やめた）記念に MVVM の「V：ビュー」と「VM：ビューモデル」の関係性についてサンプルコードを作成してみようと思います。

Prism Library のダウンロード

WPF で MVVM パターンでの開発を行うにあたり便利なライブラリがあるようですので、インストールします。今回は、ダウンロードしたファイルにある『 Microsoft.Practices.Prism.Mvvm.dll 』ファイルを参照設定で追加しています。

Download and Setup Prism Library 5.0 for WPF

どのようなことができるか詳細はわかりません

ビュー（.xaml）

今回使用するビューは次のようなにボタンとチェックボックスが1つずつある簡単なものを使用します。ビューのチェックボックスとボタンイベントをビューモデルのプロパティと連動させています。

<Window x:Class="WpfApplication1.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:WpfApplication1" 
        mc:Ignorable="d" 
        Title="MainWindow" Height="381" Width="525">

    <Grid Margin="0,0,0,273">
        <!-- Command 属性と ビューモデルの ClickComamnd プロパティを連動 -->
        <Button Height="40" Command="{Binding ClickCommand}" Content="ボタンクリック" />
        <!-- IsChecked 属性と ビューモデルの CheckValue プロパティを連動 -->
        <CheckBox Height="40" IsChecked="{Binding CheckValue}" Content="チェックボックスON/OFF" Margin="0,89,0,-63" />
    </Grid>
</Window>

ビューモデル

ビューモデルは普通のクラスファイルになります。詳細はコメントを参照ください。


using System;
using System.Collections.Generic;
using System.Linq;
using System.Text;
using System.Threading.Tasks;
using Microsoft.Practices.Prism.Mvvm;
using Microsoft.Practices.Prism.Commands;

namespace WpfApplication1
{
    /// ビューモデル
    class MainWindowViewModel : BindableBase
    {
        // クリックイベント時に連動する
        public DelegateCommand ClickCommand { get; private set; }

        public MainWindowViewModel()
        {
            // クリックイベント時の処理を登録
            this.ClickCommand = new DelegateCommand(Execute, CanExecute);
        }

        private bool checkValue = false;
        /// チェックボタンのON/OFFと連動
        public bool CheckValue
        {
            get
            {
                return checkValue;
            }
            private set
            {
                // チェックのOF/OFF時に呼び出される
                SetProperty(ref checkValue, value);
            }
        }

        // クリックイベントと連動
        private bool CanExecute()
        {
            // true リターンで Execute メソッドが実行される
            return true;
        }

        private void Execute()
        {
            // クリック時に呼び出される

            // 何か処理を記述する
        }
    }
}

ビューにビューモデルのインスタンスを設定

最後に、ビューモデルのインスタンスを生成し、ビューのコードビハインド（.cs）で DataContext に設定します。

    /// MainWindow.xaml の相互作用ロジック
    public partial class MainWindow : Window
    {
        public MainWindow()
        {
            InitializeComponent();
            // ビューにビューモデルのインスタンスを設定する
            this.DataContext = new MainWindowViewModel();
        }
    }

簡単なサンプルなので、じっくり読むことでどこで何をしているかが理解できると思います。

MVVM 開発も中途半端なレベルの人がやると、カオスになりそうな気配がします。MVVM だけに限った話ではありませんが・・・