眠るシーラカンスと水底のプログラマー

MVVM概要

 

　MVVMはModel-View-ViewModelの略です。

　Web開発などでよく言われるModel-View-Controllなどと同じくアプリケーション設計のパターンの一つです。

　MVVMはXAMLベースの開発に適しています。

　(本記事では実装の方法を説明します。MVVMの考え方はMVVMパターンの常識 ― 「M」「V」「VM」の役割とは？などの記事を参考にしてください)

 

MVVM Light Toolkitを導入する

 

　MVVMの開発を補佐するツーとしてMVVM Light Toolkitをダウンロードします。

　MVVM Light ToolkitはSilverlight、Windows Phoneなどでもお馴染みのトールです。

 

　

 

　ページ右のダウロードからファイルをダウンロードします。

　ダウンロードしたファイル(現時点ではGalaSoft.MvvmLight.4.0.23.4.msi)を実行してインストールを開始します。

 

 

 

　インストールが終了すると各プラットフォームに合わせたファイルをインストールする案内ページが起動します。

　HTMLファイルを開く拡張子をエディタなどに指定していると以下の画像のようにエディタが起動します。

 

 

　この場合readme.htmlファイルは以下のディレクトリにありますので、ブラウザで開きましょう。

 

(64bitOSの場合)

C:\Program Files (x86)\Laurent Bugnion (GalaSoft)\Mvvm Light Toolkit

　readme.htmlから対応したファイルをダウンロードします。

　VisualStudio2012のエディションがPro以上なら、

 

Visual Studio 2012 Pro, Premium, Ultimate (Silverlight, WPF, WinRT)

 

　を、Expressエディションなら

 

Visual Studio Express 2012 for Windows 8 (Win8 only)

 

　をダウンロードします。

 

　

 

　ダウンロードされたファイルをインストールします。

 

プロジェクトを作成する

 

　VisualStudioを起動します。

　プロジェクト作成時にMvvmLght(Win8)が選択可能になっています。

 

 

　プロジェクトを作成します。

 

EventToCommandを利用する

 

　今回は作成されたプロジェクトからコマンドを呼び出してみます。

　XAMLベースの開発でデータバィンディングはXAMLコードとC#の値を紐づける便利な仕組みですが、イベントハンドラーなどのイベントはバインドできません。

　コマンドを使えばXAMLコードからViewMobelなどのバインドされたクラスのメソッドを呼び出すことができます。

 

　コマンドを利用するためにまずはWin8nlをインストールします。

 

　「表示」→「その他ウィンドウ」から「パッケージマネージャーコンソール」を表示します。

　パッケージマネージャーに以下のように打ち込みます。

 

PM> Install-Package Win8nl

 

　

 

　MvvmLght(Win8)の初期状態から始めることを想定しています。

　MainPage.xamlの上部に以下のコードを追加します。

 

      xmlns:WinRtBehaviors="using:WinRtBehaviors"
      xmlns:Win8nl_Behavior="using:Win8nl.Behaviors"

 

　当初から表示されているTextBlockコントロールを以下のように修正します。

 

        <TextBlock FontSize="56"
                   Text="{Binding WelcomeTitle}"
                   VerticalAlignment="Top"
                   HorizontalAlignment="Left"
                   FontFamily="Segoe UI Light" 
                   Margin="120,49,0,0"
        >
            <WinRtBehaviors:Interaction.Behaviors>
                <Win8nl_Behavior:EventToCommandBehavior
                    Event="PointerEntered"      
                    Command="sampleCommand"
                    CommandParameter="commandサンプル"
                />
            </WinRtBehaviors:Interaction.Behaviors>
        </TextBlock>

 

　TextBlockのPointerEnteredが起きた場合にバインドされたクラスのsampleCommandを呼び出します。

　CommandParameterとして値を渡している点にも注意しておきましょう。

 

　続いてバインドターゲットMainViewModel.csに呼び出し対象のコマンドを記述します。

 

        public ICommand sampleCommand
        {
            get
            {
                return new RelayCommand<string>(async (p) =>
                {
                    var msg = new MessageDialog(string.Format("コマンド呼び出し= {0}", p));
                    var result = await msg.ShowAsync();

                });
            }
        }

 

 　プログラムを実行するとマウスポインターが文字の上に乗るとコマンドが呼び出されます。