学习WPF——元素绑定

概念

从源对象提取一些信息,并用这些信息设置目标对象的属性

示例



在给TextBlock控件的FontSize属性赋值时,我们使用了绑定表达式

数据绑定表达式使用XAML的标记扩展(因此具有花括号)(参见:)

这里创建了一个System.Windows.Data.Binding对象,所以绑定表达式以单词binding开头

在本例中只设置了Binding对象的两个属性ElementName和Path属性


ElementName

指定源元素

Path

指定源元素中的属性

Mode

OneWay:

当源属性变化时,更新目标属性

TwoWay:

当源属性变化时,更新目标属性,并且,当目标属性变化时,更新源属性

OneTime:

最初根据源属性值设置目标属性,其后的所有改变都会被忽略

OneWayToSource:

当目标属性变化时,更新源属性,源属性变化时,目标属性不变

Default:

根据目标属性的设置而定


UpdateSourceTrigger

如果我们把一个属性的值绑定到一个文本框的Text上,那么只有当这个文本框失去焦点时才会更新目标属性的值;如果你想实时更新目标属性的值该如何处理呢?那么这时就要设置UpdateSourceTrigger属性了,这个属性有一下几种可能的情况

PropertyChange:

当目标属性发声变化时立即更新

LostFocus:

当目标属性发生变化,并且目标失去焦点时更新

Explicit:

除非调用BindingExpression.UpdateSource()方法,否则无法更新源

Default:

根据目标属性的设置来确定更新行为,大多数元素都是PropertyChange设置,但TextBox.Text属性是LostFocus设置


Delay

有的时候需要延迟一段时间再更新目标属性的值,此时需要设置Delay属性,单位是毫秒

Source
绑定到非元素对象;与ElementName互斥
该属性指向源对象的引用(就是提供数据的对象)
以下代码可以绑定到已经存在的对象

以下代码可以绑定到已经存在的资源

RelativeSource


绑定到非元素对象;与ElementName互斥

Self:

表达式绑定到同一元素的另一属性上

FindAncestor:

表达式绑定到父元素

PreviousData:

绑定到数据列表中的前一个数据项,应用在数据列表元素中

TemplateParent:

绑定到应用模版的元素,在模版内这种设置才生效

说明

除了绑定到元素的属性,还可以绑定到元素的属性的属性或者存在索引器的属性

比如:

MyElement.Property.OtherProperty

MyElement.Property[2]


当绑定到格式不正确的元素属性上时,WPF并不会因此而编译不通过


双向绑定比单向绑定开销更大,OneTime绑定比双向绑定和单向绑定的开销都小


尽量使用明确的绑定模式,而不要使用Default绑定模式


源属性改变,通知到目标属性后,目标属性还可以作为源属性,通知下一个目标属性,这就是多绑定

使用代码创建绑定

在上面的示例中完全可以使用C#代码创建绑定

代码如下

使用代码删除绑定

如果像通过代码删除某一个元素的绑定,可以通过下面两种方式完成

使用代码检索绑定 

可以使用如下方式获取一个元素的绑定对象

使用DataContext绑定

可以先对父元素设置DataContext属性,然后在子元素中就可以轻松的使用父元素设置的DataContext所指向的对象了

修改记录

2015-1-5:完成一部分内容

参考资料

《Pro WPF 4.5 in C# 4th Edition》

时间: 2024-11-10 07:32:59

学习WPF——元素绑定的相关文章

vue.js学习笔记之绑定style样式和class列表_javascript技巧

数据绑定一个常见需求是操作元素的 class 列表和它的内联样式.因为它们都是 attribute,我们可以用 v-bind 处理它们:只需要计算出表达式最终的字符串.不过,字符串拼接麻烦又易错.因此,在 v-bind 用于 class 和 style 时,Vue.js 专门增强了它.表达式的结果类型除了字符串之外,还可以是对象或数组. 一.绑定Class属性. 绑定数据用v-bind:命令,简写成: 语法:<div v-bind:class="{ active: isActive }&q

JS事件调试 - 查找HTML元素绑定的事件以及绑定代码所在位置

