MVVM设计模式教程[一].手动建立MVVM地方法

随着WPF开发应用的普及.越来越多的人关注MVVM的构建. 这种设计模式能使逻辑与界面很彻底的解耦.为并行开发提供可能，在提高了开发效率的同时,使得程序更容易维护与修改

，而且这种设计模式可以更好的测试和更好的分离关注点,模块与模块的之间的耦合大幅度降低. 使得测试更加方便.

作为一个WPF 开发人员，很有必要了解MVVM.

MVVM 是由 Model, ViewModel View 组成. 他之所以能比MVC,MVP耦合度更低，取决于WPF 2个新出的重要概念.命令与数据绑定. 这2个使得完全解耦成为可能.

下面我们将有一个实例在演示下用MVVM 创建一个WPF应用实例

一首先让我们打开VisualStudio2010. 新建一个WPF项目.

实际工作中的MVVM 结构图.

根据上图我们先建立几个文件夹,为MVVM做准备.

二开始编写 Model层. 我们在Model层先添加一个类. Employee

代码如下

View Code

namespace MVVMDemo.Model
{
   public class Employee
    {
        public static Employee CreateEmployee(string name, string age)
        {
            return new Employee() { Name = name, Age = age };
        }
       
        public string Name { get; set; }

        public string Age { get; set; }
    }
}

然后我在数据层写下虚拟数据的加载创建一个类 . EmployeeRespository

代码如下

Respository.cs

using System.Collections.Generic;
using MVVMDemo.Model;

namespace MVVMDemo.DataAccess
{
   public class EmployeeRespository
   {
       readonly List<Employee> _employees;

       public EmployeeRespository()
       {
           if (_employees == null)
           {
               _employees = new List<Employee>();
           }
           _employees.Add(new Employee() { Age = "33", Name = "Tom" });
           _employees.Add(new Employee() { Age = "32", Name = "Gravin" });
           _employees.Add(new Employee() { Age = "28", Name = "Alex" });
       }

       public List<Employee> GetEmployeeRespository()
       {
           return _employees;
       }
   }
}

三编写我们的一个演示界面 View. 我们直接写在Mainwindow 的xaml里面

MainWindows.xaml

<Window x:Class="MVVMDemo.MainWindow"
        xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
        xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
        xmlns:vm="clr-namespace:MVVMDemo.ViewModel"
        Title="MainWindow" Height="Auto" Width="330">
    <Window.DataContext>
        <vm:MainWindowViewModel/>
    </Window.DataContext>
    <StackPanel>
        <ListBox ItemsSource="{Binding AllEmployees}" SelectedIndex="0" SelectedItem="{Binding SelectEmployee}">
            <ListBox.ItemTemplate>
                <DataTemplate>
                    <StackPanel Orientation="Horizontal">
                        <TextBlock Text="{Binding Name}" Margin="5"/>
                        <TextBlock Text="{Binding Age}" Margin="5"/>
                    </StackPanel>
                </DataTemplate>
            </ListBox.ItemTemplate>
        </ListBox>
        <StackPanel  Orientation="Horizontal">
            <TextBlock Text="Name" Margin="5,10"/>
            <TextBox Width="100" Margin="5,10" Text="{Binding NewEmployee.Name}"/>
            <TextBlock Text="Age" Margin="5,10"/>
            <TextBox Width="100" Margin="5,10" Text="{Binding NewEmployee.Age}"/>
        </StackPanel>
        <StackPanel  Orientation="Horizontal">
            <Button Content="ADD" Width="100" Margin="10" Command="{Binding AddCommand}"/>
            <Button Content="Remove" Width="100" Margin="10" Command="{Binding RemoveCommand}"/>
        </StackPanel>
      
    </StackPanel>
</Window>

现在界面和数据 Model都好了.. 我们来考虑下这个Demo的逻辑.

首先界面是个ListBox 用于加载 Employee里面的虚拟数据. 然后下面的2个文本框用于写入要添加新数据的Name信息与Age信息最下面的2个按钮传递操作,添加数据和移除数据. 如图.

添加数据要防止数据的重复. 移除数据是移除选中的一行. 现在我们用MVVM 来实现这个列子

前面说道 MVVM 之所以能够比MVC MVP更好的解耦 ,其原因是WPF 的2大新功能数据的绑定Data Binding和命令Command 这种机制使得逻辑与界面最大化的解耦

四我们开始编写ViewModel. 实际项目中通常我们会为ViewModel写个基类然后其余的对应View的ViewModel继承此基类

ViewModelBase 代码如下

ViewModelBase.cs

using System.Text;
using System.ComponentModel;

namespace MVVMDemo.ViewModel
{
  public abstract class ViewModelBase:INotifyPropertyChanged,IDisposable
  {
      protected ViewModelBase()
      { 
      
      }

      public event PropertyChangedEventHandler PropertyChanged;

      protected virtual void OnpropertyChanged(string propertyName)
      {
          PropertyChangedEventHandler handler = this.PropertyChanged;
         
          if (handler != null)
          {
              var e = new PropertyChangedEventArgs(propertyName);
              
              handler(this, e);
          }
      }


