WPF简单MVVM实现

1. MVVM介绍：

MVVM就是: Model -- 模型（现实中对象的抽象）

View -- UI（用户界面）

　　　　　　　ViewModel -- UI界面的抽象（给View提供数据，并响应View的操作）

2. 关键是要能准确的进行ViewModel的建模,处理好View与ViewModel之间的关系

2.1. 只有2种关系：

数据传递 --- 双向，使用Binding实现；

操作传递 --- 单向（只从View传递给ViewModel），使用命令Command实现；

3. 开始

3.1. 首先创建NotificationObject,它是所以ViewModel的基类

因为要使用Binding，而ViewModel就充当数据源的角色，而要实现当值有变化时会自动响应，就必须实现INotifyPropertyChanged接口，代码如下：

 using System;
 using System.Collections.Generic;
 using System.ComponentModel;
 using System.Linq;
 using System.Text;
 using System.Threading.Tasks;

 namespace MVVMTest.ViewModels
 {
     public class NotificationObject:INotifyPropertyChanged
     {
         public event PropertyChangedEventHandler PropertyChanged;

         public void RaisePropertyChanged(string property)
         {
             if (this.PropertyChanged != null)
                 this.PropertyChanged.Invoke(this, new PropertyChangedEventArgs(property));

         }
     }
 }

3.2.接着要创建DelegateCommand，实现了ICommand接口，用来处理View发送到ViewModel的命令，代码如下：

 using System;
 using System.Collections.Generic;
 using System.Linq;
 using System.Text;
 using System.Threading.Tasks;
 using System.Windows.Input;

 namespace MVVMTest.Commands
 {
     public class DelegateCommand:ICommand
     {
         public bool CanExecute(object parameter)
         {
             if (this.CanExecuteFunc == null)
             {
                 return true;
             }

              return this.CanExecuteFunc(parameter);
         }

         public event EventHandler CanExecuteChanged;

         public void Execute(object parameter)
         {
             if (this.ExecuteAction == null)
             {
                 return;
             }
             this.ExecuteAction(parameter);
         }

         public Action<object> ExecuteAction { get; set; }
         public Func<object, bool> CanExecuteFunc { get; set; }
     }
 }

3.3.为了方便开发，这里推荐自定义一个code snippet(代码块)：

放到此目录下C:\Program Files (x86)\Microsoft Visual Studio 12.0\VC#\Snippets\1033\Visual C#

 <?xml version="1.0" encoding="utf-8" ?>
 <CodeSnippets  xmlns="http://schemas.microsoft.com/VisualStudio/2005/CodeSnippet">
     <CodeSnippet Format="1.0.0">
         <Header>
             <Title>propn</Title>
             <Shortcut>propn</Shortcut>
             <Description>Code snippet for NotificationObject property and backing field</Description>
             <Author>Microsoft Corporation</Author>
             <SnippetTypes>
                 <SnippetType>Expansion</SnippetType>
             </SnippetTypes>
         </Header>
         <Snippet>
             <Declarations>
                 <Literal>
                     <ID>type</ID>
                     <ToolTip>Property type</ToolTip>
                     <Default>int</Default>
                 </Literal>
                 <Literal>
                     <ID>property</ID>
                     <ToolTip>Property name</ToolTip>
                     <Default>MyProperty</Default>
                 </Literal>
                 <Literal>
                     <ID>field</ID>
                     <ToolTip>The variable backing this property</ToolTip>
                     <Default>myVar</Default>
                 </Literal>
             </Declarations>
             <Code Language="csharp"><![CDATA[private $type$ $field$;

     public $type$ $property$
     {
         get { return $field$;}
         set {
             $field$ = value;
             this.RaisePropertyChanged("$property$");
         }
     }
     $end$]]>
             </Code>
         </Snippet>
     </CodeSnippet>
 </CodeSnippets>

3.4. 由于这个例子较简单，所以没有设计到Model的设计，而直接到ViewModel的设计，一般的规则是每个View就有一个对应的ViewModel，而ViewModel是充当View的数据源的，所以只需要考虑View需要什么数据、含有哪些操作，创建MainWindow的ViewModel，MainWindowViewModel,代码如下：

 using MVVMTest.Commands;
 using System;
 using System.Collections.Generic;
 using System.Linq;
 using System.Text;
 using System.Threading.Tasks;

 namespace MVVMTest.ViewModels
 {
     public class MainWindowViewModel:NotificationObject
     {
         private string txt1;

         public string Txt1
         {
             get { return txt1; }
             set
             {
                 txt1 = value;
                 this.RaisePropertyChanged("Txt1");
             }
         }

         private string txt2;

         public string Txt2
         {
             get { return txt2; }
             set
             {
                 txt2 = value;
                 this.RaisePropertyChanged("Txt2");
             }
         }

         private string result;

         public string Result
         {
             get { return result; }
             set
             {
                 result = value;
                 this.RaisePropertyChanged("Result");
             }
         }

         public DelegateCommand ConcatCommand { get; set; }
         public void Concat(object parameter)
         {
             Result = Txt1 + " and " + Txt2;
         }

         public MainWindowViewModel()
         {
             ConcatCommand = new DelegateCommand();
             ConcatCommand.ExecuteAction = new Action<object>(Concat);
         }

     }
 }

3.4.将ViewModel作为数据源赋值给View的DataContext

 using MVVMTest.ViewModels;
 using System;
 using System.Collections.Generic;
 using System.Linq;
 using System.Text;
 using System.Threading.Tasks;
 using System.Windows;
 using System.Windows.Controls;
 using System.Windows.Data;
 using System.Windows.Documents;
 using System.Windows.Input;
 using System.Windows.Media;
 using System.Windows.Media.Imaging;
 using System.Windows.Navigation;
 using System.Windows.Shapes;

 namespace MVVMTest
 {
     /// <summary>
     /// Interaction logic for MainWindow.xaml
     /// </summary>
     public partial class MainWindow : Window
     {
         public MainWindow()
         {
             InitializeComponent();
             this.DataContext = new MainWindowViewModel();
         }
     }
 }

3.5.在View中绑定数据：

 <Window x:Class="MVVMTest.MainWindow"
         xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
         xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
         Title="MainWindow" Height="" Width="">
     <Grid>
         <TextBox Margin="40,51,311,216" Text="{Binding Txt1}"/>
         <TextBox Margin="230,51,114,216" Text="{Binding Txt2}"/>
         <TextBox Margin="128,152,176,139" Text="{Binding Result}"/>
         <Button Margin="313,241,64,23" Command="{Binding ConcatCommand}"/>
     </Grid>
 </Window>

源代码：http://yunpan.cn/c3c7AAXm4U2dP  访问密码 8788