本文主要是翻译Rachel Lim的一篇有关MVVM模式介绍的博文 A Simple MVVM Example
并具体给出了一个简单的Demo（原文是以WPF开发的，对于我自己添加的一部分会用红色标注）
现在开始：
在我看来，如果你使用的是WPF或Sliverlight来开发程序就应该使用MVVM设计模式。它是你的代码清晰明了并易于维护。
可问题是网上有很多有关MVVM模式的资源都有自己强大的实现方式。这里我将介绍最基础的MVVM设计模式的实现方法。
MVVM (是Model-View-ViewModel的缩写)
Model: 保存数据的简单类对象，它只能包含属性和属性验证（应该就是验证属性值是否正确），而不负责存储数据、事件点击、复杂运算、业务规则和其他操作。
View: 呈现给用户的数据界面，很多情况下，他是以数据模板（DataTemplates）的方式告诉应用如何呈现类中内容的。
如果代码内容只跟View有关（比如社交焦点和执行动画），可以将代码写在View的后台。
ViewModel:用来处理逻辑。你的后台代码（数据访问、点击事件、复杂运算、业务规则验证等）都写在这里。这里面的代码View的反应。
比如，View中有一个ListBox对象、选中的对象、保存按钮。ViewModel中就要包含ObservableCollection<Model>集合、
Mode类型的SelectedObject和命令ICommand SaveCommand.
下面就通过一个简单的例子看看这三者之间是如何相互联系的。你会发现除了属性和方法名，任意一者是不需要访问另外两者的。
一旦接口被定义了，每一层可以完全独立于其他运行。
此例中，我使用的是Product Model,这个类中只含有属性和属性更改通知(INotifyPropertyChanged)
1.Model
public class ProductModel : ViewModelBase
{
//字段
private int _productId;
private string _productName;
private decimal _unitPrice;
//属性
public int ProductId
{
get { return _productId; }
set
{
SetProperty(ref this._productId, value);
}
}
public string ProductName
{
get { return _productName; }
set
{
SetProperty(ref this._productName, value);
}
}
public decimal UnitPrice
{
get { return _unitPrice; }
set
{
SetProperty(ref this._unitPrice, value);
}
}
public ProductModel()
{
this.ProductName = "000000";
this.ProductId = 111111;
this.UnitPrice = 222222;
}
}
ProductModel继承了ViewModelBase类，而ViewModelBase实现了INotifyPropertyChanged接口
（ViewModelBase和原文不一样，只是简化了一下，具体可以查看 INotifyPropertyChanged接口的实现，介绍的很详细）
public class ViewModelBase : INotifyPropertyChanged
{
public event PropertyChangedEventHandler PropertyChanged;
public bool SetProperty<T>(ref T storage, T value, [CallerMemberName]string propertyName = null)
{
if (object.Equals(storage, value)) return false;
storage = value;
this.OnPropertyChanged(propertyName);
return true;
}
protected void OnPropertyChanged([CallerMemberName]string propertyName = null)
{
var eventHandler = this.PropertyChanged;
if (null != eventHandler)
{
eventHandler(this, new PropertyChangedEventArgs(propertyName));
}
}
}
注意：属性更改通知(INotifyPropertyChanged)：当Model中属性更改时，会通知View实时的更新View页面。
有人建议将这个放入ViewModel而不是Model中。虽然两种方式都是有效的，但是我发现放入ViewModel更加复杂，
还需要更多的代码。而放入Model中更简单些。
2.ViewModel
由于在创建View之前需要ViewModel，接下来我们就来创建ViewModel。它要包括用户操作所有的交互。
现在这里包括4个属性：CurrentProduct当前产品, 产品获取命令GetProductCommand,保存命令SaveProductCommand.用来查找某个产品的ProductId
public class ProductViewModel : ViewModelBase
{private int _productId;
private ProductModel _currentProduct;
private ICommand _getProductCommand;
private ICommand _saveProductCommand;public int ProductId
{
get { return _productId; }
set
{
SetProperty(ref this._productId, value);
}
}
public ProductViewModel() { CurrentProduct = new ProductModel(); }
public ProductModel CurrentProduct
{
get { return _currentProduct; }
set
{
if (null == _currentProduct)
_currentProduct = new ProductModel();
_currentProduct = value;
}
}public ICommand SaveProductCommand
{
get
{
if (_saveProductCommand == null)
{
_saveProductCommand = new RelayCommand(SaveProduct);
}
return _saveProductCommand;
}
}
public ICommand GetProductCommand
{
get
{
if (_getProductCommand == null)
_getProductCommand = new RelayCommand(GetProduct, IsEnable);
return _getProductCommand;
}
}public bool IsEnable() //此控件是否可点击
{
return true;
}
public void SaveProduct() //执行命令
{
await new MessageDialog("保存").ShowAsync();
}
public void GetProduct(object parameter) //public void GetProduct(object parameter) { if (parameter.ToString() == string.Empty) return; ProductId = int.Parse(parameter.ToString()); ProductModel product = new ProductModel(); product.ProductName = "Test Product"; product.ProductId = ProductId; product.UnitPrice = 10.00M; CurrentProduct = product; }
}
这里出现了一个新类RelayCommand，MVVM的正常使用必不可少。这个命令表示的是由其他类调用委托来实现此类中的代码
[在建立非空项目的时候Command文件夹会自动那个生成此类，但是本身只定义了不带参数的方法，需要进行扩展---注释部分]
public class RelayCommand : ICommand
{
private readonly Action _execute;
private readonly Func<bool> _canExecute;
private readonly Action<object> _executeParam; //新增了一个带参数有返回值的方法
public event EventHandler CanExecuteChanged;
public RelayCommand(Action execute)
: this(execute, null)
{
}
public RelayCommand(Action execute, Func<bool> canExecute)
{
if (execute == null)
throw new ArgumentNullException("execute");
_execute = execute;
_canExecute = canExecute;
}
public RelayCommand(Action<object> executeParam) //新增重载构造函数
{
if(executeParam == null)
throw new ArgumentNullException("executeParam");
_executeParam = executeParam;
_canExecute = () => true;
}
public RelayCommand(Action<object> executeParam, Func<bool> canExecute) //新增重载构造函数
{
if (executeParam == null)
throw new ArgumentNullException("executeParam");
_executeParam = executeParam;
_canExecute = canExecute;
}
public bool CanExecute(object parameter)
{
return _canExecute == null ? true : _canExecute();
}
public void Execute(object parameter) //新增判断
{
if (parameter == null)
_execute();
else
_executeParam(parameter);
}
public void RaiseCanExecuteChanged()
{
var handler = CanExecuteChanged;
if (handler != null)
{
handler(this, EventArgs.Empty);
}
}
}
3.View（可以认为是MainPage.xaml）
<StackPanel>
<StackPanel x:Name="stackpaenl1">
<TextBlock Text="{Binding CurrentProduct.ProductId}" Foreground="Yellow"/>
<TextBlock Text="{Binding CurrentProduct.ProductName}"/>
<TextBlock Text="{Binding CurrentProduct.UnitPrice}"/>
<TextBlock Text="Enter Product Id"/> <TextBox x:Name="Input"/> <TextBlock Text="{Binding ProductId}" Foreground="Yellow"/>
<Button Content="Get Product" Command="{Binding GetProductCommand}" CommandParameter="{Binding ElementName=Input, Path=Text}"/>
<Button Content="Save Product" Command="{Binding SaveProductCommand}"/>
</StackPanel>
</StackPanel>
最后在View.cs添加代码
ProductViewModel product = new ProductViewModel(); product.ProductId = 111; this.DataContext = product; //绑定错了的话 COMMAND是不会起作用的
以上就是简单的MVVM程序。
PS：下篇文章会接着本文
1.将添加Product集合，绑定到列表
2.给点击ListBox点击添加点击事件（要附加依赖属性，和Button点击事件不同）
3.通过自定义类以JSON获取保存数据到存储空间