一、MVVM介绍

WPF是通过数据绑定来更新UI；在响应用户操作上，WPF使用命令绑定的方式来处理，降低了耦合度。

MVVM直观展现：

MVVM初步理解 - 图1

1、View就是用XAML实现的界面，负责与用户交互，接收用户输入，把数据展现给用户。

2、ViewModel是一个C#类，负责收集需要绑定的数据和命令，聚合Model对象，通过View类的DataContext属性绑定到View，同时也可以处理一些UI逻辑。

3、Model，就是系统中的对象，可以包含属性和行为。

三者之间的关系：View对应一个ViewModel，ViewModel可以聚合N个Model，ViewModel可以对应多个View。

二、MVVM的优势

MVVM的根本思想就是界面和业务功能进行分离，View的职责就是负责如何显示数据及发送命令，ViewModel的功能就是如何提供数据和执行命令。各司其职，互不影响。在实际的业务场景中我们经常会遇到客户对界面提出建议要求修改，使用MVVM模式开发，当设计的界面不满足客户时，我们仅仅只需要对View作修改，不会影响到ViewModel中的功能代码，减少了犯错的机会。随着功能地增加，系统越来越复杂，相应地程序中会增加View和ViewModel文件，将复杂的界面分离成局部的View，局部的View对应局部的ViewModel，功能点散落在各个ViewModel中，每个ViewModel只专注自己职能之内的事情。ViewModel包含了View要显示的数据，并且知道View的交互代码，所以ViewModel就像一个无形的View。 MVVM优势： ①易维护 ②灵活拓展 ③易测试 ④用户界面设计师与程序开发者能更好地合作

三、MVVM实例(初步理解)

以下示例并不是我们使用MVVM的正确方式。

  1. using System;
  2. using System.Collections.Generic;
  3. using System.Linq;
  4. using System.Text;
  5. using System.Threading.Tasks;
  7. namespace MVVM
  8. {
  9.     //这就是Model层
  10.     public class Name
  11.     {
  12.         #region Fields
  13.         private string _userName;
  14.         private string _companyName;
  15.         #endregion
  17.         #region Property
  18.         /// <summary>
  19.         /// 用户名
  20.         /// </summary>
  21.         public string UserName
  22.         {
  23.             get { return _userName; }
  24.             set { _userName = value; }
  25.         }
  26.         /// <summary>
  27.         /// 公司名
  28.         /// </summary>
  29.         public string CompanyName
  30.         {
  31.             get { return _companyName; }
  32.             set { _companyName = value; }
  33.         }
  34.         #endregion
  35.     }
  36. }
  1. using System;
  2. using System.Collections.Generic;
  3. using System.ComponentModel;
  4. using System.Linq;
  5. using System.Text;
  6. using System.Threading.Tasks;
  8. namespace MVVM
  9. {
  10.     //这就是ViewModel层,用来处理View层的逻辑
  11.     public class NameViewModel : INotifyPropertyChanged
  12.     {
  13.         public NameViewModel()
  14.         {
  15.             _userName = new Name() { UserName = "张三", CompanyName = "AAAAA" };
  16.         }
  18.         #region Fields
  19.         Name _userName;
  20.         #endregion
  22.         #region Property
  23.         public string UserName
  24.         {
  25.             get { return _userName.UserName; }
  26.             set { _userName.UserName = value; RaisePropertyChanged("UserName"); }
  27.         }
  29.         public string CompanyName
  30.         {
  31.             get { return _userName.CompanyName; }
  32.             set { _userName.CompanyName = value; RaisePropertyChanged("CompanyName"); }
  33.         }
  34.         #endregion
  36.         #region INotifyPropertyChanged属性
  37.         public event PropertyChangedEventHandler PropertyChanged;
  38.         #endregion
  40.         #region 属性更改方法
  41.         private void RaisePropertyChanged(string propertyName)
  42.         {
  43.             PropertyChangedEventHandler handler = PropertyChanged;
  44.             if(handler != null)
  45.             {
  46.                 handler(this, new PropertyChangedEventArgs(propertyName));
  47.             }
  48.         }
  49.         #endregion
  51.     }
  52. }
  1. <Window x:Class="MVVM.MainWindow"
  2.         xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
  3.         xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
  4.         xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
  5.         xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
  6.         xmlns:local="clr-namespace:MVVM"
  7.         mc:Ignorable="d"
  8.         Title="MainWindow" Height="450" Width="400">
  9.     <Window.DataContext>
  10.         <!--声明并创建一个NameViewModel的实例-->
  11.         <local:NameViewModel/>
  12.     </Window.DataContext>
  13.     <StackPanel VerticalAlignment="Center" Orientation="Horizontal">
  14.         <TextBlock Text="用户名：" Margin="20"/>
  15.         <TextBlock Text="{Binding UserName}" Margin="0,20"/>
  16.         <TextBlock Text="公司名称：" Margin="20"/>
  17.         <TextBlock Text="{Binding CompanyName}" Margin="0,20"/>
  18.         <Button Content="更新" Click="Update_Click" Margin="20"/>
  19.     </StackPanel>
  20. </Window>
  1. using System;
  2. using System.Collections.Generic;
  3. using System.Linq;
  4. using System.Text;
  5. using System.Threading.Tasks;
  6. using System.Windows;
  7. using System.Windows.Controls;
  8. using System.Windows.Data;
  9. using System.Windows.Documents;
  10. using System.Windows.Input;
  11. using System.Windows.Media;
  12. using System.Windows.Media.Imaging;
  13. using System.Windows.Navigation;
  14. using System.Windows.Shapes;
  16. namespace MVVM
  17. {
  18.     /// <summary>
  19.     /// MainWindow.xaml 的交互逻辑
  20.     /// </summary>
  21.     public partial class MainWindow : Window
  22.     {
  23.         /// <summary>
  24.         /// 视图模型
  25.         /// </summary>
  26.         NameViewModel _viewModel;
  28.         public MainWindow()
  29.         {
  30.             InitializeComponent();
  31.             //已经在XAML代码中声明了视图模型的实例，获取到引用，因此我们可以在按钮click事件里使用它
  32.             _viewModel = base.DataContext as NameViewModel;
  33.         }
  35.         private void Update_Click(object sender, RoutedEventArgs e)
  36.         {
  37.             _viewModel.UserName = "测试";
  38.             _viewModel.CompanyName = "HHHHH";
  39.         }
  40.     }
  41. }
  1. 实现效果：

运行后点击"更新"按钮后