详解WPF中的MVVM模式（一）

最新推荐文章于 2025-04-15 15:54:39 发布
最新推荐文章于 2025-04-15 15:54:39 发布
阅读量1.7k 收藏 34
点赞数 23
分类专栏： C# 文章标签： wpf .net
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.youkuaiyun.com/2402_88871930/article/details/143808411
版权

1. 什么是MVVM模式

MVVM是Model-View-ViewModel的缩写，在WPF的MVVM模式中有三个核心的概念，即视图（View）、模型（Model）和视图模型（ViewModel），这三种核心组件各司其职，均有自己的用处，下面使用一张图来表明三者之间的关系：

在这里插入图片描述

1.1 视图（View）

视图的主要职责就是给用户呈现美观的用户界面，一般视图不涉及到后台业务逻辑，只专注于数据的呈现，在WPF中，视图一般是xaml（读作zai摸哦）文件，使用树状结构从顶层到底层组织起来整个前端界面（跟html差不多），这个xaml文件是xml文件的增强体，xaml文件可以引入命名空间，xaml完全遵循xml的语法。

1.2 视图模型（ViewModel）

从图中可以看出，视图模型作为视图层和模型层的中间层，起到承上启下的作用，她像一座桥梁将视图和模型连接起来。视图将前台组件的属性和命令绑定至视图模型中的数据和方法，视图模型中数据的变更又会通知前台视图界面进行更新。视图模型中业务数据变更又会更新模型中的数据，而模型中属性的变化又会通知视图模型中的属性做出相应的变更。

1.3 模型（Model）

模型是应用中的核心业务数据，可以是DTO（数据传输对象），也可以是实体（Entity），可以认为是领域驱动设计里面的领域模型，包含了数据、校验规则和业务逻辑。

2.为什么使用MVVM模式

在WPF中使用MVVM模式有几个好处：
（1）解除耦合，将前端和后端分离，前台xaml代码和后台代码不再紧密相连，易于维护和扩展；
（2）易于测试，后端ViewModel可以添加单元测试，使得所有业务逻辑都可以使用单元测试覆盖，提高代码的稳定性；
（3）便于协作，前端人员可以专注于界面的设计和用户交互设计，后端开发人员可以专注于业务逻辑的开发；
（4）代码复用，由于前后端高度解耦合，如果只想改动界面的呈现效果，后端代码可以完全不动，提高了程序的代码复用率；

3.MVVM模式的实现

MVVM模式一般分为两种实现方式：
（1）视图优先（View First）实现，即先初始化视图，然后设置View的DataContext为ViewModel；
（2）视图模型优先（ViewModel First）实现，即先实例化ViewModel，然后视图自动进行创建。

4.View First MVVM实现

今天来讲第一种MVVM的实现方式，即视图优先，首先我们先介绍绑定的几个核心接口和实现方式：

4.1 INotifyPropertyChanged接口

INotifyPropertyChanged接口是视图模型中数据改变通知前台界面更新的核心接口，所有的视图模型都需要实现该接口，以下代码是该接口的具体实现：

public class MainWindowViewModel : INotifyPropertyChanged
{
    public event PropertyChangedEventHandler PropertyChanged;

    public void NotifyChanged(string propertyName)
    {
        PropertyChanged?.Invoke(this, new PropertyChangedEventArgs(propertyName));
    }
}

我们通过反汇编查看INotifyPropertyChanged接口都有哪些属性：
在这里插入图片描述
从图中看出该接口仅有一个事件属性，上面的代码实现咱们只需要在数据改变的时候调用一下NotifyChanged函数，即可将数据改变更新到前台绑定的控件显示，咱们调用方式如下：

private string _name;

public string Name
{
    get { return _name; }
    set 
    {
        _name = value;
        NotifyChanged("Name");
    }
}

只需要在ViewModel的通用属性的set方法中调用NotifyChanged函数就可以通知前台更新了，这时有的同学可能就会问了，你这个ViewModel中的PropertyChanged事件从来都没有赋值，运行NotifyChanged函数也不会其作用啊，能问出来这个问题的同学说明用心思考了，确实代码里面没有关联PropertyChanged事件的处理函数，在绑定的时候WPF框架会自动进行事件订阅，这个就不需要咱们去操心了。

4.2 ICommand接口

ICommand接口是前端控件用户事件触发传递到后台的媒介，需要将控件的命令绑定到模型视图的ICommand属性上，WPF框架自身是不带ICommand接口的实现的，这就需要我们自己进行实现：

