一篇关于C# 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。

接下去会介绍怎样单元测试，和各种情景各种数据结构和控件，怎样用 MVVM 模式做绑定。下一篇，是采购订单做法的一个示例。