WPF MVVM简单介绍

最新推荐文章于 2024-08-17 09:00:00 发布

海蓝树

最新推荐文章于 2024-08-17 09:00:00 发布

阅读量270

点赞数

文章标签： wpf hadoop 大数据

原文链接：https://blog.csdn.net/hqwest/article/details/128433349

版权

引用地址：https://blog.csdn.net/hqwest/article/details/128433349

在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模式：

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，内容如下：

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

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

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"，运行结果，点击按钮时，不会有任何反应

这里我们点击更新按钮不会有任何反应，因为还没有实现数据绑定。此时视图不会收到任何的关于属性改变的通知。要解决这个问题我们必须实现名称为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;其他代码没有变，运行后，点击更新效果是：

这里说明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，其他都不要改

7、修改MVVMWindow1.xaml.cs代码，如图

8、运行程序，效果如下：

小结，我们在实际项目中应该使用后面定义基类的方式去实现属性的绑定，这才是对的。
————————————————
版权声明：本文为CSDN博主「hqwest」的原创文章，遵循CC 4.0 BY-SA版权协议，转载请附上原文出处链接及本声明。
原文链接：https://blog.csdn.net/hqwest/article/details/128433349