双向绑定 TwoWay MVVM
1前台代码
<Grid>
<StackPanel >
<Grid x:Name="gridOne">
<Grid.Resources>
<Style TargetType="TextBlock">
<Setter Property="FontSize" Value="34"/>
</Style>
</Grid.Resources>
<Grid.ColumnDefinitions>
<ColumnDefinition Width="auto"/>
<ColumnDefinition />
</Grid.ColumnDefinitions>
<Grid.RowDefinitions>
<RowDefinition Height="auto"/>
<RowDefinition Height="auto"/>
</Grid.RowDefinitions>
<TextBlock Text="姓名:" />
<TextBlock Grid.Column="1" Text="{Binding Name}"/>
<TextBlock Grid.Row="1" Text="城市:" />
<TextBlock Grid.Column="1" Grid.Row="1" Text="{Binding City}"/>
</Grid>
<Grid x:Name="gridTwp">
<Grid.Resources>
<Style TargetType="TextBlock">
<Setter Property="FontSize" Value="34"/>
</Style>
</Grid.Resources>
<Grid.ColumnDefinitions>
<ColumnDefinition Width="auto"/>
<ColumnDefinition />
</Grid.ColumnDefinitions>
<Grid.RowDefinitions>
<RowDefinition Height="auto"/>
<RowDefinition Height="auto"/>
</Grid.RowDefinitions>
<TextBlock Text="姓名1:" />
<TextBox Name="txtName" Grid.Column="1" Text="{Binding Name,Mode=TwoWay}"/>
<TextBlock Grid.Row="1" Text="城市1:" />
<TextBox Name="txtCity" InputScope="ChineseFullWidth" Grid.Column="1" Grid.Row="1" Text="{Binding City,Mode=TwoWay}"/>
</Grid>
</StackPanel>
</Grid>
2后台方法
public class Person : INotifyPropertyChanged
{
public event PropertyChangedEventHandler PropertyChanged;
protected void OnPropertyChanged([CallerMemberName] string property="")
{
if (PropertyChanged!=null)
{
PropertyChanged(this, new PropertyChangedEventArgs(property));
}
}
private string _name; public string Name
{
get
{
return _name;
} set
{
if (_name!=value)
{
_name = value;
OnPropertyChanged();
}
}
}
private string _city; public string City
{
get
{
return _city;
} set
{
if (_city != value)
{
_city = value;
OnPropertyChanged();
}
}
} }
3数据绑定
Person ps = new Person { Name="小刘" ,City="北京" };
gridOne.DataContext = ps;
gridTwp.DataContext = ps;
双向绑定 TwoWay MVVM的更多相关文章
- AngularJS中数据双向绑定(two-way data-binding)
1.切换工作目录 git checkout step-4 #切换分支,切换到第4步 npm start #启动项目 2.代码 app/index.html Search: <input ng-m ...
- js mvvm:闲来无事,实现一个只具最基本数据双向绑定的mvvm
近期项目内用knockoutjs. 想模拟实现数据双向绑定的基本功能. 只具有最基本的功能,且很多细节未曾考虑,也未优化精简. 能想到的缺少的模块 1事件监听,自定义访问器事件 2模版 3父子级 编码 ...
- AngularJS学习--- AngularJS中数据双向绑定(two-way data-binding) orderBy step4
1.切换工作目录 git checkout step- #切换分支,切换到第4步 npm start #启动项目 2.代码 app/index.html Search: <input ng-mo ...
- MVVM 框架解析之双向绑定
更好的阅读体验,点击 原文地址 MVVM 框架 近年来前端一个明显的开发趋势就是架构从传统的 MVC 模式向 MVVM 模式迁移.在传统的 MVC 下,当前前端和后端发生数据交互后会刷新整个页面,从而 ...
- 【学习笔记】剖析MVVM框架,简单实现Vue数据双向绑定
前言: 学习前端也有半年多了,个人的学习欲望还比较强烈,很喜欢那种新知识在自己的演练下一点点实现的过程.最近一直在学vue框架,像网上大佬说的,入门容易深究难.不管是跟着开发文档学还是视频教程,按步骤 ...
- vue实现数据双向绑定的原理
一.知识准备Object.defineProperty( )方法可以直接在一个对象上定义一个新属性,或者修改一个已经存在的属性,并返回这个对象.Object.defineProperty(obj,pr ...
- vue - 数据驱动,组件化, 双向绑定原理
1.数据驱动 传统的前端数据交互是用Ajax从服务端获取数据,然后操作DOM来改变视图: Vue.js 是一个提供了 MVVM 风格的双向数据绑定的 Javascript 库,专注于View 层.它让 ...
- vue 之 双向绑定原理
一.实现双向绑定 详细版: 前端MVVM实现双向数据绑定的做法大致有如下三种: 1.发布者-订阅者模式(backbone.js) 思路:使用自定义的data属性在HTML代码中指明绑定.所有绑定起来的 ...
- C#使用Xamarin开发可移植移动应用(3.进阶篇MVVM双向绑定和命令绑定)附源码
前言 系列目录 C#使用Xamarin开发可移植移动应用目录 源码地址:https://github.com/l2999019/DemoApp 可以Star一下,随意 - - 说点什么.. 嗯..前面 ...
随机推荐
- Swift - 环形进度条(UIActivityIndicatorView)的用法
Swift中,除了条形进度条外,还有环形进度条,效果图如下: 1,环形进度条的基本属性 (1)Style: Large White:比较大的白色环形进度条 White:白色环形进度条 Gray:灰色环 ...
- 外国的Delphi网站
www.phidels.com delphifr.com http://www.swissdelphicenter.com/torry/showcode.php?id=787 B4A delphifa ...
- 【Demo 0004】屏幕、窗体及视图基础知识
本章学习要点 1. 了解iOS中应用程序(UIApplication)与屏幕.窗体以及视图相关基础知识: 2. 掌握应用程序常用的属性与方法: 3. 掌握窗 ...
- POJ1422 最小路径覆盖入门
题意:DAG求最小路径覆盖. 注意:二分匹配只试用于求DAG的最小路径覆盖, 有环就不行,具体可以理解证明. 对n个点进行拆点,分成左右两排点,对于边<u, v> 建 <u', v ...
- Android 特殊符号的转码大全
项目中要在string.xml 中显示特殊符号,如@号冒号等,直接写肯定不行啦..只能考虑使用ASCII码进行显示: @号 @ :号 : 空格 以下为常见的ASCII十进制交换编码: --> ...
- C++中出现的计算机术语1
access labels(訪问标号) 类的成员能够定义为 private,这能够防止使用该类型的代码訪问该成员. 成员还能够定义为 public,这将使该整个程序中都可訪问成员. address( ...
- hdu 4707 Pet 2013年ICPC热身赛A题 dfs水题
题意:linji的仓鼠丢了,他要找回仓鼠,他在房间0放了一块奶酪,按照抓鼠手册所说,这块奶酪可以吸引距离它D的仓鼠,但是仓鼠还是没有出现,现在给出一张关系图,表示各个房间的关系,相邻房间距离为1,而且 ...
- Swift - 使用UIDatePicker实现倒计时功能
如果使用UIDatePicker时将模式设置为CountDownTimer,即可让该控件作为倒计时器来使用.效果图如下: 下面是代码示例: 1 2 3 4 5 6 7 8 9 10 11 12 ...
- Android自适应不同屏幕几种方法
因为Android设备的屏幕尺寸.分辨率区别很大.假设希望我们的应用可以在不同屏幕尺寸或分辨率的Android设备上执行,即更换Android设备后界面和字体不会因此变得混乱.则须要考虑屏幕的 ...
- Html 内嵌 选择器属性 Dom操作 JavaScript 事件
HTML标签: 一.通用标签(一般标签) 1.格式控制标签 <font color="#6699aa" face="楷体" size="24&q ...