当前位置: 首页 > news >正文

WPF 项目中 MVVM模式 的简单例子说明

一、概述

MVVM 是 Model view viewModel 的简写。MVVM模式有助于将应用程序的业务和表示逻辑与用户界面清晰分离。

在这里插入图片描述

几个概念的说明:

  1. model :数据,界面中需要的数据,最好不要加逻辑代码
  2. view : 视图就是用户看到的UI结构 xaml 文件
  3. viewModel : 业务逻辑代码
  4. 绑定器:声明性数据和命令绑定隐含在MVVM模式中。

使用MVVM模式并不会减少代码量,反而会增加很多代码。MVVM设计模式的根本目的是把界面和业务逻辑分离。
WPF的依赖属性,数据绑定等机制,很好地帮助我们实现MVVM模式,基本可以做到在界面层不出现业务逻辑代码。

在这里插入图片描述

二、mvvm 的实现

首先,新建 views models viewModels文件夹,用于存放不同模型

以简单的加法操作为例。

因为使用mvvm模式后,数据都是c#后端代码提供,前端使用后端的数据,只能通过值绑定的方式,同时如果后端业务逻辑导致数据改动,那么就需要后端去将这一改动通知到前端去。

  1. 前端绑定值,通过 {Binding 数据名} 的方式去绑定。
  2. 前端绑定事件的话,需要在viewModel层实现 Icommand 接口,以提供命令绑定事件 ,前端通过 {Binding 数据名}
  3. 后端通知前端数据修改,则需要实现一个 INotifyPropertyChanged 的接口,通过该接口中的 PropertyChangedEventArgs(“监听的业务操作名称”)去通知给前端。

(一)Command类 实现命令接口

using System;
using System.Collections.Generic;
using System.Linq;
using System.Text;
using System.Threading.Tasks;
using System.Windows.Input;namespace WpfMvvM
{public class Command : ICommand{public event EventHandler CanExecuteChanged;public bool CanExecute(object parameter){return true;}public void Execute(object parameter){DoExecute?.Invoke();}public Action DoExecute { get; set; }}
}

(二)model层

model层即数据层,

using System;
using System.Collections.Generic;
using System.ComponentModel;
using System.Linq;
using System.Text;
using System.Threading.Tasks;namespace WpfMvvM.Models
{public class AddModule:INotifyPropertyChanged  // 实现INotifyPropertyChanged接口{public event PropertyChangedEventHandler PropertyChanged;public int Num1 { get; set; } = 10;public int Num2 { get; set; } = 20;private int _Rs;public int Rs{get { return _Rs; }set { _Rs = value;// 事件委托通知  new PropertyChangedEventArgs("xx") xx为数据属性名PropertyChanged?.Invoke(this, new PropertyChangedEventArgs("Rs"));}}public Command BtnCommand { get; set; } // 命令属性}
}

(三)ViewModel 层

viewModel层,用来进行业务处理,操控model层的数据,将model层注入为其属性

