[转]WPF MVVM 实战

前言

MVVM 就是 Model – View – ViewModel 三组功能（类）分割的设计模式。废话不多说，不知道的自己上网查。

用 MVVM 我认为最大好处是能对 ViewModel 做单元测试。另外，MVVM 分工也比较明显，方便安排程序员分组分工进行项目，基本设计有了之后可以各自敲。

这样的话，写出来，类（class）最起码有三个。比如 Window1 作为 View，Window1ViewModel 作为 ViewModel，实际业务类比如 Sales Order 销售订单作为 Model。

View 不一定要是 System.Control.Window，UserControl 也可以，Page也行，总之，是 UI 用来显示用的。

常用基类

有两个基类，做 MVVM 你是几乎必定要有，不然写起来很麻烦，没效率：

  1. ViewModelBase
  2. RelayCommand / DelegateCommand

我以下所有代码都不会列这两个出来。

ViewModelBase 代码到处都是，随便 Google 一下抄下来，然后写 ViewModel 比如 Window1ViewModel 类时候，继承自 ViewModelBase 即可。它的主要作用，是提供 OnPropertyChange(string propertyName) 这方法，告诉视图 View 知道，值发生变化需要更新显示。

好的 ViewModelBase 设计，会加入 Conditional Attribute 让Debug 运行时检查 OnPropertyChanged 的参数值是否与属性名相同。

RelayCommand / DelegateCommand 代码也是到处都是，随便 Google 一下抄下来就是了。它是一个实现了 ICommand 接口的类。做命令的绑定，比如 Button 中的 Command 属性，绑定时它的类型要求是 ICommand 的东西。ICommand 比起点击事件优胜的地方是，ICommand 除了委托执行方法以外，还有一个 CanExecute 的委托，可以自动（呃，其实也需要 requery ） Enable / Disable 按钮。

要注意的杂项

初学的童鞋们有几点要注意：

  1. ICommand 一般不传参数，不是不可以，只是一般来说没必要。一切值都在 ViewModel 内的时候，你不用让 View 再告诉你什么新鲜事
  2. 一般来说一个 ViewModel 对一个 View，有可能一个 ViewModel 对两个 View，但不会一个 View 有多个 ViewModel
  3. WPF 的 PasswordBox 做不了绑定，据说是安全性原因，虽然这是灰常无聊加无奈，没办法，微软设计的。当然有办法可以越过，自己想想
  4. 不一定在 View 的背后代码一句都不写才叫做 MVVM，但操作数据的不会在 View 内出现，操作 View 的不会在 ViewModel 出现，这分工做不到的就尝不到 MVVM 的优点

示范

来个简单的示范：

View 部分

  1. <Window x:Class="WPF_Binding_Example.MainView"
  2.    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
  3.    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
  4.    Title="Window1" Height="300" Width="300">
  5.    
  6.     <Window.Resources>
  7.         <Style x:Key="myStyle" TargetType="StackPanel">
  8.             <Style.Triggers>
  9.                 <DataTrigger Binding="{Binding Path=Age}"
  10.                             Value="0">
  11.                     <Setter Property="Background"
  12.                            Value="Yellow"/>
  13.                 </DataTrigger>
  14.             </Style.Triggers>
  15.         </Style>
  16.         <DataTemplate x:Key="PersonTemplate">
  17.             <StackPanel Margin="2"
  18.                        Orientation="Horizontal"
  19.                        Style="{StaticResource myStyle}">
  20.                 <TextBlock Text="{Binding Name}"
  21.                           Width="50"/>
  22.                 <TextBlock Text="{Binding Age}"/>
  23.             </StackPanel>
  24.         </DataTemplate>
  25.     </Window.Resources>
  26.    
  27.     <Grid>
  28.         <ListView Margin="38,50,33,59"
  29.                  Name="listView1"
  30.                  ItemsSource="{Binding PersonList}"
  31.                  ItemTemplate="{StaticResource PersonTemplate}"
  32.                  />
  33.         <Button Command="{Binding AddRowCommand}"
  34.                Height="23"
  35.                Width="75"
  36.                HorizontalAlignment="Right"
  37.                Margin="0,0,11,10"
  38.                VerticalAlignment="Bottom"
  39.                Content="加一行" />
  40.     </Grid>
  41. </Window>

画这界面的同事，只需要知道三件事：

  1. ViewModel 内会有一个叫做 PersonList 的公共类集合（30 行），要用 ListView 显示，按内容做些样式
  2. PersonList 类集合内的单个对象，有两个公共属性，分别是 Name 和 Age （20、22行），但不需要知道实际是什么类
  3. ViewModel 内会有一个实现了 ICommand 接口的实例引用，名字是 AddRowCommand（33行）

