一、概述

本文与其说是MVVMLight框架的学习,不如说是温故一下数据的双向绑定。

二、Demo

建立好MVVMLight框架后的Wpf工程后,建立一个Model。Model、View以及ViewModel的代码如下:

 1 using GalaSoft.MvvmLight;
2
3 namespace MvvmLightDemo1.Model
4 {
5 public class WelcomeModel : ObservableObject
6 {
7 private string welcomeMsg;
8 public string WelcomeMsg
9 {
10 get { return welcomeMsg; }
11 set { welcomeMsg = value; RaisePropertyChanged(() => WelcomeMsg); }
12 }
13 }
14
15 }
 1 using GalaSoft.MvvmLight;
2 using MvvmLightDemo1.Model;
3
4 namespace MvvmLightDemo1.ViewModel
5 {
6 public class MainViewModel : ViewModelBase
7 {
8 private WelcomeModel welcomeModel;
9 public WelcomeModel WelcomeModel
10 {
11 get { return welcomeModel; }
12 set { welcomeModel = value; RaisePropertyChanged(() => WelcomeModel); }
13 }
14 /// <summary>
15 /// Initializes a new instance of the MainViewModel class.
16 /// </summary>
17 public MainViewModel()
18 {
19 WelcomeModel = new WelcomeModel() { WelcomeMsg = "Welcome to MVVMLight World!" };
20 }
21 }
22 }
 1 using CommonServiceLocator;
2 using GalaSoft.MvvmLight.Ioc;
3
4 namespace MvvmLightDemo1.ViewModel
5 {
6 /// <summary>
7 /// This class contains static references to all the view models in the
8 /// application and provides an entry point for the bindings.
9 /// </summary>
10 public class ViewModelLocator
11 {
12 /// <summary>
13 /// Initializes a new instance of the ViewModelLocator class.
14 /// </summary>
15 public ViewModelLocator()
16 {
17 ServiceLocator.SetLocatorProvider(() => SimpleIoc.Default);
18 SimpleIoc.Default.Register<MainViewModel>();
19 }
20
21 public MainViewModel Main
22 {
23 get
24 {
25 return ServiceLocator.Current.GetInstance<MainViewModel>();
26 }
27 }
28
29 public static void Cleanup()
30 {
31 // TODO Clear the ViewModels
32 }
33 }
34 }
 1 <Window x:Class="MvvmLightDemo1.MainWindow"
2 xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
3 xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
4 xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
5 xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
6 xmlns:local="clr-namespace:MvvmLightDemo1"
7 mc:Ignorable="d"
8 Title="MVVMLIghtDemo1" Height="350" Width="525" Background="#FF699DC1">
9 <Window.DataContext>
10 <Binding Path="Main" Source="{StaticResource Locator}"></Binding>
11 </Window.DataContext>
12 <Grid>
13 <StackPanel >
14 <TextBlock Text="{Binding WelcomeModel.WelcomeMsg}" FontSize="28" Foreground="#FFBB4913" HorizontalAlignment="Center"/>
15 <StackPanel Orientation="Horizontal">
16 <Label Content="修改信息:" VerticalContentAlignment="Center" FontSize="20" Foreground="#FFC55D21"></Label>
17 <TextBox Text="{Binding Path=WelcomeModel.WelcomeMsg,Mode=TwoWay}" FontSize="20" Foreground="#FFBB4913"/>
18 <Button Content="LostFocus" Background="#FF22A658"></Button>
19 </StackPanel>
20
21 </StackPanel>
22 <StackPanel VerticalAlignment="Top" HorizontalAlignment="Center" >
23
24 </StackPanel>
25 </Grid>
26 </Window>

在View中,我们分别让一个TextBox和一个TextBlock绑定WelcomeModel中的WelcomeMsg属性
当我们在TextBox中输入文本的时候,利用双向绑定更新WelcomeModel中的WelcomeMsg属性,WelcomeMsg属性又通过RaisePropertyChanged来激发属性变更的事件,通知UI,如此一来,界面上的TextBlock中的内容就会更新。

但是,当我们运行以上程序的时候,修改TextBox里的内容,TextBlock中的内容并没有实时更新,而是需要按键盘上的Tab键或者点击LostFocus按钮,让TextBox失去焦点。

这就引出了一个问题,当目标更新的时候,数据源是否更新以及更新的时机?

为了解决这个问题,我们可以使用Binding的UpdateSourceTrigger和Mode属性

UpdateSourceTrigger属性的作用:当做何种改变的时候通知数据源我们做了改变,默认值是LostFocus,这就解释了为什么我们上述程序需要TextBox失去焦点的时候,TextBlock的内容才会更新。

UpdateSourceTrigger可以取以下值:

UpdateSourceTrigger取值
枚举类型 说明
Default 默认值(默认LostFocus)
Explicit 当应用程序调用 UpdateSource 方法时生效
LostFocus 失去焦点的时候触发
PropertyChanged 属性改变时立即触发

为了让TextBlock中的内容随着TextBox的内容实时变化,我们可以将绑定修改成如下格式:

<TextBox Text="{Binding Path=WelcomeModel.WelcomeMsg,Mode=TwoWay,UpdateSourceTrigger=PropertyChanged}" FontSize="20" Foreground="#FFBB4913"/>

Mode属性取值如下:

通过以上Demo,我们应达成以下共识:

1)ViewModel => View更新的时候,我们一般在属性的set块中加入RaisePropertyChanged,它的作用是当数据源改变的时候,会触发PropertyChanged事件,通知UI属性发生了变更;

2)View => ViewModel 更新的时候,我们一般利用BindingUpdateSourceTriggerMode属性。

