かるあ のメモ

MVVMでは、有名なMVC(Model-View-Controller)をベースに、バインド機能をより使いやすい形に変換したパターンになっています。

MVC、MVPの詳しい説明に関しては、猪股さんの解説が分かりやすいのでこちらへｗ。
⇒ http://matarillo.com/general/uipatterns.php

実はMVVMの考え方は、この中で解説されているアプリケーションモデルにとても似ています。MVVMでは、MVCが苦手としているModelのデータとViewのデータの同期と、Modeleがもつメソッドの呼び出しなどを、ViewからViewModelへのバインド経由で実行するといった形を取ります。
ViewModel経由でバインドされることで、ModelとViewModelはViewから切り離され、テストや分散開発がしやすい状況になるわけです。

■ 何はともあれ、最初のMVVMアプリケーション
まずはMVVMがどんなものかを理解するためにも、MVVM Light Toolkitを使わないで簡単なMVVMの更新処理を書いてみましょう。


    public class ユーザー
  {
       public int Id { get; set; }
       public string 名前 { get; set; }
       public string 郵便番号 { get; set; }
   }


public class UserViewModel: INotifyPropertyChanged
   {
       public UserViewModel()
       {
           if (ユーザー == null)
               ユーザー = new ユーザー();
       }

       #region プロパティー
       // Viewにバインドするため、ユーザーモデルをプロパティーとして公開する。
       private ユーザー _ユーザー;
       public ユーザー ユーザー
       {
           get { return _ユーザー; }
           set
           {
               if (ユーザー == value)
                   return;
               _ユーザー = value;
               RaisePropertyChange("ユーザー");
           }
       }
       #endregion

       #region INotifyPropertyChanged
       public event PropertyChangedEventHandler PropertyChanged;
       public void RaisePropertyChange(string propertyName)
       {
           if (PropertyChanged == null)
               return;
           PropertyChanged(this, new PropertyChangedEventArgs(propertyName));
       }
       #endregion

       #region コマンド
       // コマンド
       #endregion
   }

public class UserViewModel: INotifyPropertyChanged
   {
       public UserViewModel()
       {
           if (ユーザー == null)
               ユーザー = new ユーザー();

           OnSave = new RelayCommand(Save, parameter => true);
           OnLoad = new RelayCommand(Load, parameter => true);
       }

       #region プロパティー
       #endregion
       #region INotifyPropertyChanged
       #endregion

       #region コマンド
       public RelayCommand OnSave { get; private set; }
       public void Save(object parameter)
       {
           // 入力されたデータを表示する。
           // 実際はサービスの呼び出しを行ってデータをサーバー側に保存する。
           MessageBox.Show(string.Format(
                   "Id={0}\n名前={1}\n郵便番号={2}",
                   ユーザー.Id, ユーザー.名前, ユーザー.郵便番号));
       }

       public RelayCommand OnLoad { get; private set; }
       public void Load(object parameter)
       {
           // 固定データをユーザークラスにロードする。
           // 実際にはサービス経由でユーザーを検索する。
           ユーザー = new ユーザー
           {
               Id = 1,
               名前 = "かるあ",
               郵便番号 = "181-0013",
           };
       }
       #endregion
   }

<navigation:Page
   x:Class="PlaneMVVMApplication.Views.Hello.HelloView"
   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"
   mc:Ignorable="d"
   xmlns:navigation="clr-namespace:System.Windows.Controls;assembly=System.Windows.Controls.Navigation"
   xmlns:local="clr-namespace:PlaneMVVMApplication.Views.Hello"
   Title="HelloView Page">

   <UserControl.Resources>
       <local:UserViewModel x:Key="viewModel" />
   </UserControl.Resources>
   <Grid x:Name="LayoutRoot" DataContext="{StaticResource viewModel}" Height="120" Width="250">
   </Grid>
</navigation:Page>

   <Grid x:Name="LayoutRoot" DataContext="{StaticResource viewModel}" Height="120" Width="250">
       <!-- RowDefinitions, ColumnDefinitionsの定義 -->
       
       <TextBlock Text="Id" Grid.Column="0" Grid.Row="0" />
       <TextBlock Text="{Binding ユーザー.Id}" Grid.Column="1" Grid.Row="0" />
       
       <TextBlock Text="名前" Grid.Column="0" Grid.Row="1" />
       <TextBox Text="{Binding ユーザー.名前, Mode=TwoWay}" Grid.Column="1" Grid.Row="1"/>

       <TextBlock Text="郵便番号" Grid.Column="0" Grid.Row="2" />
       <TextBox Text="{Binding ユーザー.郵便番号, Mode=TwoWay}" Grid.Column="2" Grid.Row="2"/>

       <StackPanel Orientation="Horizontal" Grid.Column="1" Grid.Row="3">
           <Button Content="読み込み" Command="{Binding Path=OnLoad}" />
           <Button Content="保存" Command="{Binding Path=OnSave}"  />
       </StackPanel>
   </Grid>

Silverlight 3まではButtonコントロールはICommandインターフェイスを実装していなかったので、コマンドバインディングを使いたいときはMVVM Light ToolkitやPrismが提供するコマンドバインディングを利用する必要がありました。

   public class RelayCommand : ICommand
   {
       public event EventHandler CanExecuteChanged;
       private Func<object, bool> _canExecuteAction;
       private Action<object> _executeAction;

       public RelayCommand(Action<object> executeAction, Func<object, bool> canExecuteAction)
       {
           this._executeAction = executeAction;
           this._canExecuteAction = canExecuteAction;
       }

       public bool CanExecute(object parameter)
       {
           return _canExecuteAction(parameter);
       }

       public void Execute(object parameter)
       {
           _executeAction(parameter);
       }

       public void RaiseCanExecuteChanged()
       {
           if (CanExecuteChanged != null)
           {
               CanExecuteChanged(this, EventArgs.Empty);
           }
       }
   }