WPF真入门教程23--MVVM简单介绍-Toy模板网

这篇具有很好参考价值的文章主要介绍了WPF真入门教程23--MVVM简单介绍。希望对大家有所帮助。如果存在错误或未考虑完全的地方，请大家不吝赐教，您也可以点击"举报违法"按钮提交疑问。

　　在WPF开发中，经典的编程模式是MVVM，是为WPF量身定做的模式，该模式充分利用了WPF的数据绑定机制，最大限度地降低了Xmal文件和CS文件的耦合度，也就是UI显示和逻辑代码的耦合度，如需要更换界面时，逻辑代码修改很少，甚至不用修改。与WinForm开发相比，我们一般在后置代码中会使用控件的名字来操作控件的属性来更新UI，而在WPF中通常是通过数据绑定来更新UI；在响应用户操作上，WinForm是通过控件的事件来处理，而WPF可以使用命令绑定的方式来处理，耦合度将降低，WPF技术的主要特点是数据驱动UI,所以在使用WPF技术开发的过程中是以数据为核心的，WPF提供了数据绑定机制，当数据发生变化时，WPF会自动发出通知去更新UI。本教程的第15到19简单介绍了数据绑定的简单应用

一、MVVM介绍

　　MVVM是Model-View-ViewModel（模型-视图-视图模型）的缩写形式，它通常被用于WPF或Silverlight开发。我们可以通过下图来直观的理解MVVM模式：

wpf进阶之mvvm教程,WPF真入门教程,wpf,ui

1、View就是xaml界面，也就是那个扩展名为xaml的文件，它负责与用户交互，接收用户输入，把数据展现给用户。

2、ViewModel就是一个C#类，负责收集需要绑定的数据和命令，通过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的交互代码，使用MVVM架构具有以下优势：

1、易维护 2、灵活扩展 3、易测试 4、用户界面设计师与程序开发者能更好的合作

三、MVVM简单示例

1、在项目的model文件创建类Emp及EmpViewModel，内容如下：

wpf进阶之mvvm教程,WPF真入门教程,wpf,ui

注意这个EmpViewModel叫“视图模型”，通过数据绑定将它们绑在一起，它真的是一个很好的适配器能将模型变成某种WPF框架可以使用的东西。所以这个就是MVVM中的VM，而Emp是M，同在缺少V。

2、在control文件夹中添加窗口MVVMWindow1.xaml，具体内容如下：

<Window x:Class="WpfApp6.control.MVVMWindow1"
        xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
        xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
        xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
        xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
        xmlns:local="clr-namespace:WpfApp6.control"
        xmlns:vm="clr-namespace:WpfApp6.model"
        mc:Ignorable="d"
        Title="MVVM简单介绍" Height="450" Width="800">
    <!--窗口的上下文声明一个EmpViewModel的实例,前面必须定义vm这个命名空间-->
    <Window.DataContext>
        <vm:EmpViewModel></vm:EmpViewModel>
    </Window.DataContext>
    <Window.Resources>
        <!--声明样式-->
        <Style x:Key="st1">
            <Setter Property="Control.FontSize" Value="17"></Setter>
        </Style>
    </Window.Resources>
    <Grid  Style="{StaticResource st1}" >
        <Button  Content="更新" HorizontalAlignment="Left" Margin="180,256,0,0" VerticalAlignment="Top" Width="145" Click="Button_Click"/>
        <Label Content="用户：" HorizontalAlignment="Left" Margin="112,110,0,0" VerticalAlignment="Top" RenderTransformOrigin="7.256,0.582"/>
        <!--Binding绑定视图模型中的UserName和CompanyName-->
        <TextBox  HorizontalAlignment="Left" Height="23" Margin="205,110,0,0" TextWrapping="Wrap" Text="{Binding UserName}" VerticalAlignment="Top" Width="120"/>
        <TextBox HorizontalAlignment="Left" Height="23" Margin="555,110,0,0" TextWrapping="Wrap" Text="{Binding CompanyName}" VerticalAlignment="Top" Width="120"/>
        <Label Content="公司：" HorizontalAlignment="Left" Margin="393,110,0,0" VerticalAlignment="Top"/>

    </Grid>
</Window>

3、MVVMWindow1.xaml.cs后台代码：

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.Shapes;
using WpfApp6.model;

