首页 > 其他分享 >WPF:MVVM的由来与属性绑定的过程

WPF:MVVM的由来与属性绑定的过程

时间:2024-08-21 19:48:52浏览次数:12  
标签:绑定 MVVM ViewModel UI WPF View 属性

WPF:MVVM的由来与属性绑定的过程

1、MVVM

(1)MVVM是什么?

​ MVVM(Model-View-ViewModel)是一种软件架构设计模式MVVM模式。有助于分离应用程序的业务逻辑和用户界面层,使得开发过程更易于管理,同时也便于单元测试。

image-20240821184048203

Model?

现实世界中对象的抽象结果。

View?

View=UI。

View Model?

ViewModel=Model for View。

View 与 View Model之间的沟通:传递数据:数据属性 传递操作:命令属性

(2)为什么要使用MVVM?

  • 可测试性:由于业务逻辑被封装在ViewModel中,这使得编写单元测试变得更容易。
  • 解耦:View和Model之间通过ViewModel间接通信,使得它们彼此独立,易于单独修改和维护。
  • 可维护性:清晰的分层结构使得代码更易于理解和维护。

2、数据绑定

现在我们做一个实验,实现一个简单的加法,通过MVVM去实现。

image-20240821185036615

从图中可以看出,有3个数据属性和2个命令属性。

先创建好各层文件夹如下:

image-20240821185305645

对于数据属性,我们先创建一个NotificationObject类,去继承INotifyPropertyChanged这个接口,这个接口用来是实现UI与数据属性之间双向绑定的

image-20240821190221001

对于命令属性,我们先创建一个DelegateCommand类,继承ICommand这个接口。

image-20240821190910144

ViewModel里面的代码如下:

image-20240821191133811

结果如下:

image-20240821191259007

3、分析

如何执行数据属性呢?(ViewModel与View之间双向交互)

数据绑定的过程,INotifyPropertyChanged里面接口是用来干嘛的?

当我们在UI层里面输入1时(此时对应的值已经传到了Input1了),这个时候会执行属性对应的Set里面的方法

image-20240821191524420

然后执行方法里面的事件,将这个属性名字传递到UI,然后UI绑定的对应的属性就随之改变

image-20240821191735106

也就是说:Input1和Inpu2我们只是通过UI去传值,所以我们并不需要去执行RaisePropertyChanged这个方法。于是,当我注释掉里面的RaisePropertyChanged方法时,经过调试与实验,依然可以显示结果。这个过程是从View到ViewModel的过程。

再来说Input3,这个为什么不可以去掉RaisePropertyChanged这个方法呢?因为当我们去执行命令后,Input3在ViewModel里面的值进行了改变,然后通过事件触发通知UI,传递给相对应的属性名字,这样UI层的值就改变了。这个过程是View Model到View的过程。

如何执行命令属性呢?(View到ViewModel)

我们知道,在MainWindow里面我们需要将xaml的上下文与View Model绑定

image-20240821193016065

然而在创建的ViewModel对象里面,就执行了这个命令属性吗?

image-20240821193148101

于是,经过调试,我发现在new完后并没有去触发委托里面的Add方法,这是为什么呢?

在初始化阶段,AddCommand被创建并设置好执行的动作(即Add方法),但这并不意味着Add方法被立即执行。只有当用户与UI进行交互时(比如点击按钮),AddCommand才会被触发,从而执行Add方法。
这里注意,命令属性的绑定方法:

image-20240821193627815

数据属性的绑定方法,比如文中的TextBox:

image-20240821193719987

标签:绑定,MVVM,ViewModel,UI,WPF,View,属性
From: https://www.cnblogs.com/zhuiyine/p/18372384

相关文章

  • 【WPF】WPF项目.exe可执行文件在非开发环境打不开
    如题,做一个小工具,开发完之后把bin/release文件夹打包发他,但在他电脑打不开。打开可靠性监视器:按下Win+S,在搜索栏中输入“控制面板”,然后点击进入。在控制面板中选择“系统和安全”。然后选择“安全与维护”。在“安全与维护”窗口中,展开“维护”部分,并点击“查看可靠性......
  • WPF:静态、动态资源以及资源词典
    WPF:静态、动态资源以及资源词典静态资源与动态资源我们常常会使用样式或者控件模板放在Window.Resources中,比如这样:静态资源与动态资源使用如下:<Window.Resources><SolidColorBrushx:Key="SolidColor"Color="#FF0000"/></Window.Resources><Grid><StackPanel......
  • WPF:数据模板
    WPF:DataTemplate在XAML界面当中编写的任何代码,其实本质上都是转化成C#代码,既然如此来说,只要XAML有的对象,我们都可以用C#代码编写,但是为什么一般我们不这么做,是因为XAML更加容易去表达界面上的元素,代码的可视化以及可维护性。需求:当我想要在ListBox或者DataGridView......
  • StringGrid单元格绑定ComboBox、DateTimePicker或窗口传值
    一、初始化控件状态procedureTForm7.FormCreate(Sender:TObject);beginwithStringGrid1dobeginColWidths[0]:=15;Cells[1,0]:='Combobox';ColWidths[1]:=100;Cells[2,0]:='DateTimePicker';ColWidths[2]:=100;......
  • 围观|微信小程序开发数据绑定最佳实践?
    在微信小程序开发中进行数据绑定时,遵循一些最佳实践可以帮助你编写更高效、可维护的代码。以下是一些数据绑定的最佳实践:1.保持数据简洁尽量保持data对象中的数据简洁明了,避免嵌套过深的数据结构。这样可以减少数据更新的复杂性,提高代码的可读性。Page({data:{......
  • WPF中的视觉树(VisualTree)和逻辑树(LogicalTree)
    可视化树和逻辑树我们先来理解一下什么是可视化树和逻辑树。通俗点来说,可视化树就是在XAML中定义的或者代码添加的元素组成的树。就像下面这样1<Grid>2<ButtonHorizontalAlignment="Center"VerticalAlignment="Center"Content="点击我"Click="Button_Click"><......
  • WPF Window窗体隐藏标题栏
    一、Window窗体隐藏标题栏1.当想弹出一个窗口的时候,一般会使用ShowDialog()方法,但是Page和UserControl页面没有ShowDialog()方法,那就只能用Window界面,但某些窗口不需要标题栏。使用以下代码隐藏标题栏,同时把标题栏高度设置为0。CaptionHeight属性不为0时,标题栏......
  • SimpleRAG:基于WPF与Semantic Kernel实现的一个简单的RAG应用
    SimpleRAG介绍SimpleRAG是基于WPF与SemanticKernel实现的一个简单的RAG应用,可用于学习与理解如何使用SemanticKernel构建RAG应用。GitHub地址:https://github.com/Ming-jiayou/SimpleRAG主要功能AI聊天支持所有兼容OpenAI格式的大语言模型:文本嵌入支持所有兼容OpenAI格式......
  • WPF 类型转换器的实现
    1、MainWindow.xaml<Windowx:Class="WpfApplication1.MainWindow"xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"xmlns:sys=&qu......
  • Vue——el-option下拉框绑定,value为数字和字符串区别
    Vue——el-option下拉框绑定1、正常使用v-for进行遍历下拉框内容,如果需要增加一个自定义的值,则加一个el-optionel-option用法:参数说明类型可选值默认值value选项的值string/number/object——label选项的标签,若不设置则默认与v......