MVVMLight学习笔记(三)---数据双向绑定的更多相关文章

  1. Vue源码学习(一)———数据双向绑定 Observer

    从最简单的案例,来学习Vue.js源码. <body> <div id='app'> <input type="text" v-model=" ...

  2. SpringMVC 学习笔记(三)数据的校验

    34. 尚硅谷_佟刚_SpringMVC_数据绑定流程分析.avi 例如:在jsp中输入一个String字符串类型,需要转换成Date类型的流程如下 convertservice对传入的数据进行转换 ...

  3. AngularJS学习--- AngularJS中数据双向绑定(two-way data-binding) orderBy step4

    1.切换工作目录 git checkout step- #切换分支,切换到第4步 npm start #启动项目 2.代码 app/index.html Search: <input ng-mo ...

  4. 【学习笔记】剖析MVVM框架,简单实现Vue数据双向绑定

    前言: 学习前端也有半年多了,个人的学习欲望还比较强烈,很喜欢那种新知识在自己的演练下一点点实现的过程.最近一直在学vue框架,像网上大佬说的,入门容易深究难.不管是跟着开发文档学还是视频教程,按步骤 ...

  5. 前端笔记之微信小程序(二){{}}插值和MVVM模式&数据双向绑定&指令&API

    一.双花括号{{}}插值和MVVM模式 1.1 体会{{}}插值 index.wxml的标签不是html的那些标签,这里的view就是div. {{}}这样的插值写法,叫做mustache语法.mus ...

  6. 我的angularjs源码学习之旅3——脏检测与数据双向绑定

    前言 为了后面描述方便,我们将保存模块的对象modules叫做模块缓存.我们跟踪的例子如下 <div ng-app="myApp" ng-controller='myCtrl ...

  7. angular学习笔记(三十)-指令(7)-compile和link(2)

    继续上一篇:angular学习笔记(三十)-指令(7)-compile和link(1) 上一篇讲了compile函数的基本概念,接下来详细讲解compile和link的执行顺序. 看一段三个指令嵌套的 ...

  8. Vue数据双向绑定原理及简单实现

    嘿,Goodgirl and GoodBoy,点进来了就看完点个赞再go. Vue这个框架就不简单介绍了,它最大的特性就是数据的双向绑定以及虚拟dom.核心就是用数据来驱动视图层的改变.先看一段代码. ...

  9. 深入理解Proxy 及 使用Proxy实现vue数据双向绑定

    阅读目录 1.什么是Proxy?它的作用是? 2.get(target, propKey, receiver) 3.set(target, propKey, value, receiver) 4.ha ...

  10. 学习笔记(三)--->《Java 8编程官方参考教程(第9版).pdf》:第十章到十二章学习笔记

    回到顶部 注:本文声明事项. 本博文整理者:刘军 本博文出自于: <Java8 编程官方参考教程>一书 声明:1:转载请标注出处.本文不得作为商业活动.若有违本之,则本人不负法律责任.违法 ...

随机推荐

  1. Java基础00-循环语句7

    1. for循环语句 1.1 循环结构 1.2 for循环语句的格式 执行流程图: 1.3 案例 (1)输出数据 (2)求和 (3)求偶数和 (4)水仙花 public static void mai ...

  2. 程序员们,还在挣扎着上不了github吗

    前言 无兄弟,不篮球:无github,不代码.github和stackoverflow是程序员们的最爱,哪怕是github总是在抽疯,虐了程序员们千百遍,但他们还是想各种办法艰难地在github分享他 ...

  3. springMVC-4-处理模型数据

    返回模型数据(Model) index.jsp中 <h1>获取模型数据</h1> <a href="/model/test1">ModelAnd ...

  4. java反序列化提取payload之xray 高级版的shiro回显poc的提取过程

    本文中xray高级版shiro payload来源于雷石安全实验室公众号发布的shiroExploit.jar 感谢雷石安全实验室,雷石安全实验室牛逼 本文主要描述如何从shiro的payload中提 ...

  5. Spring自动装配(二)

    为什么Spring要支持Autowire(自动装配) 先写几个类,首先定义一个Animal接口表示动物: 1 public interface Animal { 2 3 public void eat ...

  6. C++第三十七篇 -- 调试驱动程序

    上一篇写的KMDF程序是通过串口进行配置的,那么我们在VS中Attach to process外,可以直接用Winbdg进行调试,winbdg.exe所在路径为C:\Program Files (x8 ...

  7. jvm源码解读--08 创建oop对象,将static静态变量放置在oop的96 offset处

    之前分析的已经加载的.Class文件中都没有Static 静态变量,所以也就没这部分的解析,自己也是不懂hotspot 将静态变量放哪里去了,追踪源码之后,看清楚了整个套路,总体上来说,可以举例来说对 ...

  8. anyRTC视频连麦demo上线啦!

    音频连麦demo一经问世就得到开发者的一致好评,有很多开发者咨询视频连麦的demo该怎么去实现,本着让"视频交付更简单"的理念,我们推出了视频连麦demo! 音视频技术不仅局限用于 ...

  9. 单片机学习(五)LCD1602和矩阵键盘的使用

    目录 LCD1602的使用 矩阵键盘的使用 矩阵键盘相关电路图 按键检测扫描 制作密码输入器 LCD1602的使用 首先LCD1602是外接在开发板上的液晶屏外设,如图所示: 我们主要使用它来代替动态 ...

  10. P2470 压缩 TJ

    前言 洛谷题解 题目传送门 正解:区间/线性 dp(本篇题解介绍线性做法) 人生第一道紫题! 也是今天考试看自闭了就没做的 T4,结果没想到是紫,虽然是一道水紫呢-- 考试的 T5 是跳房子,蓝题 q ...