用MVVM设计模式提升WPF开发体验:分层架构与绑定实例解析

MVVM(Model-View-ViewModel)是一种架构模式,广泛应用于现代前端开发,尤其是在微软的WPF(Windows Presentation Foundation)应用程序中。它旨在通过将视图(UI)与业务逻辑(模型)分离,达到更高的代码可维护性和可测试性。MVVM 在 Microsoft 的推行下,成为 WPF 应用开发的标准设计模式之一。

一、历史背景

在 GUI 应用开发中,代码的复杂性主要来源于 UI 和业务逻辑的耦合。传统的MVC(Model-View-Controller)架构尝试解决这一问题,通过分离模型和视图,开发者可以更轻松地管理代码。MVVM 是对MVC 的改进,提出了视图模型(ViewModel)的概念,将视图与模型连接起来,极大地提升了数据绑定和双向数据更新的便捷性和灵活性。

MVVM 模式主要借助于 WPF 的数据绑定、命令和属性更改通知来实现,使得开发者可以将数据流的处理逻辑放入 ViewModel中,做到视图和数据逻辑的完全分离。

二、MVVM 模式的组成

Model:代表数据结构和业务逻辑,包含数据实体、数据访问层和业务规则的实现。它与视图无关,专注于应用程序的核心数据。
View:表示用户界面,是应用程序的可视化部分。它通过绑定从
ViewModel 获取数据,不直接处理数据逻辑。

ViewModel:充当 View 与 Model 的桥梁,包含 UI 逻辑和 Model 数据的映射逻辑。ViewModel 通过属性绑定和命令,向视图提供数据,并响应用户操作。

三、WPF 和 MVVM 的结合

WPF 为 MVVM 提供了强大的支持,其中数据绑定和命令是关键功能。WPF 的数据绑定可以通过简单的绑定语法,将 ViewModel 的数据呈现到视图中,而 WPF 的命令机制可以将用户的操作与 ViewModel 中的方法关联起来。

1. 数据绑定

数据绑定是 WPF 中的重要功能,它使得 ViewModel 的属性可以直接绑定到视图中的控件上。例如,通过绑定一个属性,TextBox 控件的内容可以实时更新到 ViewModel 的数据。

2. 命令

WPF 命令提供了一种方法,可以将按钮等控件的交互行为与 ViewModel 中的操作逻辑连接起来。通过 ICommand 接口,命令可以定义在 ViewModel 中并直接绑定到视图控件。

四、MVVM 应用实例:创建一个简单的 WPF 应用程序

以下将从零开始创建一个简单的 MVVM 应用,展示基本的 MVVM 模式实现。

4.1第一步:创建 WPF 项目

  1. 打开 Visual Studio,新建一个 WPF 应用程序项目。
  2. 命名项目,例如 MVVMExample。

项目创建成功后,会生成 MainWindow.xaml,我们将这个文件作为 View 视图部分。

4.2 第二步:创建 Model

在项目中添加一个 Models 文件夹,并创建一个数据类 Person.cs:

// Models/Person.cs
// 创建 Modelpublic class Person{public string FirstName { get; set; }public string LastName { get; set; }}

此 Person 类表示应用程序的数据结构。

4.3 第三步:创建 ViewModel

在项目中添加一个 ViewModels 文件夹,并创建 MainViewModel.cs,负责处理 Person 数据并提供给视图。

// ViewModels/MainViewModel.cs
using System.ComponentModel;
using MVVMExample.Models;namespace MVVMExample.ViewModels
{// 定义 ViewModel,充当视图和数据模型之间的中介。public class MainViewModel : INotifyPropertyChanged // 数据绑定中常用的接口,它允许对象通知其属性发生了变化。{// 定义字段 _personprivate Person _person;public Person Person{get => _person;set{_person = value;OnPropertyChanged(nameof(Person));}}// 实现构造方法public MainViewModel(){Person = new Person(){FirstName = "John",LastName = "Doe"};}public event PropertyChangedEventHandler? PropertyChanged;protected void OnPropertyChanged(string propertyName){//调用 PropertyChanged 事件的订阅者(通常是 UI 控件)进行更新。当 PropertyChanged 事件被触发时,//它会传递一个 PropertyChangedEventArgs 对象,该对象包含属性名 propertyName。?. 是空值检查操作符,确保在没有订阅者的情况下不会抛出异常。PropertyChanged?.Invoke(this, new PropertyChangedEventArgs(propertyName));}}
}

该 ViewModel 实现了 INotifyPropertyChanged 接口,允许通知视图属性更改。MainViewModel 类在初始化时创建了一个 Person 对象。

4.4 第四步:创建 View

回到 MainWindow.xaml,我们将添加 XAML 代码来展示 Person 的信息。