然后，ViewModel 部分：

  1. using System.Collections.ObjectModel;
  2. using System.Windows.Input;
  3. using WPF_Binding_Example.Domain;
  4. using WPF_Binding_Example.Infrastructure;
  5.  
  6. namespace WPF_Binding_Example
  7. {
  8.     public class MainViewModel : ViewModelBase
  9.     {
  10.         public MainViewModel()
  11.         {
  12.             personList = new ObservableCollection<Person>();
  13.  
  14.             //演示用
  15.             Add_Dummy_Data();
  16.         }
  17.  
  18.         /// <summary>
  19.         /// 演示用
  20.         /// </summary>
  21.         private void Add_Dummy_Data()
  22.         {
  23.             PersonList.Add(
  24.                 new Person { Name = "张三", Age = 26 }
  25.                 );
  26.             PersonList.Add(
  27.                 new Person { Name = "李四", Age = 24 }
  28.                 );
  29.         }
  30.  
  31.         private ObservableCollection<Person> personList;
  32.         public ObservableCollection<Person> PersonList
  33.         {
  34.             get { return personList; }
  35.         }
  36.  
  37.         private RelayCommand addRowCommand;
  38.         public ICommand AddRowCommand
  39.         {
  40.             get
  41.             {
  42.                 if (addRowCommand == null)
  43.                 {
  44.                     addRowCommand =
  45.                         new RelayCommand(x => this.AddRow());
  46.                 }
  47.                 return addRowCommand;
  48.             }
  49.         }
  50.  
  51.         private void AddRow()
  52.         {
  53.             this.PersonList.Add(
  54.                 new Person { Name = "我是新人", Age = 0 }
  55.                 );
  56.         }
  57.     }
  58. }

负责这个类的同事，不需要知道界面的任何东西，这类的代码也非常简单。

ObservableCollection 在 System.Collections.ObjectModel 内，它与其他集合的分别是，集合有变化时，比如加减 Item 等，它会发出通知告诉视图。如果你有自己很有个性的 Collection，要做绑定的话，让它实现  INotifyCollectionChanged 和 INotifyPropertyChanged 即可。

RelayCommand 上面说了，是实现了 ICommand，所以出现了 44-47 行这样的写法。刚才说了 ICommand 还有个 CanExecute 的委托，这里没用到。RelayCommand 的设计是，构造函数参数只有一个方法委托时候，CanExecute 默认返回 True，即永远可执行。有空的自己看看 RelayCommand 的代码，不多，很容易看懂。

 

然后是 Model 部分

  1. namespace WPF_Binding_Example.Domain
  2. {
  3.     public class Person
  4.     {
  5.         private string name;
  6.         public string Name
  7.         {
  8.             get { return name; }
  9.             set
  10.             {
  11.                 if (value != name)
  12.                 {
  13.                     name = value;
  14.                 }
  15.             }
  16.         }
  17.  
  18.         private int age;
  19.         public int Age
  20.         {
  21.             get { return age; }
  22.             set
  23.             {
  24.                 if (value != age)
  25.                 {
  26.                     age = value;
  27.                 }
  28.             }
  29.         }
  30.     }
  31. }

 

View 连接 ViewModel

说了半天，除了 ViewModel 和 Model 在上面代码有点关系以外，View 不认识 ViewModel，ViewModel 不认识 View，怎样连在一起？

这样：

  1. using System.Windows;
  2.  
  3. namespace WPF_Binding_Example
  4. {
  5.     /// <summary>
  6.     /// Interaction logic for App.xaml
  7.     /// </summary>
  8.     public partial class App : Application
  9.     {
  10.         protected override void OnStartup(StartupEventArgs e)
  11.         {
  12.             base.OnStartup(e);
  13.             MainViewModel vm = new MainViewModel();
  14.             MainView view = new MainView();
  15.             view.DataContext = vm;
  16.             view.Show();
  17.         }
  18.     }
  19. }

初学的童鞋们请把 app.xaml 的 StartupUri 删除，然后在 App 类重写 OnStartup 方法，如上。

把 View 和 ViewModel 连在一起的，就一句 view.DataContext = vm;  有人会用 view 构造函数注入 ViewModel，也可以反过来在 ViewModel 构造函数注入 view，然后在 IoC 注册后直接 resolve 出来用，或者写在 XAML 内也行，但都离不开这一句 DataContext = vm。用哪种是看情况而定，我一般是在 VM 注入 V。

 

文章来源：http://www.cnblogs.com/leptonation/archive/2012/03/29/2422575.html

posted @ 2013-06-03 11:50  三叶草╮  阅读(294)  评论(0)  编辑  收藏  举报