      public void Dispose()
      {
          this.OnDispose();
      }

      protected virtual void OnDispose()
      {
          throw new NotImplementedException();
      }


  }

}

ViewModel 其中一个非常常用的功能就对属性的变化能够即使反映到UI View. 这需要就是要继承一个接口 INotifyPropertyChanged

随后就是命令，我也同样编写一个命令的基类

CommandBase

using System;
using System.Windows.Input;

namespace MVVMDemo.Command
{
   public class CommandBase:ICommand
    {

        #region ICommand 成员

        public bool CanExecute(object parameter)
        {
           return _canExecute==null? true:_canExecute(parameter);
        }

        public event EventHandler CanExecuteChanged
        {
            add 
            { 
                CommandManager.RequerySuggested += value; 
            
            }
            remove
            {
                CommandManager.RequerySuggested -= value;
            }
        }

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

        #endregion

        readonly Action<object> _execute;

        readonly Predicate<object> _canExecute; 

        public CommandBase(Action<object> execute):this(execute,null)
        {

        }

        public CommandBase(Action<object> execute, Predicate<object> canExecute)
        {
            if (execute == null)
                throw new ArgumentNullException("execute");

            _execute = execute;
            _canExecute = canExecute;

        }

    }
}

命令有2个很重要的方法一个执行Execute 要做操作的内容一个CanExecute在操作前是否能执行改命令
这和好的用到了我们这个Demo的业务逻辑, 比如Add加入数据我们很容易想到 Execute中写具体加入数据的操作, 但是要避免录入的数据与原来数据源的数据重复

所以我们在条件 CanExecute中做出判断看是否能Add,

MainWindowViewModel代码如下

MainWindowViewModel.cs

using MVVMDemo.Model;
using System.Collections.ObjectModel;
using MVVMDemo.DataAccess;
using System.Windows.Input;
using MVVMDemo.Command;

namespace MVVMDemo.ViewModel
{
   public class MainWindowViewModel:ViewModelBase
   {
       private ICommand _removeCommand;

       private Employee _newEmployee;
       
       public ObservableCollection<Employee> AllEmployees { get; set; }

       public Employee SelectEmployee{get;set;}

       public Employee NewEmployee { get { return _newEmployee; } }

       public ICommand RemoveCommand
       {
           get { return _removeCommand = new CommandBase(RemoveExecute,RemoveCanExecute);}
       
       }
       public ICommand AddCommand
       {
           get { return _removeCommand = new CommandBase(AddExecute, AddCanExecute); }

       }
    
       public MainWindowViewModel()
       {
           if (AllEmployees == null)
           {
               AllEmployees = new ObservableCollection<Employee>(new EmployeeRespository().GetEmployeeRespository()); 
           }

           _newEmployee = new Employee();
       }

       void RemoveExecute(object param)
       {
           AllEmployees.Remove(SelectEmployee);
       } 

      bool RemoveCanExecute(object param)
      {
          if(SelectEmployee!=null)
          {
             return true;
          }
          
          return false;
      }

      void AddExecute(object param)
      {
          AllEmployees.Add(NewEmployee);
      }

      bool AddCanExecute(object param)
      {
          if (NewEmployee.Name != null && NewEmployee.Age != null)
          {
              foreach (var item in AllEmployees)
              {

                  if (item.Name.Trim() == NewEmployee.Name.Trim())
                  {
                      return false;
                  }
              }
          }
          else
          {
              return false;
          }
          return true;
      }   
   }
}

这样这个View'所有的逻辑都在这个文件里面了. 我们看看MainWindow中的UI元素. 现在可以很清楚感觉到MVVM的解耦. UI元素可以随时变换，在本质的业务逻辑不改变的情况下我们的 ViewModel是不需要更改的，这样设计师和工程师不但可以并行开发而且即使面对UI的变动逻辑基本不需要修改什么.

我们看看View 只要把ListBox 的itemsource绑定 MainWindowViewModel的数据源属性. 其他依次绑定里面的属性指定好数据源

DataContext.数据就能正确的Load出来. 按钮绑定ViewModel中的Command属性当填写的新数据信息不复合要求的时候 Button就会处于 Enabel状态. 非常方便

当我们把View UI（比如ListBox，Button，textbox）的内容随意删除编译一样不会报错因为逻辑中MainWindowViewModel并没有任何UI元素. 逻辑与界面解耦就是这个意思,而其他的设计模式多少会不可避免的与UI 纠缠在一起，UI一变化化逻辑势必变化.这一根本原因是

WPF的MVVM模式是数据驱动UI的理念. 数据变化呈现在UI上，而MVC MVP 以及以往的各种模式都是事件驱动UI 事件里必定有UI元素

当然这只是个小列子仅仅只是演示下MVVM的意思.

源代码下载 MVVMDemo

实际开发要注意的东西还很多. 相关内容我们会在以后的时间陆续更新.