使用mvvm框架来实现一个简单加法器。最终效果如下,点击按钮可以对上面两个文本框中的数字进行相加得出结果显示在第三个文本框中。重点在于看mvvm框架下程序该怎么写。使用communitytoolkit.mvvm框架,通过nuget进行安装。
整个工程结构
calcmodel.cs该文件中存放数据类,类中定了三个属性input1、input2、result。分别代表输入1、输入2和计算结果。和一般的属性不同,该model属性为了实现属性变化可以进行通知和一般的属性有些区别。
类要继承自observableobject属性set要调用setproperty方法。using system;using system.collections.generic;using system.linq;using system.text;using system.threading.tasks;using communitytoolkit.mvvm;using communitytoolkit.mvvm.componentmodel;namespace wpfapp15.model{ public class calcmodel:observableobject { int input1 = 0; public int input1 { get = > input1; set { setproperty(ref input1, value); } } int input2 = 0; public int input2 { get = > input2; set { setproperty(ref input2, value); } } int result = 0; public int result { get = > result; set { setproperty(ref result, value); } } }}myviewmodel.cs这个部分是业务核心内容,连接view和model之间的桥梁。因为我们底层的model已经具备了属性通知的功能,所以在这个层次里面不需要再次封装。有可能我们model来自于别人写好的不能修改还要支持属性通知,那就要在这里进行再次封装才能和view进行绑定。
该层实现了一个命令cmdcalc,可以和view层绑定进行加法的计算。借用mvvm框架实现命令很简单:
定义一个icommand接口的属性cmdcalc在类构造函数中创建一个relaycommand的实例赋值给cmdcalcrelaycommand的参数calc方法中实现了具体的计算using system;using system.collections.generic;using system.linq;using system.text;using system.threading.tasks;using system.windows.input;using communitytoolkit.mvvm;using communitytoolkit.mvvm.componentmodel;using communitytoolkit.mvvm.input;using wpfapp15.model;namespace wpfapp15.viewmodel{ public class myviewmodel { public calcmodel model { get; set; } public icommand cmdcalc { get;} private void calc() { model.result=model.input1+model.input2; } public myviewmodel() { model=new calcmodel(); cmdcalc = new relaycommand(calc); } }}mainwindow.xaml这个就是view层,负责界面的显示。这里面重点的也就是三个textbox和一个button。三个textbox分别绑定了model的三个属性。button绑定了cmdcalc命令,命令可以在按钮点击的时候被触发,替代了传统的click事件。
还有一步目前还不能工作,还要在主窗口的构造函数中设置下datacontext,这样view层的绑定才知道去哪里寻找model.input1``model.input2``model.result``cmdcalc这些属性和命令。
public partial class mainwindow : window{ public myviewmodel vm=new myviewmodel(); public mainwindow() { initializecomponent(); this.datacontext = vm; }}到此为止这样一个简单的例子就展示了mvvm的整体一个基本结构。把数据、界面、业务逻辑给分开在不同的层次中,使开发更加清晰,维护更加方便。
昔日的手环巨头Jawbone已然不复往昔 再见了
机器学习与数据挖掘的对比与区别
格兰仕大批冰洗产品入驻苏宁 10kg洗烘一体机成爆款
一文从0到1掌握用户画像知识体系
专访回天新材董事长章锋:“国产替代”的逆袭,中美贸易摩擦的新机遇
使用MVVM框架实现一个简单加法器
瞬态抑制装置和设备及抑制器摘要
特斯拉上海超级工厂内部生产场景首次公开 自动化程度非常高科技感十足
你不知道的珞石机器人
一款自带吸睛魔力的智能试妆镜,它到底有多厉害
台积电公布了2020年第四季度的业绩
上海大学大工程中心再添新装备,《电子实习》又增新课程——柔性电路制作
精密MEMS传感器对于导航的重要性
手机芯片性能排行
小米新机发布:除了小米5X、MIUI9还有一个大惊喜,小米6亮银版上市时间正式公布:限量100台3999元买吗?
redis集群状态查看命令
建筑电气施工安装前期的准备工作和技术要点
LOTO锁具与全自动锁之间的差别是怎样的
探讨模拟与数字麦克风灵敏度方面的差异
PWM模式的电流驱动成为厂商新选择