internal class RelayCommand : ICommand
{
    #region Fields

    readonly Action<object> _execute;
    readonly Predicate<object> _canExecute;

    #endregion // Fields

    #region Constructors

    public RelayCommand(Action<object> execute)
        : this(execute, null)
    {
    }

    public RelayCommand(Action<object> execute, Predicate<object> canExecute)
    {
        if (execute == null)
            throw new ArgumentNullException("execute");

        _execute = execute;
        _canExecute = canExecute;
    }
    #endregion // Constructors

    #region ICommand Members

    public bool CanExecute(object parameter)
    {
        return _canExecute == null ? true : _canExecute(parameter);
    }

    public event EventHandler CanExecuteChanged
    {
        add { CommandManager.RequerySuggested += value; }
        remove { CommandManager.RequerySuggested -= value; }
    }

    public void Execute(object parameter)
    {
        _execute(parameter);
    }

    #endregion // ICommand Members
}

RelayCommand类有两个构造函数，第一种构造函数只需要一个参数，参数为命令执行的委托（即处理函数），这种带一个参数的RelayCommand表明该命令始终可以响应前台的动作；第二种构造函数需要两个参数，第一个参数是命令执行的委托，第二参数是命令是否可以执行的委托，第二个参数就是用来控制前台是否可以进行动作。

5. 示例

下面以商品管理程序来讲解MVVM视图优先如何使用，该程序能够录入商品的信息，商品包括Id、名字和价格，模型如下：

public class Product
{
    public int Id { get; set; }

    public string Name { get; set; }

    public double Price { get; set; }
}

视图模型如下：

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

namespace ViewFirst
{
    public class MainWindowViewModel : INotifyPropertyChanged
    {
        public event PropertyChangedEventHandler PropertyChanged;

        public void NotifyChanged(string propertyName)
        {
            PropertyChanged?.Invoke(this, new PropertyChangedEventArgs(propertyName));
        }

        private string _name;

        public string Name
        {
            get { return _name; }
            set 
            {
                _name = value;
                NotifyChanged("Name");
            }
        }

        private int _id;

        public int Id
        {
            get { return _id; }
            set 
            { 
                _id = value;
                NotifyChanged(nameof(Id));
            }
        }

        private double _price;

        public double Price
        {
            get { return _price; }
            set 
            {
                _price = value; 
                NotifyChanged(nameof(Price));
            }
        }

        public MainWindowViewModel(Product product)
        {
            Id = product.Id;
            Name = product.Name;
            Price = product.Price;

            SaveCommand = new RelayCommand(x => Save());
        }

        public ICommand SaveCommand { get; set; }

        /// <summary>
        /// 保存修改
        /// </summary>
        public void Save()
        {
            // 实际应用的时候，保存可以保存到数据库、文件等，此处仅显示修改后的值
            MessageBox.Show($"Id={Id}，Name={Name}，Price={Price}");
        }
    }
}

视图如下：

<Window x:Class="ViewFirst.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:ViewFirst"
        mc:Ignorable="d"
        Title="MainWindow" Height="450" Width="800">
    <StackPanel>
        <StackPanel Orientation="Horizontal" Margin="0, 4">
            <TextBlock Text="Id:" MinWidth="100"/>
            <TextBox Text="{Binding Id}" MinWidth="100"/>
        </StackPanel>
        <StackPanel Orientation="Horizontal" Margin="0, 4">
            <TextBlock Text="名称:" MinWidth="100"/>
            <TextBox Text="{Binding Name}" MinWidth="100"/>
        </StackPanel>
        <StackPanel Orientation="Horizontal" Margin="0, 4">
            <TextBlock Text="价格:" MinWidth="100"/>
            <TextBox Text="{Binding Price}" MinWidth="100"/>
        </StackPanel>
        <Button Content="保存" Command="{Binding SaveCommand}"/>
    </StackPanel>
</Window>

视图优先的精髓在于首先创建View，View创建完毕后，再实例化ViewModel，并将ViewModel的实例赋给View的DataContext，如下代码：

namespace ViewFirst
{
    /// <summary>
    /// MainWindow.xaml 的交互逻辑
    /// </summary>
    public partial class MainWindow : Window
    {
        public MainWindow()
        {
            InitializeComponent();

            DataContext = new MainWindowViewModel(new Product()
            {
                Id = 1,
                Name = "Test",
                Price = 1
            });
        }
    }
}