<!-- MainWindow.xaml -->
<Window x:Class="WpfApp1.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:WpfApp1"mc:Ignorable="d"Title="MainWindow" Height="450" Width="800"><!--创建View--><!--通过设置 DataContext,我们可以将视图模型(MainViewModel)绑定到当前窗口。所有在视图中使用数据绑定的元素都会通过这个数据上下文来获取数据。--><Window.DataContext><!--创建一个 MainViewModel 的实例,并将它作为数据上下文绑定到窗口。这意味着窗口中的所有数据绑定都会访问 MainViewModel 中的属性和数据。--><local:MainViewModel /></Window.DataContext><StackPanel><!--通过绑定,TextBox 的文本将与 MainViewModel 中的 Person.FirstName 属性保持同步。--><!--UpdateSourceTrigger=PropertyChanged这个属性告诉 WPF,当用户在文本框中修改文本时,立即将修改的值更新到 Person.FirstName 属性。这意味着属性会实时更新,而不仅仅是当控件失去焦点时才更新。--><TextBox Text="{Binding Person.FirstName,UpdateSourceTrigger=PropertyChanged}" Margin="10" /><TextBox Text="{Binding Person.LastName,UpdateSourceTrigger=PropertyChanged}" Margin="10" /><TextBlock Text="{Binding Person.FirstName}" Margin="10" FontSize="16" /><TextBlock Text="{Binding Person.LastName}" Margin="10" FontSize="16" /></StackPanel>
</Window>

此 XAML 文件展示了一个简单的 UI,包含两个 TextBox 和两个 TextBlock。TextBox 控件绑定到 Person.FirstName 和 Person.LastName 属性,允许用户输入姓名和姓氏。绑定的 UpdateSourceTrigger=PropertyChanged 确保属性值在更改时立即更新。

4.5 第五步:测试应用程序

启动应用程序,您会看到两个可编辑的文本框和两个文本块。编辑 TextBox 内容时,TextBlock 内容会即时更新,验证了数据绑定和 ViewModel 的有效性。
在这里插入图片描述

五、总结

使用 MVVM 模式可以清晰地分离视图和数据逻辑,特别是在大型应用程序中更为显著。在 MVVM 中:

View 负责 UI,展示数据;
ViewModel 负责处理 UI 与数据之间的绑定,管理业务逻辑;
Model 负责数据层,保持核心数据和规则。

通过这种结构化的方式,WPF 中的开发者可以构建更高效的、易维护的应用。

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/bicheng/60598.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

【数据库实验一】数据库及数据库中表的建立实验

目录 实验1 学习RDBMS的使用和创建数据库 一、 实验目的 二、实验内容 三、实验环境 四、实验前准备 五、实验步骤 六、实验结果 七、评价分析及心得体会 实验2 定义表和数据库完整性 一、 实验目的 二、实验内容 三、实验环境 四、实验前准备 五、实验步骤 六…

前端 JS面向对象 原型 prototype

目录 一、问题引出 二、prototype原型对象 三、小结 四、constructor 五、__proto__对象原型 六、原型链 一、问题引出 由于JS的构造函数存在内存浪费问题&#xff1a; function Star(name,age){this.namenamethis.ageagethis.singfunction () {console.log("唱歌&…

NodeJS的安装 npm 配置和使用 Vue-cli安装 Vue项目介绍

一.前端工程化 前端工程化是使用软件工程的方法来单独解决前端的开发流程中模块化、组件化、规范化、自动化的问题,其主要目的为了提高效率和降低成本 1. NodeJS的安装 Node.js 是一个基于 Chrome V8 引擎的 JavaScript 运行时环 境&#xff0c;可以使 JavaScript 运行在服务…

软件工程概论项目(二),node.js的配置,npm的使用与vue的安装

上一章我们配置了git仓库&#xff0c;这一章我们来配置项目需要用的一些其他的环境。 放一个思维导图在这里&#xff0c;可以参考一下&#xff0c;很不全面&#xff0c;没有参考价值,反正我先这样写吧。 参考了这个nodejs的配置&#xff0c;写的很好&#xff1a;https://blog.c…

什么是crm?3000字详细解析

在现代商业环境中&#xff0c;客户关系管理&#xff08;CRM&#xff09;已经成为企业驱动成功的关键工具。在复杂且竞争激烈的市场中&#xff0c;如何有效地管理客户关系、提升客户满意度&#xff0c;并增加客户忠诚度&#xff0c;越来越成为企业迫切关心的问题。而CRM系统&…

3.1_文件上传漏洞

文件上传漏洞 文件上传漏洞原理&#xff1a;未对用户提交的文件进行严格校验&#xff0c;就将恶意文件解析执行&#xff0c;导致用户可以提交恶意的文件进行攻击&#xff1b; 利用方式&#xff08;危害&#xff09;&#xff1a; 1&#xff09;. 上传 HTML/SVG 进行 XSS 攻击&…

C++入门基础知识140—【关于C++ 类构造函数 析构函数】

成长路上不孤单&#x1f60a;&#x1f60a;&#x1f60a;&#x1f60a;&#x1f60a;&#x1f60a; 【14后&#x1f60a;///C爱好者&#x1f60a;///持续分享所学&#x1f60a;///如有需要欢迎收藏转发///&#x1f60a;】 今日分享关于C 类构造函数 & 析构函数的相关内容…

Notepad++的完美替代

