双向绑定 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一下,随意 - - 说点什么.. 嗯..前面 ...
随机推荐
- 14.1.2 Checking InnoDB Availability 检查InnoDB 可用性:
14.1.2 Checking InnoDB Availability 检查InnoDB 可用性: 确认你的server 是否支持InnoDB,使用 SHOW ENGINES 语句.(默认MySQL的 ...
- SDUT Fermat’s Chirstmas Theorem(素数筛)
Fermat's Chirstmas Theorem Time Limit: 1000ms Memory limit: 65536K 有疑问?点这里^_^ 题目描写叙述 In a letter ...
- 谈论multistage text input(中国输入法)下一个UITextView内容长度的限制
我以前写<如何更好地限制UITextField输入长度>.接使用 UIKIT_EXTERN NSString *const UITextFieldTextDidChangeNotifica ...
- C++ - Operator Precedence
The following table lists the precedence and associativity of C++ operators. Operators are listed to ...
- Codeforces 39E What Has Dirichlet Got to Do with That? 游戏+内存搜索
主题链接:点击打开链接 意甲冠军: 特定 a一箱 b球 不变n (球和箱子都不尽相同,样的物品) 设 way = 把b个球放到a个箱子中的方法数, 若way >= n则游戏结束 有2个人玩游戏. ...
- MIPS平台目标机安装Oprofile时出现error
在Debian下安装Oprofile 重要:应该使linux内核选项支持 在 .config 文件中设置CONFIG_PROFILING=y和CONFIG_OPROFILE=y. 重新编译,烧写.使用 ...
- 14.3.5.1 An InnoDB Deadlock Example
14.3.5 Deadlocks in InnoDB 14.3.5.1 An InnoDB Deadlock Example 14.3.5.2 Deadlock Detection and Rollb ...
- 11.4.2 排序或合并文件(sort命令) - 51CTO.COM
11.4.2 排序或合并文件(sort命令) - 51CTO.COM 11.4.2 排序或合并文件(sort命令) 2010-03-12 14:37 陆松年 电子工业出版社 我要评论(0) 字号:T ...
- C++环形矩阵填充实现
#include<iostream> #include<iomanip> #include<cstdlib> #include<ctime> #incl ...
- 【编程之美】java二进制实现重建
package com.cn.binarytree.utils; /** * @author 刘利娟 liulijuan132@gmail.com * @version 创建时间:2014年7月20日 ...