深入理解WPF中MVVM的设计思想

2023-09-18 22:22:25

近些年来，随着WPF在生产，制造，工业控制等领域应用越来越广发，很多企业对WPF开发的需求也逐渐增多，使得很多人看到潜在机会，不断从Web，WinForm开发转向了WPF开发，但是WPF开发也有很多新的概念及设计思想，如：数据驱动，数据绑定，依赖属性，命令，控件模板，数据模板，MVVM等，与传统WinForm，ASP.NET WebForm开发，有很大的差异，今天就以一个简单的小例子，简述WPF开发中MVVM设计思想及应用。

为什么要用MVVM?

传统的WinForm开发，一般采用事件驱动，即用户点击事件，触发对应的事件，并在事件中通过唯一标识符获取页面上用户输入的数据，然后进行业务逻辑处理。这样做会有一个弊端，就是用户输入(User Interface)和业务逻辑(Business)是紧密耦合在一起的，无法做到分离，随着项目的业务不断复杂化，这种高度耦合的弊端将会越来越明显。并且会出现分工不明确(如：后端工程师，前端UI)，工作无法拆分的现象。所以分层(如：MVC，MVVM)，可测试(Unit Test)，前后端分离，就成为必须要面对的问题。而今天要讲解的MVVM设计模式，就非常好的解决了我们所面临的问题。

什么是MVVM?

MVVM即模型(Model)-视图(View)-视图模型(ViewModel) ，是用于解耦 UI 代码和非 UI 代码的 设计模式。 借助 MVVM，可以在 XAML 中以声明方式定义 UI，将 UI使用数据绑定标到包含数据和命令的其他层。 数据绑定提供数据和结构的松散耦合，使 UI 和链接的数据保持同步，同时可以将用户输入路由到相应的命令。具体如下图所示：

如上图所示：

  1. View(用户页面)，主要用于向使用者展示信息，并接收用户输入的信息（数据绑定），及响应用户的操作（Command）。
  2. ViewModel(用户视图业务逻辑)，主要处理客户请求，以及数据呈现。
  3. Model数据模型，作为存储数据的载体，是一个个的具体的模型类，通过ViewModel进行调用。但是在小型项目中，Model并不是必须的。
  4. IService(数据接口)，数据访问服务，用于获取各种类型数据的服务。数据的形式有很多种，如网络数据，本地数据，数据库数据，但是在ViewModel调用时，都统一封装成了Service。在小型项目中，IService数据接口也并不是必须的，不属于MVVM的范畴。
  5. 在上图中，DataBase,Network，Local等表示不同的数据源形式，并不属于MVVM的范畴。

前提条件

要实现MVVM，首先需要满足两个条件：

  1. 属性变更通知，在MVVM思想中，由WinForm的事件驱动，转变成了数据驱动。在C#中，普通的属性，并不具备变更通知功能，要实现变更通知功能，必须要实现INotifyPropertyChanged接口。
  2. 绑定命令，在WPF中，为了解决事件响应功能之间的耦合，提出了绑定命令思想，即命令可以绑定的方式与控件建立联系。绑定命令必须实现ICommand接口。

在上述两个条件都满足后，如何将ViewModel中的具备变更通知的属性和命令，与View中的控件关联起来呢？答案就是绑定(Binding)。

当View层的数据控件和具备通知功能的属性进行Binding后，Binging就会自动侦听来自接口的PropertyChanged事件。进而达到数据驱动UI的效果，可谓【一桥飞架南北，天堑变通途】。

MVVM实例

为了进一步感受MVVM的设计思想，验证上述的理论知识，以实例进行说明。本实例的项目架构如下所示：

MVVM核心代码

1. 具备通知功能的属性

首先定义一个抽象类ObservableObject，此接口实现INotifyPropertyChanged接口，如下所示：

using System.ComponentModel;
using System.Runtime.CompilerServices;
 
namespace DemoMVVM.Core
{
    /// <summary>
    /// 可被观测的类
    /// </summary>
    public abstract class ObservableObject : INotifyPropertyChanged
    {
        /// <summary>
        /// 属性改变事件
        /// </summary>
        public event PropertyChangedEventHandler? PropertyChanged;
 
