用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,一经查实,立即删除!

相关文章

std::memory_order 多线程编程中的内存顺序

std::memory_order 是 C11 引入的一个枚举&#xff0c;用于控制多线程编程中的内存顺序。它定义了在原子操作中对内存的可见性和排序的要求。它在 C 标准库的 <atomic> 头文件中&#xff0c;配合原子类型和操作&#xff08;如 std::atomic 和 std::atomic_flag&#xff0…

MySql--多表查询及聚合函数总结

建议先阅读MySql--增删改查表设计总结-CSDN博客 一、聚合函数 1.COUNT(列||*)&#xff1a;统计结果的个数。 2.SUM&#xff08;列&#xff09;&#xff1a;求和。 3.AVG(列)&#xff1a;求平均值。 4.MIN(列) 最小值。 5.MAX(列) &#xff1a;最大值。 二、GROUP BY 分组查询…

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

目录 实验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 运行在服务…

Linux学习,ssh 命令

SSH&#xff08;Secure Shell&#xff09;是一种网络协议&#xff0c;通过加密的方式在客户端和服务器之间建立安全的远程连接。Linux系统中的SSH命令是用于通过SSH协议远程登录和管理其他计算机的重要工具。SSH (Secure Shell) 是一种用于远程登录和其他网络服务之间的加密协议…

「Mac玩转仓颉内测版7」入门篇7 - Cangjie控制结构(下)

本篇继续深入介绍 for-in 循环的用法&#xff0c;并探讨 break 和 continue 控制结构的应用&#xff0c;帮助优化程序流程。 关键词 Cangjie控制结构Cangjie循环语句for-in控制转移程序优化 一、for-in 表达式 for-in 表达式用于遍历扩展了迭代器接口 Iterable 的类型实例。…

软件工程概论项目(二),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系统&…

中心极限定理的三种形式

独立同分布的中心极限定理&#xff1a; 设 X 1 , X 2 , … , X n X_1, X_2, \ldots, X_n X1​,X2​,…,Xn​是独立同分布的随机变量序列&#xff0c;且 E ( X i ) μ E(X_i) \mu E(Xi​)μ&#xff0c; D ( X i ) σ 2 > 0 D(X_i) \sigma^2 > 0 D(Xi​)σ2>0存在…

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 类构造函数 & 析构函数的相关内容…

前端框架大比拼:React.js, Vue.js 及 Angular 的优势与适用场景探讨

文章目录 前言一、React.js特点使用方法适用场景 二、Vue.js特点使用方法适用场景 三、Angular特点使用方法适用场景 四、如何选择合适的前端框架五、前端框架对项目性能的影响结语 前言 随着互联网技术的飞速发展&#xff0c;前端开发已经从简单的页面展示演变为复杂的应用构…

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;…