运行整个程序，初始化界面如下：
在这里插入图片描述
当我们修改名称和价格，点击保存，程序运行逻辑正确：
在这里插入图片描述

6.总结

本文介绍了MVVM模式及其特点，实现了简单的视图优先的MVVM框架，讲解了MVVM模式的基本原理，同时使用MVVM模式实现了一个非常简单的商品管理器程序。

WPF高级 | WPF 与 MVVM 设计模式：构建可维护的大型应用架构
优快云博客专家，系统架构师，有合作、疑惑请私信博主。
02-20 6万+
WPF高级 | WPF 与 MVVM 设计模式：构建可维护的大型应用架构 ，在当今的软件开发领域，构建大型、可维护且易于扩展的应用程序是开发者们面临的重要挑战。Windows Presentation Foundation（WPF）作为微软新一代的图形界面技术，提供了强大的可视化设计和交互能力。而 Model - View - ViewModel（MVVM）设计模式则为 WPF 应用程序的架构设计提供了清晰的思路和规范，有助于提高代码的可维护性、可测试性和可扩展性。本文将深入探讨 WPF 与 MVVM……
WPF基础之MVVM模式
yigu4011的博客
06-27 4345
什么是MVVM?MVVM是Model-View-ViewModel的简写。它本质上就是MVC （Model-View- Controller）的改进版。即模型-视图-视图模型。MVVM示意图如下所示：安装MvvmLight插件：项目名称右键-->管理NuGet程序包-->搜索MvvmLight-->安装。接下来通过MVVM实现数据的CRUD【增删改查】基础操作。MVVM开发步骤：1. 创建Model层本例主要是对学生信息的增删改查，所以创建Student模型类。2. 创建DAL层。
WPF中实现最简单的MVVM模式（Model View ViewModel）
abc1564984930的博客
12-06 9975
示例 说明 WPF的MVVM的实现过程，数据驱动
一文读懂WPF系列之MVVM
最新发布
Marzlam的博客
04-15 1098
翻译全称就是 model-view-viewmodel 3部分内容以wpf的概念角度来解释就是 数据库数据源模型----xmal UI视图----DataContext​​ Viewmodel使用模型承载方式以技术点的角度来解释就是通过 UI的依赖属性 - binding-ViewModel 数据之间双向绑定UI控件内容变动可以作用于viewmodel,viewmodel模型内容变动也可以作用于UI控件内容显示。
WPF之MVVM模式
Hisoftjszx的博客
11-01 1229
它负责从Model获取数据，并将这些数据提供给View，同时处理用户在View上的交互。MVVM模式是WPF开发中的一种重要架构模式，通过将用户界面（View）与业务逻辑和数据（Model）分离，提高了代码的可维护性和可测试性。在WPF中，View通常是由XAML和后台代码组成的。MVVM架构模式是一种软件设计模式，它将应用程序分为三个部分：模型（Model）、视图（View）和视图模型（ViewModel）。命令绑定使得ViewModel可以处理用户在View上的交互，而不需要在View中编写处理逻辑。
WPF中的MVVM模式
weixin_34380948的博客
07-23 214
                                          WPF中的MVVM模式                                                周银辉 "设计模式"这样的话题似乎快被园子里的兄弟们写透了, 从简单的工厂到 MVC, MVP.  而关于MVVM似乎谈论得相对少些, 今天简单地说说. 值得声明的是: 这里仅仅谈论得是自己...