using System;
using System.Collections.Generic;
using System.Text;
using System.Threading.Tasks;
using WpfMvvM.Models;namespace WpfMvvM.ViewModels
{public class AddViewModel{// model 层数据注入public AddModule Model { get; set; } = new AddModule();// 空构造器,为model层绑定命令及事件通知public AddViewModel(){Model.BtnCommand = new Command();Model.BtnCommand.DoExecute=new Action(Add);}// 业务逻辑方法  加法private void Add(){Model.Rs = Model.Num1 + Model.Num2;}}
}

(四)view 层

  1. view层 xaml部分
<Window.Resources><Style TargetType="TextBlock"><Setter Property="HorizontalAlignment" Value="Center"/><Setter Property="VerticalAlignment" Value="Center"/><Setter Property="FontSize" Value="33"/></Style><Style TargetType="TextBox"><Setter Property="HorizontalAlignment" Value="Center"/><Setter Property="VerticalAlignment" Value="Center"/><Setter Property="FontSize" Value="33"/><Setter Property="Width" Value="300"/></Style><Style TargetType="Button"><Setter Property="HorizontalAlignment" Value="Center"/><Setter Property="VerticalAlignment" Value="Center"/><Setter Property="FontSize" Value="33"/></Style>
</Window.Resources>
<Grid ShowGridLines="True"><Grid.RowDefinitions><RowDefinition/><RowDefinition/><RowDefinition/><RowDefinition/></Grid.RowDefinitions><Grid.ColumnDefinitions><ColumnDefinition Width="1*"/><ColumnDefinition Width="2*"/></Grid.ColumnDefinitions><TextBlock Text="数字1" Grid.Row="0" Grid.Column="0"/><TextBlock Text="数字2" Grid.Row="1" Grid.Column="0"/><TextBlock Text="操作" Grid.Row="2" Grid.Column="0"/><TextBlock Text="结果" Grid.Row="3" Grid.Column="0"/><TextBox Text="{Binding Model.Num1}"  Grid.Row="0" Grid.Column="1"/><TextBox Text="{Binding Model.Num2}"  Grid.Row="1" Grid.Column="1"/><Button Content="加法"  Command="{Binding Model.BtnCommand}" Grid.Row="2" Grid.Column="1" Width="300"/><TextBox Text="{Binding Model.Rs}" Grid.Row="3" Grid.Column="1"/></Grid>
  1. view层 cs部分
namespace WpfMvvM.views
{/// <summary>/// AddView.xaml 的交互逻辑/// </summary>public partial class AddView : Window{public AddView(){InitializeComponent();// 设置当前窗体的数据上下文 为 AddViewModel 模型this.DataContext = new AddViewModel();}}
}

view层的Cs代码部分几乎为空,只写了当前的数据上下文环境为 ViewModel 模型。

点击按钮后触发,同时结果数据进行更新

在这里插入图片描述

相关文章:

WPF 项目中 MVVM模式 的简单例子说明

一、概述 MVVM 是 Model view viewModel 的简写。MVVM模式有助于将应用程序的业务和表示逻辑与用户界面清晰分离。 几个概念的说明&#xff1a; model :数据&#xff0c;界面中需要的数据&#xff0c;最好不要加逻辑代码view : 视图就是用户看到的UI结构 xaml 文件viewModel …...

基于nginx禁用访问ip

一、背景 网络安全防护时&#xff0c;禁用部分访问ip,基于nginx可快速简单实现禁用。 二、操作 1、创建 conf.d文件夹 在nginx conf 目录下创建conf.d文件夹 Nginx 扩展配置文件一般在conf.d mkdir conf.d 2、新建blocksip.conf文件 在conf.d目录新建禁用ip的扩展配置文…...

【第三阶段】kotlin语言的内置函数let

1.使用普通方法对集合的第一个元素相加 fun main() {//使用普通方法对集合的第一个元素相加var list listOf(1,2,3,4,5)var value1list.first()var resultvalue1value1println(result) }执行结果 2.使用let内置函数对集合的第一个元素相加 package Stage3fun main() {//使用…...

【C++入门到精通】C++入门 —— 模版(template)

阅读导航 前言一、模版的概念二、函数模版1. 函数模板概念2. 函数模板定义格式3. 函数模板的原理4. 函数模版的实例化&#x1f6a9;隐式实例化&#x1f6a9;显式实例化 5. 函数模板的匹配原则 三、类模板1. 类模板的定义格式2. 类模板的实例化 四、非类型模板参数1. 概念2. 定义…...

ARM汇编【3】:LOAD/STORE MULTIPLE PUSH AND POP

LOAD/STORE MULTIPLE 有时一次加载&#xff08;或存储&#xff09;多个值更有效。为此&#xff0c;我们使用LDM&#xff08;加载多个&#xff09;和STM&#xff08;存储多个&#xff09;。这些指令有一些变化&#xff0c;基本上只在访问初始地址的方式上有所不同。这是…...

Python之Qt输出UI

安装PySide2 输入pip install PySide2安装Qt for Python&#xff0c;如果安装过慢需要翻墙&#xff0c;则可以使用国内清华镜像下载&#xff0c;输入命令pip install --user -i https://pypi.tuna.tsinghua.edu.cn/simple PySide2&#xff0c;如下图&#xff0c; 示例Demo i…...

【1day】复现泛微OA某版本SQL注入漏洞

目录 一、漏洞描述 二、影响版本 三、资产测绘 四、漏洞复现 一、漏洞描述 泛微e-cology是一款由泛微网络科技开发的协同管理平台,支持人力资源、财务、行政等多功能管理和移动办公。泛微OA存在SQL注入漏洞,攻击者利用Web应用程序对用户输入验证上的疏忽,在输入的数据…...

安卓系列机型-禁止卸载某个APP 防止误卸载软件 无需root权限

安卓系列机型-禁止安装某软件 防止“沉迷游戏的小孩”操作解析_安卓机器的博客-CSDN博客 上一期讲了如何禁止安装某个app。今天讲下如何禁止卸载某app。正好相反的操作。任何操作有利有弊。主要看使用者如何对待使用。 &#x1f494;&#x1f494;&#x1f494;以腾讯的一款游…...

【算法系列篇】二分查找——这还是你所知道的二分查找算法吗?

文章目录 前言什么是二分查找算法1.二分查找1.1 题目要求1.2 做题思路1.3 Java代码实现 2.在排序数组中查找元素的第一个和最后一个位置2.1 题目要求2.2 做题思路2.3 Java代码实现 3.搜索插入位置3.1 题目要求3.2 做题思路3.3 Java代码实现 4.x的平方根4.1 题目要求4.2 做题思路…...

【前端从0开始】JavaSript——分支流程控制

流程控制 在任何一门程序设计语言中&#xff0c;都需要支持满足程序结构 化所需要的三种流程控制: ●顺序控制 ●分支控制&#xff08;条件控制&#xff09; ●循环控制 顺序控制&#xff1a;在程序流程控制中&#xff0c;最基本的就是顺序控制。程序会按照自上而下的顺序执行…...

Linux权限

Linux中一切皆文件&#xff0c;那么文件就应该有相对于的类型&#xff0c;而在Linux当中&#xff0c;类型不是直接看后缀来决定的。 -普通文件、文本、可执行、归档文件等d目录b块设备、block、磁盘c字符设备、键盘、显示器p管道文件s网络socket文件l链接文件 link 然后后面的九…...

PMP如何备考?学习方式这里有

预习阶段&#xff1a;强烈建议跟着习课视频学习&#xff08;自己看书真的很难看懂&#xff09;&#xff0c;初步了解PMBOK&#xff0c;有个大致印象&#xff1b; 精讲阶段&#xff1a;这个时候就需要静下心来深入了解各个知识模块&#xff0c;不仅是看PMBOK&#xff0c;还要尽…...

【Java转Go】快速上手学习笔记(四)之基础篇三

目录 泛型内置泛型的使用切片泛型和泛型函数map泛型泛型约束泛型完整代码 接口反射协程特点WaitGroupgoroutine的调度模型&#xff1a;MPG模型 channel介绍语法&#xff1a;举例&#xff1a;channel遍历基本使用和协程一起使用案例一案例二 select...casemain.go 完整代码 文件…...

vue中form和table标签过长

form标签过长 效果&#xff1a; 代码&#xff1a; <el-form-item v-for"(item,index) in ticketEditTable1" :label"item.fieldNameCn" :propitem.fieldName :key"item.fieldNameCn" overflow"":rules"form[item.fieldName…...

java基础复习(第七日)

java基础复习(七) 1.MQ如何避免消息重复投递或重复消费&#xff1f; 在消息生产时&#xff0c;MQ 内部针对每条生产者发送到消息生成一个 inner-msg-id&#xff0c;作为去重的依据&#xff08;消息投递失败并重传&#xff09;&#xff0c;避免重复的消息进入队列&#xff1b;…...

day24 | 理论基础、77. 组合

目录&#xff1a; 解题及思路学习 理论基础 回溯的本质是穷举&#xff0c;穷举所有可能&#xff0c;然后选出我们想要的答案&#xff0c;如果想让回溯法高效一些&#xff0c;可以加一些剪枝的操作&#xff0c;但也改不了回溯法就是穷举的本质。 回溯法&#xff0c;一般可以…...

数据结构(1)

数据结构其实就是将数据按照一定的关系组织起来的集合&#xff0c;用于组织和存储数据。 1.数据结构分类 1.逻辑结构 逻辑结构是从具体问题中抽象出来的模型&#xff0c;是抽象意义的结构&#xff0c;按照对象中数据的相互关系进行分类。 1>集合结构&#xff1a;集合结构中…...

10个非常有用的Python库,你知道几个?

整理&#xff5c;TesterHome 这里给大家介绍10个不是最流行但非常有用的Python库&#xff0c;希望可以提供参考帮助。 PyO3 PyO3是一个Rust库&#xff0c;可以让你在Rust中编写Python模块。它可以利用 Rust 的速度和安全性编写高性能的 Python 模块。 https://github.com/PyO3…...

linux安装 MySQL8 并配置开机自启动

目录 1.下载 mysql 安装包 2.上传并解压 mysql 3.修改 mysql 文件夹名 4.创建mysql 用户和用户组 5.数据目录 &#xff08;1&#xff09;创建目录 &#xff08;2&#xff09;赋予权限 6.初始化mysql &#xff08;1&#xff09;配置参数 &#xff08;2&#xff09;配置环…...

MySQL视图

一、视图-介绍及基本语法 视图&#xff08;View&#xff09;是一种虚拟存在的表。视图中的数据并不在数据库中实际存在&#xff0c;行和列数据来自定义视图的查询中使用的表&#xff0c;并且是在使用视图时动态生成的。 通俗的讲&#xff0c;视图只保存了查询的SQL逻辑&#xf…...

synchronized 学习

学习源&#xff1a; https://www.bilibili.com/video/BV1aJ411V763?spm_id_from333.788.videopod.episodes&vd_source32e1c41a9370911ab06d12fbc36c4ebc 1.应用场景 不超卖&#xff0c;也要考虑性能问题&#xff08;场景&#xff09; 2.常见面试问题&#xff1a; sync出…...

[10-3]软件I2C读写MPU6050 江协科技学习笔记(16个知识点)

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16...

学习STC51单片机31(芯片为STC89C52RCRC)OLED显示屏1

每日一言 生活的美好&#xff0c;总是藏在那些你咬牙坚持的日子里。 硬件&#xff1a;OLED 以后要用到OLED的时候找到这个文件 OLED的设备地址 SSD1306"SSD" 是品牌缩写&#xff0c;"1306" 是产品编号。 驱动 OLED 屏幕的 IIC 总线数据传输格式 示意图 …...

BCS 2025|百度副总裁陈洋:智能体在安全领域的应用实践

6月5日&#xff0c;2025全球数字经济大会数字安全主论坛暨北京网络安全大会在国家会议中心隆重开幕。百度副总裁陈洋受邀出席&#xff0c;并作《智能体在安全领域的应用实践》主题演讲&#xff0c;分享了在智能体在安全领域的突破性实践。他指出&#xff0c;百度通过将安全能力…...

CRMEB 框架中 PHP 上传扩展开发:涵盖本地上传及阿里云 OSS、腾讯云 COS、七牛云

目前已有本地上传、阿里云OSS上传、腾讯云COS上传、七牛云上传扩展 扩展入口文件 文件目录 crmeb\services\upload\Upload.php namespace crmeb\services\upload;use crmeb\basic\BaseManager; use think\facade\Config;/*** Class Upload* package crmeb\services\upload* …...

css3笔记 (1) 自用

outline: none 用于移除元素获得焦点时默认的轮廓线 broder:0 用于移除边框 font-size&#xff1a;0 用于设置字体不显示 list-style: none 消除<li> 标签默认样式 margin: xx auto 版心居中 width:100% 通栏 vertical-align 作用于行内元素 / 表格单元格&#xff…...

保姆级教程:在无网络无显卡的Windows电脑的vscode本地部署deepseek

文章目录 1 前言2 部署流程2.1 准备工作2.2 Ollama2.2.1 使用有网络的电脑下载Ollama2.2.2 安装Ollama&#xff08;有网络的电脑&#xff09;2.2.3 安装Ollama&#xff08;无网络的电脑&#xff09;2.2.4 安装验证2.2.5 修改大模型安装位置2.2.6 下载Deepseek模型 2.3 将deepse…...

Java编程之桥接模式

定义 桥接模式&#xff08;Bridge Pattern&#xff09;属于结构型设计模式&#xff0c;它的核心意图是将抽象部分与实现部分分离&#xff0c;使它们可以独立地变化。这种模式通过组合关系来替代继承关系&#xff0c;从而降低了抽象和实现这两个可变维度之间的耦合度。 用例子…...

GO协程(Goroutine)问题总结

在使用Go语言来编写代码时&#xff0c;遇到的一些问题总结一下 [参考文档]&#xff1a;https://www.topgoer.com/%E5%B9%B6%E5%8F%91%E7%BC%96%E7%A8%8B/goroutine.html 1. main()函数默认的Goroutine 场景再现&#xff1a; 今天在看到这个教程的时候&#xff0c;在自己的电…...

【Post-process】【VBA】ETABS VBA FrameObj.GetNameList and write to EXCEL

ETABS API实战:导出框架元素数据到Excel 在结构工程师的日常工作中,经常需要从ETABS模型中提取框架元素信息进行后续分析。手动复制粘贴不仅耗时,还容易出错。今天我们来用简单的VBA代码实现自动化导出。 🎯 我们要实现什么? 一键点击,就能将ETABS中所有框架元素的基…...