由于Notepad的作者曾发表过可能在开发者代码中植入恶意软件的言论&#xff0c;他备受指责。在此&#xff0c;我向大家推荐一个Notepad的完美替代品——NotepadNext和Notepad--。 1、NotepadNext NotepadNext的特点&#xff1a; 1、跨平台兼容性 NotepadNext基于Electron或Qt…

为什么RNN(循环神经网络)存在梯度消失和梯度爆炸?

1️⃣ 原理分析 RNN前向传播的公式为&#xff1a; x t x_t xt​是t时刻的输入 s t s_t st​是t时刻的记忆&#xff0c; s t f ( U ⋅ x t W ⋅ s t − 1 ) s_tf(U\cdot x_tW\cdot s_{t-1}) st​f(U⋅xt​W⋅st−1​)&#xff0c;f表示激活函数&#xff0c; s t − 1 s_{t-1} …

NUXT3学习日记二(样式配置、引入组件库、区分在服务端还是在客户端渲染)

上一章已经给大家分享官网下载的nuxt3了&#xff0c;下面正式进入我所要说的内容吧 一、初始化样式 想必大家从我的git下载下来的nuxt3&#xff0c;能看到nuxt.config.ts这个文件了吧。 这里我们有两种css配置方式 1、css:[~/assets/base.scss] 这种方式不能在scss文件中定义…

2024AAAI | DiffRAW: 利用扩散模型从手机RAW图生成单反相机质量的RGB图像

文章标题&#xff1a;《DiffRAW: Leveraging Diffusion Model to Generate DSLR-Comparable Perceptual Quality sRGB from Smartphone RAW Images》 原文链接&#xff1a;DiffRAW 本文是清华大学深圳研究院联合华为发表在AAAI-2024上的论文&#xff08;小声bb&#xff1a;华…

计算机视觉 ---图像模糊

1、图像模糊的作用&#xff1a; 减少噪声&#xff1a; 在图像获取过程中&#xff0c;例如通过相机拍摄或者传感器采集&#xff0c;可能会受到各种因素的干扰&#xff0c;从而引入噪声。这些噪声在图像上表现为一些孤立的、不符合图像主体内容的像素变化&#xff0c;如椒盐噪声&…

串口DMA接收不定长数据

STM32F767—&#xff1e;串口通信接收不定长数据的处理方法_stm32串口超时中断-CSDN博客 STM32-HAL库串口DMA空闲中断的正确使用方式解析SBUS信号_stm32 hal usart2 dma-CSDN博客 #define USART1_RxBuffSize 100 extern DMA_HandleTypeDef hdma_usart1_rx; //此处声明的变量在…

web实验3:虚拟主机基于不同端口、目录、IP、域名访问不同页面

创建配置文件&#xff1a; 创建那几个目录及文件&#xff0c;并且写内容&#xff1a; 为网卡ens160添加一个 IPv4 地址192.168.234.199/24: 再重新激活一下网卡ens160&#xff1a; 重启服务&#xff1a; 关闭防火墙、改宽松模式&#xff1a; 查看nginx端口监听情况&#xff1a;…

Jmeter中的监听器(二)

5--JSR223 Listener 用途 自定义数据处理&#xff1a;使用脚本语言处理测试结果&#xff0c;实现高度定制化的数据处理和分析。实时监控&#xff1a;实时处理和显示测试结果。集成外部系统&#xff1a;将测试结果发送到外部系统进行进一步处理和分析。日志记录&#xff1a;记…

计算机组成原理——进位计数制

1.认识不同进制 通常的我们日常生活中用到的都是十进制&#xff0c;比如买东西或者期末成绩等等&#xff0c;当然肯定不止这一种进制方法&#xff0c;相关的还有二进制、八进制、十六进制&#xff0c;还有古罗马数字&#xff0c;通常古罗马数字近似可以看作是五进制的数&#x…

function and task

任务和函数 在Verilog语言中提供了任务和函数&#xff0c;可以将较大的行为级设计划分为较小的代码段&#xff0c;允许设计者将需要在多个地方重复使用的相同代码提取出来&#xff0c;编写成任务和函数&#xff0c;这样可以使代码更加简洁和易懂。 1.1任务 任务的定义 任务定义…

【C++】用红黑树封装set和map

在C标准库中&#xff0c;set容器和map容器的底层都是红黑树&#xff0c;它们的各种接口都是基于红黑树来实现的&#xff0c;我们在这篇文章中已经模拟实现了红黑树 ->【C】红黑树&#xff0c;接下来我们在此红黑树的基础上来看看如何封装set和map。 一、共用一颗红黑树 我…

类与实例

1 问题如何理解类与实例&#xff1f; 2 方法 类与实例 类(class)的概述&#xff1a;用来描述具有相同的属性和方法的对象的集合。它定义了该集合中每个对象所共有的属性和方法。对象是类的实例。 类是一类事物&#xff0c;实例是具体的一个事物。 编程与生活是相通的&#xff0…

2024/11/4 计网强化

10: 17: 22: 09: 11: 12: 13&#xff1a; 14&#xff1a; 15&#xff1a; 18&#xff1a; 19&#xff1a; 20: 21: 16: