WPF引用MVVM框架与使用方法

1.NuGet引用MVVM框架包

引入该框架包之后, 默认会在目录下创建ViewModel层的示例代码

2.第二步, 通过在MainViewModel中创建一些业务代码, 将其与MainWindow.xaml 通过上下文的方式关联起来, 而MainWindow则是通过Binding的写法 引用业务逻辑的部分。

在MainViewModel中, 添加同一个班级名称, 与学生列表, 分别用于显示在文本 和列表上展示, Command则用于绑定DataGrid的双击命令上, 通过双击, 展示点击行的学生信息:

MainViewModel 继承了 ViewModelBase, 该继承的父类实在MVVM框架中, 实现双向通知的基类, 通过引用该类, 那么其之类的属性则可通过 添加 RaisePropertyChanged() 即可。

- 为MainViewModel添加一些模拟数据

-  设计UI层, 添加一个文本用于显示班级名称,  添加一个DataGrid 用于展示学生列表,  同时DataGrid中添加一个绑定的命令(红色区域)

关于上面红色圈的代码, 为一种绑定语法, 主要在MouseBinding中, MouseAction 以为触发的事件类型, CommandParameter 则是命令传递的参数, 也就是DataGrid选中的一行的类型 Student。

Command 则是MainViewModel中定义的Command

- 现在, 前端的绑定工作已经设置好, 后台的代码也添加完成, 目前只需要将MainViewModel 与MainWindow 通过MainWindow的DataContext关联即可

运行效果如下:

RaisePropertyChanged() 实现动态通知更新

+ 通过set访问器更新ClassName的同时, 调用RaisePropertyChanged 方法, 界面刷新更新后的值

+ 添加一个无参数的UpdateCommand , 并设置为 UpdateText 手动把ClassName更新为 "高三三班":

+ UI层添加一个简单按钮, 绑定后台的UpdateCommand命令

运行测试效果:

本章测试代码下载

到此这篇关于WPF引用MVVM框架与使用方法的文章就介绍到这了。希望对大家的学习有所帮助，也希望大家多多支持我们。

赞 (0)

相关推荐

  • MVVM模式下WPF动态绑定展示图片

    MVVM模式下WPF动态绑定展示图片

    MVVM模式下WPF动态展示图片,界面选择图标,复制到项目中固定目录下面,保存到数据库的是相对路径,再次读取的时候是根据数据库的相对路径去获取项目中绝对路径的图片展示. 首先在ViewModel中 //属性定义 BitmapImage _ImageSource; /// <summary> /// 显示的图标 /// </summary> public BitmapImage ImageSource { get { return _ImageSource; } set { _Ima

  • 关于WPF异步MVVM等待窗体的介绍

    关于WPF异步MVVM等待窗体的介绍

    需求描述•在ViewModel中处理Model中的数据需要一定时间的等待•ViewModel或Model在获取数据或访问同步服务时有一定延迟需要等待•ViewModel操作View加载数据需要一段时间解决办法•显示一个等待UI,当数据处理完毕或服务接口返回后等待UI消失转动齿轮控件•参考开源实现SprocketControl :http://wpfspark.codeplex.com/等待控件 复制代码 代码如下: <Grid>     <local:SprocketControl Gr

  • WPF MVVM示例讲解

    WPF MVVM示例讲解

    在没给大家讲解wpf mwm示例之前先给大家简单说下MVVM理论知识: WPF技术的主要特点是数据驱动UI,所以在使用WPF技术开发的过程中是以数据为核心的,WPF提供了数据绑定机制,当数据发生变化时,WPF会自动发出通知去更新UI. 我们使用模式,一般是想达到高内聚低耦合.在WPF开发中,经典的编程模式是MVVM,是为WPF量身定做的模式,该模式充分利用了WPF的数据绑定机制,最大限度地降低了Xmal文件和CS文件的耦合度,也就是UI显示和逻辑代码的耦合度,如需要更换界面时,逻辑代码修改很少,

  • WPF MVVM制作发送短信小按钮

    WPF MVVM制作发送短信小按钮

    最近做一个项目,因为涉及到注册,因此需要发送短信,一般发送短信都有一个倒计时的小按钮,因此,就做了一个,在此做个记录. 一.发送消息 没有调用公司的短信平台,只是模拟前台生成一串数字,将此串数字输出一下. 在这个部分写了两个类文件:一个是生成随机数,一个是模拟发送此数字的. 1.因为生成几位随机数,是必须要到项目上线之前才能定的,因此,写了一个带参数的函数,如下 /// <summary> /// 生成随机验证码 /// </summary> public static class

  • WPF引用MVVM框架与使用方法

    WPF引用MVVM框架与使用方法

    1.NuGet引用MVVM框架包 引入该框架包之后, 默认会在目录下创建ViewModel层的示例代码 2.第二步, 通过在MainViewModel中创建一些业务代码, 将其与MainWindow.xaml 通过上下文的方式关联起来, 而MainWindow则是通过Binding的写法 引用业务逻辑的部分. 在MainViewModel中, 添加同一个班级名称, 与学生列表, 分别用于显示在文本 和列表上展示, Command则用于绑定DataGrid的双击命令上, 通过双击, 展示点击行的学

  • 引用jquery框架后出错的解决方法

    问题描述:当引用了jquery框架后,页面的js不能正常工作. 后面我的解决办法:是因为在引用 jquery的框架时的代码为 <script type="text/javascript" src="resources/js/jquery/jquery-1.9.1.min.js" />  改为如下的引用方式 <script type="text/javascript" src="resources/js/jquery/j

  • js实现一个简单的MVVM框架示例

    以前都是默默地看园子里的文章,猥琐的点赞,今天也分享一下自己用js实现的一个简单mvvm框架. 最初只做了自动绑定事件,后面又参考学习了vue,knouckout以及argular实现方式,以及结合自己做WPF的一些经验,增加了属性绑定,今天又稍微整理了下,完善了部分功能,把代码提交到了码云:https://gitee.com/zlj_fy/Simple-MVVM 先简单介绍下用法: <form class="form-horizontal" role="form&qu

  • vue.js中mint-ui框架的使用方法

    vue.js中mint-ui框架的使用方法

    本文为大家分享了vue.js中mint-ui框架的使用方法,具体内容如下 1.安装vue2.0的mint-ui框架 npm install mint-ui -save 2.引用和使用框架,我用的是全部组件,也可以按需选择加载相应的组件,不过要使用babel-plugin-component import Mint from 'mint-ui'; Vue.use(Mint); 3.创建一个header.vue组件,里面写入mint-ui的头部组件 <template> <mt-header

  • vue,angular,avalon这三种MVVM框架优缺点

    本文的主要内容是参考官方文档说明总结而来: Vue.js Vue.js @尤雨溪 老师写的一个用于创建 web 交互界面的库,是一个精简的 MVVM.从技术角度讲,Vue.js 专注于 MVVM 模型的 ViewModel 层.它通过双向数据绑定把 View 层和 Model 层连接了起来.实际的 DOM 封装和输出格式都被抽象为了Directives 和 Filters.Vue.js和其他库相比是一个小而美的库,作者的主要目的是通过一个尽量简单的 API 产生可反映的数据绑定和可组合的视图组件

  • jsp页面中引用其他页面的简单方法

    初看这个标题....大家的感觉一定是好2啊.....博主一定要说jsp的动态引用(jsp:include)和静态引用(@include)了.介绍这两者区别的文章已经烂大街了..一搜一大把..博主竟然还来介绍这些老古董..果断alt+F4... 如果你确实是这么想的...那请先别急着关闭页面...今天我来分享一下自己的理解,算是对烂大街的东西的一点补充吧...(后面文字会比较啰嗦) 首先先说明下为什么会去讨论这个话题. 我在写自己的博客程序的时候(blogv2.labofjet.com),程序中的

  • Android引用开源框架通过AsyncHttpClient实现文件上传

    Android引用开源框架通过AsyncHttpClient实现文件上传

    引用开源框架通过AsyncHttpClient进行文件上传,具体内容如下 一.步骤: 1.添加权限(访问网络权限和读写权限) 2.获取上传文件路径并判断是否为空 3.若不为空,创建异步请求对象 4.创建上传文件路径 5.执行post请求(指定url路径,封装上传参数,新建AsyncHttpResponseHandler方法) 二.查看参考文档  三.实例项目解析 运行效果如下: 在本地文件夹中查看是否获取到图片,如下图显示 重点代码:均有详细解析,请认真查看注释 1.在AndroidManife

  • Spring框架依赖注入方法示例

    在阅读这篇文章之前,大家可以先参阅<理解Spring中的依赖注入和控制反转>一文,了解下依赖注入和控制反转的相关内容. 三种依赖注入的方式 属性注入,通过setter方法注入bean的属性值或依赖的对象 构造注入 工厂方法注入(很少使用) 例子 这里我们使用了spring-4.3.2,maven配置文件 <dependency> <groupid>org.springframework</groupid> spring-core</artifactid

  • 前端MVVM框架解析之双向绑定

    前端MVVM框架解析之双向绑定

    MVVM 框架 近年来前端一个明显的开发趋势就是架构从传统的 MVC 模式向 MVVM 模式迁移.在传统的 MVC 下,当前前端和后端发生数据交互后会刷新整个页面,从而导致比较差的用户体验.因此我们通过 Ajax 的方式和网关 REST API 作通讯,异步的刷新页面的某个区块,来优化和提升体验. MVVM 框架基本概念 在 MVVM 框架中,View(视图) 和 Model(数据) 是不可以直接通讯的,在它们之间存在着 ViewModel 这个中间介充当着观察者的角色.当用户操作 View(视

  • tp5(thinkPHP5)框架连接数据库的方法示例

    本文实例讲述了thinkPHP5框架连接数据库的方法.分享给大家供大家参考,具体如下: 1.配置文件目录 tp5\application\database.php 通过配置文件来连接.. 也可以通过方法链接 在控制器里方法链接数据库 :查询时写法 和使用系统的DB类方法略有差异 // 使用方法配置数据库连接 public function data1 () { $DB = Db::connect([ // 数据库类型 'type' => 'mysql', // 服务器地址 'hostname'

随机推荐