namespace WpfApp6.control
{
    /// <summary>
    /// MVVMWindow1.xaml 的交互逻辑
    /// </summary>
    public partial class MVVMWindow1 : Window
    {
        EmpViewModel empvm ;
        public MVVMWindow1()
        {
            InitializeComponent();
           empvm = base.DataContext as EmpViewModel;
        }
        /// <summary>
        /// 单击按钮
        /// </summary>
        /// <param name="sender"></param>
        /// <param name="e"></param>
        private void Button_Click(object sender, RoutedEventArgs e)
        {
            empvm.UserName = "欧阳克";
            empvm.CompanyName = "华山庄";
        }
    }
}

4、启动程序，记得将项目启动文件App.xaml中的启动项改为 StartupUri="control/MVVMWindow1.xaml"，运行结果，点击按钮时，不会有任何反应

wpf进阶之mvvm教程,WPF真入门教程,wpf,ui

这里我们点击更新按钮不会有任何反应，因为还没有实现数据绑定。此时视图不会收到任何的关于属性改变的通知。要解决这个问题我们必须实现名称为INotifyPropertyChanged的接口。任何实现了这个接口的类，当属性发生改变的时候会通知所有监听者，所以我们需要修改视图模型NameViewModel类，完整代码是:

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

namespace WpfApp6.model
{
    /// <summary>
    /// 页面视图模型，实现INotifyPropertyChanged接口
    /// </summary>
    public class EmpViewModel:INotifyPropertyChanged
    {
        //构造方法
        public EmpViewModel()
        {
            emp = new Emp() { UserName = "杨康", CompanyName = "上海金财" };
        }
        //私有字段 
        private Emp emp;
        //公共属性
        public string UserName
        {
            get { return emp.UserName; }
            set { emp.UserName = value;RaisePropertyChanged("UserName"); }
        }
        // 属性值发生更改时触发的属性
        public event PropertyChangedEventHandler PropertyChanged; 
        //属性更改方法
        private void RaisePropertyChanged(string propertyName)
        { 
            if (PropertyChanged != null)
            {
                PropertyChanged.Invoke(this, new PropertyChangedEventArgs(propertyName));
            }
        }

        public string CompanyName
        {
            get { return emp.CompanyName; }
            set { emp.CompanyName = value; RaisePropertyChanged("CompanyName"); }
        }
    }
}

注意视图模型类实现了INotifyPropertyChanged接口，即通知属性更改，每个属性中增加了代码RaisePropertyChanged，这个方法就是属性更改时的方法，并且定义了一个事件属性，即public event PropertyChangedEventHandler PropertyChanged;其他代码没有变，运行后，点击更新效果是： wpf进阶之mvvm教程,WPF真入门教程,wpf,ui

wpf进阶之mvvm教程,WPF真入门教程,wpf,ui

这里说明UI同步更新了，关键在于INotifyPropertyChanged，但是上面的方法还有不足，那就是假如有多个model需要设置属性更改，那工作量是蛮麻烦和巨大的，这里需要改进方法，定义一个基类，让基类实现INotifyPropertyChanged，让用户类继续基类，具体操作是：

5、在model中添加类ViewModelBase，代码是：

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

namespace WpfApp6.model
{
    /// <summary>
    /// 模型视图其类
    /// </summary>
    public class ViewModelBase : INotifyPropertyChanged
    {
        /// <summary>
        /// 属性值发生更改时触发
        /// </summary>
        public event PropertyChangedEventHandler PropertyChanged;
        /// <summary>
        /// 执行更改
        /// C#5.0中的新特性CallerMemberName
        /// </summary>
        /// <param name="propertyName"></param>
        protected void OnPropertyChanged([CallerMemberName] string propertyName = "")
        {
            if (PropertyChanged != null)
            {
                PropertyChanged.Invoke(this, new PropertyChangedEventArgs(propertyName));
            }
        }
    }
}

6、在model创建另一个类，EmpViewModel2，代码是：

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

namespace WpfApp6.model
{
    /// <summary>
    /// 继承基类ViewModelBase
    /// </summary>
    public class EmpViewModel2:ViewModelBase
    {
        public EmpViewModel2()
        {
            emp = new Emp() { UserName = "杨康", CompanyName = "上海金财" };
        }
        //私有字段 
        private Emp emp;
        //公共属性
        public string UserName
        {
            get { return emp.UserName; }
            set { 
                emp.UserName = value; 
                OnPropertyChanged(); 
            }
        }
        public string CompanyName
        {
            get { return emp.CompanyName; }
            set { 
                emp.CompanyName = value; 
                OnPropertyChanged(); 
            }
        }
    }
}

6、修改MVVMWindow1.xaml文件的一个地方，即改成以下内容，表示现在窗口的上下文使用EmpViewModel2，也就是上面第5步的视图模型，而不是原来的EmpViewModel，其他都不要改

wpf进阶之mvvm教程,WPF真入门教程,wpf,ui