        /// <summary>
        /// 属性改变触发方法
        /// </summary>
        /// <param name="propertyName">属性名称</param>
        protected void RaisePropertyChanged([CallerMemberName]string propertyName=null)
        {
            PropertyChanged?.Invoke(this, new PropertyChangedEventArgs(propertyName));
        }
 
        /// <summary>
        /// 设置属性值，如果发生改变，则调用通知方法
        /// </summary>
        /// <typeparam name="T"></typeparam>
        /// <param name="target"></param>
        /// <param name="value"></param>
        /// <param name="propertyName"></param>
        /// <returns></returns>
        protected bool SetProperty<T>(ref T target,T value, [CallerMemberName] string propertyName = null)
        {
            if (EqualityComparer<T>.Default.Equals(target, value))
            {
                return false;
            }
            else
            {
                target=value;
                RaisePropertyChanged(propertyName);
                return true;
            }
        }
    }
}

 

注意：上述SetProperty主要用于将普通属性，变为具备通知功能的属性。

然后定义一个ViewMode基类，继承自ObservableObject，以备后续扩展，如下所示：

namespace DemoMVVM.Core
{
    /// <summary>
    /// ViewModel基类，继承自ObservableObject
    /// </summary>
    public abstract class ViewModelBase:ObservableObject
    {
 
    }
}

 

2. 具备绑定功能的命令

首先定义一个DelegateCommand，实现ICommand接口，如下所示：

namespace DemoMVVM.Core
{
    public class DelegateCommand : ICommand
    {
        private Action<object> execute;
        private Predicate<object> canExecute;
 
 
        public event EventHandler? CanExecuteChanged;
 
        public DelegateCommand(Action<object> execute, Predicate<object> canExecute)
        {
            if (execute == null)
            {
                throw new ArgumentNullException("execute 不能为空");
            }
            this.execute = execute;
            this.canExecute = canExecute;
        }
 
        public DelegateCommand(Action<object> execute):this(execute,null)
        {
 
        }
 
        public bool CanExecute(object? parameter)
        {
            return  canExecute?.Invoke(parameter)!=false;
        }
 
        public void Execute(object? parameter)
        {
            execute?.Invoke(parameter);
        }
    }
}

 

注意，DelegateCommand的构造函数，接收两个参数，一个是Execute(干活的)，一个是CanExecute(判断是否可以干活的)。

MVVM应用代码

本实例主要实现两个数的运算。如加，减，乘，除等功能。

首先定义ViewModel，继承自ViewModelBase，主要实现具备通知功能的属性和命令，如下所示：

using DemoMVVM.Core;
using System;
using System.Collections.Generic;
using System.Linq;
using System.Runtime;
using System.Text;
using System.Threading.Tasks;
 
namespace DemoMVVM
{
    public class MainWindowViewModel:ViewModelBase
    {
        #region 属性及构造函数
 
        private double leftNumber;
 
		public double LeftNumber
		{
			get { return leftNumber; }
			set { SetProperty(ref leftNumber , value); }
		}
 
		private double rightNumber;
 
		public double RightNumber
		{
			get { return rightNumber; }
			set { SetProperty(ref rightNumber , value); }
		}
 
		private double resultNumber;
 
		public double ResultNumber
		{
			get { return resultNumber; }
			set { SetProperty(ref resultNumber , value); }
		}
 
 
		public MainWindowViewModel()
		{
 
		}
 
		#endregion
 
		#region 命令
 
		private DelegateCommand operationCommand;
 
		public DelegateCommand OperationCommand
		{
			get {
 
				if (operationCommand == null)
				{
					operationCommand = new DelegateCommand(Operate);
				}
				return operationCommand; }
		}
 
		private void Operate(object obj)
		{
			if(obj == null)
			{
				return;
			}
			var type=obj.ToString();
			switch (type)
			{
				case "+":
					this.ResultNumber = this.LeftNumber + this.RightNumber;
					break;
				case "-":
                    this.ResultNumber = this.LeftNumber - this.RightNumber;
                    break;
				case "*":
                    this.ResultNumber = this.LeftNumber * this.RightNumber;
                    break;
				case "/":
					if (this.RightNumber == 0)
					{
						this.ResultNumber = 0;
					}
					else
					{
						this.ResultNumber = this.LeftNumber / this.RightNumber;
					}
                    break;
			}
		}
 
 
        #endregion
 
    }
}

 

 创建视图，并在视图中进行数据绑定，将ViewModel和UI关联起来，如下所示：

<Window x:Class="DemoMVVM.MainWindow"
        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:DemoMVVM"
        mc:Ignorable="d"
        Title="MVVM示例" Height="350" Width="600">
    <Grid>
        <Grid.ColumnDefinitions>
            <ColumnDefinition></ColumnDefinition>
            <ColumnDefinition></ColumnDefinition>
            <ColumnDefinition Width="0.3*"></ColumnDefinition>
            <ColumnDefinition></ColumnDefinition>
        </Grid.ColumnDefinitions>
        <Grid.RowDefinitions>
            <RowDefinition></RowDefinition>
            <RowDefinition></RowDefinition>
            <RowDefinition></RowDefinition>
            <RowDefinition></RowDefinition>
        </Grid.RowDefinitions>
        <StackPanel Grid.Row="1" Grid.Column="0" Orientation="Horizontal">
            <TextBlock Text="A1:" VerticalAlignment="Center" ></TextBlock>
            <TextBox  Margin="10" Width="120" Height="35" Text="{Binding LeftNumber, UpdateSourceTrigger=PropertyChanged}" VerticalContentAlignment="Center"></TextBox>
        </StackPanel>
        <StackPanel Grid.Row="1" Grid.Column="1" Orientation="Horizontal">
            <TextBlock Text="A2:" VerticalAlignment="Center" ></TextBlock>
            <TextBox  Margin="10" Width="120" Height="35" Text="{Binding RightNumber, UpdateSourceTrigger=PropertyChanged}" VerticalContentAlignment="Center"></TextBox>
        </StackPanel>
        <TextBlock Grid.Row="1" Grid.Column="2" Text="=" VerticalAlignment="Center" HorizontalAlignment="Center"></TextBlock>
        <StackPanel Grid.Row="1" Grid.Column="3" Orientation="Horizontal">
            <TextBlock Text="A3:" VerticalAlignment="Center" ></TextBlock>
            <TextBox  Margin="10" Width="120" Height="35" Text="{Binding ResultNumber, UpdateSourceTrigger=PropertyChanged}" VerticalContentAlignment="Center"></TextBox>
        </StackPanel>
        <StackPanel Grid.Row="2" Grid.ColumnSpan="4" Orientation="Horizontal" HorizontalAlignment="Center">
            <Button Content="+" Width="100" Height="35" Margin="10" Command="{Binding OperationCommand}" CommandParameter="+"></Button>
            <Button Content="-" Width="100" Height="35" Margin="10" Command="{Binding OperationCommand}" CommandParameter="-"></Button>
            <Button Content="*" Width="100" Height="35" Margin="10" Command="{Binding OperationCommand}" CommandParameter="*"></Button>
            <Button Content="/" Width="100" Height="35" Margin="10" Command="{Binding OperationCommand}" CommandParameter="/"></Button>
        </StackPanel>                                               
    </Grid>
</Window>

 

注意，在xaml前端UI代码中，分别对TextBox的Text和Button的Command进行了绑定，已达到数据驱动UI，以及UI响应客户的功能。

在UI的构造函数中，将DataContext数据上下文和ViewModel进行关联，如下所示：

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

 

MVVM实例演示

通过以上步骤，已经完成了MVVM的简单应用。实例演示如下：

以上就是深入理解WPF中MVVM的设计思想的全部内容。希望可以抛砖引玉，一起学习，共同进步。

更多推荐

辅助驾驶功能开发-功能规范篇(21)-3-XP行泊一体方案功能规范

XPilotParking自动泊车系统七、全自动泊车（AutoParking）•自动泊车辅助（AutoParkingAssist）、斜列式车位泊车辅助（DiagonalAutoParkingAssist）-产品定义基于超声波传感器和环视摄像头对空间和车位的识别，通过自动泊车系统实现全自动泊车入库。-功能说明当车辆以不高

前端杂记1

React是基于函数式编程的运行时框架，UI=fn（state），它的状态改变是通过发布订阅模式，单向数据流方式，更新是通过运行时diff，然后将变化的部分渲染，而vue是通过响应式以组件为颗粒进行更新，因此它可以在预编译阶段进行动静态标记来优化更新比较过程reactscheduler会将组件根据优先级划分成更小颗粒的

Vue全局事件总线

1.简介全局事件总线时一种组件间通信的方式，适用于任意组件间通信2.原理分析：如果A组件想要传递数据给B组件，那么就通过全局事件总线在B组件中绑定一个自定义事件，并界定一个参数来接收传递的数据，在A组件中，就需要通过全局事件总线对自定义事件进行触发，并传递参数简单理解：全局事件总线其实就是一个中间介质，组件间的相互通信

flex弹性盒模型与阿里图标的使用

华子目录flex布局flex布局原理flex使用三要素阿里图标（字体）flex布局相关学习网站：http://c.biancheng.net/css3/flex.html1.flex是当前最主流的布局方式：用它布局起来更方便，取代了浮动的作用。2.浮动布局有缺陷，会脱离文档流，可能会导致布局崩塌注：用flex布局的元素

SQL中LIKE和REGEXP简单对比

一、在SQL中，LIKE和REGEXP是用于模式匹配的两种不同语法。它们用于在数据库查询中匹配符合特定模式的字符串。1.LIKE是SQL中用于模糊匹配的运算符，它使用通配符%来表示任意个数字符序列（包括空字符序列）的位置。例如：SELECT*FROMtable_nameWHEREcolumn_nameLIKE'AA%'

Dubbo可以代替Feign、Hystrix、Sentinel，Ribbon？

文章目录一、概念二、功能介绍1、@Service2、@Reference3、@Method4、@Argument三、分析四、如何实现？1、熔断（CircuitBreaker）XML配置方式注解方式2、降级（Fallback）XML配置方式注解方式3、限流（RateLimiting）XML配置方式注解方式4、负载均衡（L

华为云云耀云服务器L实例评测｜华为云上安装kafka

文章目录华为云云耀云服务器L实例评测｜华为云上安装kafka一、kafka介绍二、华为云主机准备三、kafka安装1.安装什么版本java2.安装zookeeper服务3.使用systemctl管理启动ZooKeeper服务4.修改kafka配置5.使用systemctl管理启动kafka服务6.创建一个测试topic

从零开始学网站建设：从需求分析到上线发布

从零开始学网站建设：从需求分析到上线发布一、需求分析首先，要成功地建设一个网站，需要进行深入的需求分析。这涉及到与潜在用户进行沟通，了解他们的需求和期望。在这个过程中，我们需要明确网站的目标和定位，以便确定网站的功能和设计。二、制定网站建设方案在需求分析的基础上，制定出一个详细的网站建设方案。这包括网站的结构设计、功能

Python-Jenkins 在 Jenkins 中的应用

Author：rabPython版本：3.9Jenkins版本：2.409官方文档：https://python-jenkins.readthedocs.io/en/latest/目录前言一、案例1.1管理JenkinsVersion1.2管理JenkinsJob1.2.1普通创建Job1.2.2获取当前用户的所有Jo

八股整理（计网，os）

1.进程和线程的区别1.1什么是进程和线程1.进程是操作系统进行资源分配和调度的一个基本单位，资源包括cpu，内存，磁盘等等IO设备等等。每一个进程启动都会最先产生一个线程，即主线程，然后主线程会在创建其他的子线程。2.线程是一个基本的cpu执行单元，必须依托进程存货，一个线程是一个executioncontext（执

Android如何实现轮播效果：ViewFlipper 和 ViewAnimator

前言现在的app中基本上都有轮播的需求，比如广告banner、最新消息tips等等。其中我们熟悉的顶部广告一般左右轮播，这种情况大部分通过ViewPager实现。而那种上下轮播的消息tips（一般是条状）则可以使用ViewFlipper实现。说到ViewFlipper，就不得不先说ViewAnimator，它是View

热文推荐
  1. Redis实现Session持久化

    Redis实现Session持久化1.前言直接使用Session存储用户登录信息，此时的会话信息是存储在内中的，只要项目重启存储的Session信息就会丢失。而使用Redis存储Session的话就不会存在这种情况，即使项目重启也并不影响，也无需用户重新登录。使用Redis存储Session，还能让项目支持分布式的，比

  2. 如何将 Transformer 应用于时间序列模型

    在机器学习的广阔前景中，transformers就像建筑奇迹一样高高耸立，以其复杂的设计和捕获复杂关系的能力重塑了我们处理和理解大量数据的方式。自2017年创建第一个Transformer以来，Transformer类型呈爆炸式增长，其中包括ChatGPT和DALL-E等强大的生成式AI模型。虽然transformer

  3. Beyong compare 介绍

    "BeyondCompare"是一个强大的文件和文件夹比较工具，它允许你比较两个或更多的目录/文件并显示差异。这个工具特别有用，当你需要找出两个不同版本的文件之间的改变时。如果你想要使用BeyondCompare，你需要按照以下步骤操作：1.**下载和安装**：首先，你需要从BeyondCompare的官方网站或其他可

  4. 接口文档规范

    接口文档规范主要包括以下几个方面：1.接口基本信息应该在文档的开头提供接口的基本信息，包括接口名称、接口URL、请求方法、请求参数、返回值、返回状态码等。这些信息应该清晰明了，并且易于理解。2.请求参数接口文档应该明确列出请求参数，并提供每个参数的名称、类型、是否必填、描述等信息。对于复杂结构的请求参数，例如JSON或

  5. 从网约车平台合规问题看企业合规难题如何破解

    随着互联网的快速发展，网约车行业逐渐崛起并成为人们出行的重要选择之一。然而，虽然网约车平台带来了便利和效率，但也引发了一系列合规问题。近日，西安市交通运输综合执法支队和西安市出租汽车管理处组织开展了西安市网约车行业“全过程执法、全链条监管、全合规营运百日攻坚行动”。约谈会上，西安市出租汽车管理处相关负责人通报了“百日攻

  6. 华为OD机试真题 Java 实现【简易内存池】【2023 B卷 200分 考生抽中题】

    目录一、题目描述二、输入描述三、输出描述样例：输出样例：四、解题思路五、Java算法源码六、效果展示1、输入2、输出3、说明4、再输入5、再说明6、如果走后一次请求的是20，会怎么样呢？华为OD机试2023B卷题库疯狂收录中，刷题点这里一、题目描述请实现一个简易内存池,根据请求命令完成内存分配和释放。内存池支持两种操作

  7. Shiro【散列算法、Shiro会话、退出登录 、权限表设计、注解配置鉴权 】(五)-全面详解（学习总结---从入门到深化）

    目录Shiro认证_散列算法Shiro认证_过滤器Shiro认证_获取认证数据Shiro认证_Shiro会话Shiro认证_会话管理器Shiro认证_退出登录Shiro认证_RememberMeShiro授权_权限表设计Shiro授权_数据库查询权限Shiro授权_在Realm进行授权Shiro授权_过滤器配置鉴权Sh

  8. 轻量服务器2核与1核的区别

    ​1.核心数量轻量服务器2核与1核最明显的区别在于核心数量。1核服务器只有一个处理器核心，而2核服务器有两个处理器核心。这使得2核服务器在处理数据时能够同时执行更多的任务。2.并行处理能力由于只有1个核心，1核服务器不具备并行处理任务的能力。而2核服务器在处理数据时可以同时执行多个任务，提高了服务器的处理速度和效率。3

  9. GitLab数据迁移后出现500错误

    一、背景去年做GitLab数据迁移时，写过一篇文章《GitLab的备份与还原》。后来发现新创建的项目没问题，但对于迁移过来的项目，修改名称等信息，或者删除该项目时，会出现500错误，以为是系统问题，一直也查到解决办法。二、原因前段时间再次搜索解决办法，终于解决了，在这里记录一下。导致这样的原因，了解到是db_key_b