日常的网页开发调试工作中,经常需要知道指定的某个网页元素绑定了哪些事件以及绑定代码的位置,下面介绍三种用来跟踪页面中的事件的方法. 1.使用firefox调试 我们可以使用firefox的debug工具,找到指定元素,然后查看事件面板 2.使用chrome调试 在要检查的元素上单击右键选择查看元素,然后,右边的面板中会显示style标签,切换到EventListenrs标签,可以看到相关的事件绑定信息.点击最右边的文件名称还可以跳转到事件定义代码在脚本文件中的位置.不过这种方法并非总是可用,下面

浅谈Jquery为元素绑定事件

  jQuery 使用on绑定动态生成的元素时,不能直接用该对象操作,而是选择其非动态生成的父节点然后再找到本身才能达到效果.大家看看源码就知道了. Jquery如何为元素绑定事件,小记一下,防止忘记了! ? 1 2 3 4 5 6 7 8 9 10 11 $(this).bind({ click:function(){ window.open(alert('OK')); }, mouseover:function(){ window.open(alert('OK')); }, mouseout

jQuery给动态添加的元素绑定事件的方法

 这篇文章主要介绍了jQuery给动态添加的元素绑定事件的方法,对比了jQuery中事件绑定的方法以及常见版本使用绑定的区别,具有一定参考借鉴价值,需要的朋友可以参考下     本文实例讲述了jQuery给动态添加的元素绑定事件的方法.分享给大家供大家参考.具体分析如下: jquery中绑定事件一般使用bind,或者click,但是这只能是对已经加载好的元素定义事件,那些后来添加插入的元素则需要另行绑定.在1.7版本以前使用live.但是在1.8版本以后推荐使用on.这里介绍jQuery中如何给

jquery1.10给新增元素绑定事件的方法

 jquery1.10去除了.live()方法,新增了一个.on()方法来给元素绑定事件,下面有个不错的示例,大家可以参考下 jquery1.10去除了.live()方法,新增了一个.on()方法来给元素绑定事件,具体用法如下:    on(events,[selector],[data],fn)  代码如下: $("#dataTable tbody tr").on("click", function(event){  alert($(this).text()); 

页面元素绑定jquery toggle后元素隐藏的解决方法

元素绑定jquery中的toggle后,元素隐藏,开始的时候 我怎么也没想到是这里有问题,我找了半天才发现是因为绑定了toggle方法 到今天实习已经一个多月了,公司给我布置的任务很少,哎,感觉有点不爽啊.既然这样,那我还是有事情做的,写毕业设计.言归正传,我今天在写毕业设计的时候,在给一个元素绑定jquery的toggle方法之后奇迹发生了,绑定这个方法的元素全部隐藏了.开始的时候 我怎么也没想到是这里有问题,我找了半天才发现是因为绑定了toggle方法.可是为什么绑定这个方法之后元素会隐藏呢

javascrpit-js为元素绑定不同点击事件时出现问题

问题描述 js为元素绑定不同点击事件时出现问题 var sideRight = document.getElementById('sideright'); var side = document.getElementsByClassName('side-icon'); var flag = true; for (var i = 0; i < side.length; i++) { (function() { if (flag) { side[i].addEventListener('click'

wpf命令绑定附加事件传递的过程

问题描述 wpf命令绑定附加事件传递的过程 命令源在命令绑定的范围内向命令目标发送命令,但是当命令源不在命令绑定范围内的时候,命令绑定的附加事件是如何传送的呢?请大侠们帮我看一下下面代码附加事件的传送过程是什么样的?是怎么从命令源传到命令目标的? 还有在命令目标不由程序员指定的时候,不应该是当前焦点所在为命令目标吗,为什么添加监视中的命令目标为空呢? xaml代码如下: .cs代码如下: public RoutedCommand clearCmd = new RoutedCommand("Cle

javascript-菜鸟求js大神帮忙!!为什么我这段js代码只有第一个元素绑定了事件

问题描述 菜鸟求js大神帮忙!!为什么我这段js代码只有第一个元素绑定了事件 <script> window.onload=function(){ var oParent=document.getElementById("aa"); var boxs=oParent.getElementsByClassName("box"); for(var i=0;i<boxs.length;i++){ var imgs=boxs[i].getElementsB