一篇关于C#WPFMVVM实战与总结

OStack程序员社区-中国程序员成长平台 › 门户 › 编程› Node.js›Node.js教程

原作者: [db:作者] 来自: [db:来源] 收藏邀请

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

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

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

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

常用基类

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

ViewModelBase
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 按钮。

要注意的杂项

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

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

示范

来个简单的示范：

View 部分

<Window x:Class="WPF_Binding_Example.MainView"
    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
    Title="Window1" Height="300" Width="300">
   
    <Window.Resources>
        <Style x:Key="myStyle" TargetType="StackPanel">
            <Style.Triggers>
                <DataTrigger Binding="{Binding Path=Age}"
                             Value="0">
                    <Setter Property="Background"
                            Value="Yellow"/>
                </DataTrigger>
            </Style.Triggers>
        </Style>
        <DataTemplate x:Key="PersonTemplate">
            <StackPanel Margin="2"
                        Orientation="Horizontal"
                        Style="{StaticResource myStyle}">
                <TextBlock Text="{Binding Name}"
                           Width="50"/>
                <TextBlock Text="{Binding Age}"/>
            </StackPanel>
        </DataTemplate>
    </Window.Resources>
   
    <Grid>
        <ListView Margin="38,50,33,59"
                  Name="listView1"
                  ItemsSource="{Binding PersonList}"
                  ItemTemplate="{StaticResource PersonTemplate}"
                  />
        <Button Command="{Binding AddRowCommand}"
                Height="23"
                Width="75"
                HorizontalAlignment="Right"
                Margin="0,0,11,10"
                VerticalAlignment="Bottom"
                Content="加一行" />
    </Grid>

</Window>

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

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

然后，ViewModel 部分：

using System.Collections.ObjectModel; 

using System.Windows.Input; 

using WPF_Binding_Example.Domain; 

using WPF_Binding_Example.Infrastructure; 
 

namespace WPF_Binding_Example 
{ 
    public class MainViewModel : ViewModelBase
    { 
        public MainViewModel() 
        { 
            personList = new ObservableCollection<Person>(); 
 
            //演示用
            Add_Dummy_Data(); 
        } 
 
        ///<summary>
        /// 演示用
        ///</summary>
        private void Add_Dummy_Data() 
        { 
            PersonList.Add( 
                new Person { Name = "张三", Age = 26 } 
                ); 
            PersonList.Add( 
                new Person { Name = "李四", Age = 24 } 
                ); 
        } 
 
        private ObservableCollection<Person> personList; 
        public ObservableCollection<Person> PersonList 
        { 
            get { return personList; } 
        } 
 
        private RelayCommand addRowCommand; 
        public ICommand AddRowCommand 
        { 
            get
            { 
                if (addRowCommand == null) 
                { 
                    addRowCommand = 
                        new RelayCommand(x => this.AddRow()); 
                } 
                return addRowCommand; 
            } 
        } 
 
        private void AddRow() 
        { 
            this.PersonList.Add( 
                new Person { Name = "我是新人", Age = 0 } 
                ); 
        } 
    } 
}

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

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

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

然后是 Model 部分

namespace WPF_Binding_Example.Domain 
{ 
    public class Person
    { 
        private string name; 
        public string Name 
        { 
            get { return name; } 
            set
            { 
                if (value != name) 
                { 
                    name = value; 
                } 
            } 
        } 
 
        private int age; 
        public int Age 
        { 
            get { return age; } 
            set
            { 
                if (value != age) 
                { 
                    age = value; 
                } 
            } 
        } 
    } 
}

View 连接 ViewModel

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

这样：

using System.Windows; 
 

namespace WPF_Binding_Example 
{ 
    ///<summary>
    /// Interaction logic for App.xaml
    ///</summary>
    public partial class App : Application
    { 
        protected override void OnStartup(StartupEventArgs e) 
        { 
            base.OnStartup(e); 
            MainViewModel vm = new MainViewModel(); 
            MainView view = new MainView(); 
            view.DataContext = vm; 
            view.Show(); 
        } 
    } 
}

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

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

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