WPF中MVVM模式原理分析与实践
weixin_30808253的博客
07-15 256
WPF中MVVM模式原理分析与实践 　　原文：http://tech.ddvip.com/2009-07/1248427254126248.html 　　1, 前提 　　可以说MVVM是专为WPF打造的模式, 也可以说MVVM仅仅是MVC的一个变种, 但无论如何, 就实践而言, 如果你或你的团队没有使用"Binding"的习惯,...
WPF之MVVM解析
Lassewang的成长历程
05-17 4617
我们前面一节白话白眼，都只是从概念上了解了mvvm，了解和做还是差距很大，所以我们同样需要亲自动手实验来真的弄懂mvvm。        例子就取一个生活中的，用mvvm模式完成家庭的操作，比如显示查询家庭成员，增加家庭成员（娶妻生子等），减少家庭成员（嫁女老去等).      确定好这个例子我们就需要先准备一下数据，我们首先想到可能是用数据库，不过silverlight是浏览器客户端的东西
WPF（五） MVVM模式
这里是阿安的博客
08-25 3937
MVVM是Model-View-ViewModel的简写，MVVM是一种设计模式，类似于比较流行的MVC。这种模式引入的主要的目的就是将前端UI视图（View）和后端逻辑数据（Model）进行分离，从而降低前后端的耦合，提高项目的开发效率和可维护性、可拓展性。......
WPF的MVVM模式详解（一)
02-20
**WPF的MVVM模式详解（一）** 在Windows Presentation Foundation (WPF)开发中，MVVM（Model-View-ViewModel）模式已经成为一种主流的设计模式，它极大地简化了UI与业务逻辑之间的耦合，提高了代码的可测试性和可...
WPF,MVVM设计模式框架
02-10
**WPF与MVVM设计模式框架详解** Windows Presentation Foundation（WPF）是Microsoft推出的一种用于构建桌面应用程序的用户界面框架，它基于.NET Framework，并且专为Windows操作系统设计。WPF提供了一个丰富的图形...
WPF MVVM
博客
11-19 2077
WPF MVVM
WPF程序中使用MVVM模式（博客源码）
11-30
博客地址：http://blog.csdn.net/pfe_nova/article/details/41624873 MVVM是Model、View和连接两者的ViewModel组成，Model负责提供数据的业务逻辑，View负责页面的显示，ViewModel连接View和Model，ViewModel通过调用Model获得页面所需要的数据并通过View中的绑定将数据显示到页面上。 如何做到页面与逻辑分离的呢，理想状态下，View层的Code-Behind文件中只有在构造函数中调用初始UI元素的一行代码及设置View层的DataContext为对应的ViewModel。这样美工可根据原始设计图去做相应的美化设计，设计好直接替换即可。当然了还有一个好处就是可以方便的进行单元测试。
WPF —— MVVM架构
一个新人博客，愿多多支持。
04-25 6290
MVVM是一种软件架构模式，它将应用程序分为三个层次 model（数据模型），view（视图），viewmodel（视图模型）model：表示应用程序当中数据和业务逻辑，通俗来说就是对象。例如学生的姓名和年龄等放到一个class里面，作为一个对象view：就是xaml文件，处理用户交互和展示数据的 交互就是事件click，展示就是数据绑定等viewmodel：数据和页面之间的桥梁，可以处理一些ui逻辑，也可以处理数据绑定，可以执行ui界面的命令（类似于事件）也可以处理ui界面事件。
wpf之mvvm
帆布鞋也能走猫步
11-30 2087
初次接触的新名词--MVVM，听着好高大上的名字。经查阅，发现也没有想象中的那么难。     mvvm【模型－视图－视图模型（Model-View-ViewModel）】是由MVP【模型－视图－表现类（Model-View-Presenter）】发展而来，MVP则是由MVC【模型－视图－控制器(ModelView Controller)】发展而来。由此看来，mvvm其实也不是新知识。
wpf之MVVM
10-10 514
MVVM模式早就久仰大名，wpf采用MVVM模式后，我们只需要给属性赋值即可，不再需要去手动操作界面元素，大大减少了界面的开发工作量。 本章，通过解读一个MVVM的实例，来对MVVM模式有个大概的了解。 首先大概看下结构： 分为Models Views ViewModels 。取每个前面第一个字母 就是MVVM 那么这3个模块都是干嘛的呢？ Models定义了一个类 ...
WPF的MVVM模式
正在编辑中....的博客
08-09 2839
MVVM是Model-View-ViewModel的简写。比较流行的MVC，MVP设计模式与MVVM相比，都是比较类似的。主要的目的就是将视图（View）和模型（Model）分离的耦合。 MVVM非常优秀，但并非框架级别的东西，它是由 MVP（Model-View-Presenter）模式与WPF结合的应用方式时发展演变过来的一种新型架构。 立足于原有MVP框架并且把WPF的新特性糅合进去，以应对PC端开发 日益复杂的环境、需求变化。 在MVVM的Model中，Model完全就是实体，更加清晰的将Model
WPF中MVVM设计模式应用示例详解
在WPF（Windows Presentation Foundation）中采用MVVM（Model-View-ViewModel）设计模式是一种提高应用程序可维护性、可测试性以及分离关注点的有效方法。该模式通过将应用程序分为三个主要部分：模型(Model)、视图...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值