Blend基础-数据绑定

数据绑定

什么是数据绑定

将属性和值联系到一起

属性
控件、动画、文件、富媒体等都是有属性的，比如颜色属性、宽度、高度属性、可见度属性等......

值

值是可有有很多种类型的，比如颜色值(#000000)、数字、真假、字符串等......

这里所说的值也就是指的数据。

你可以绑定外部的数据，比如XML、RSS、CLR程序集
也可以绑定内部的数据，比如元素的属性......

具体做法

绑定到外部数据的三种方法
这里以我blog的rss为例子做数据绑定。

点击最右侧的数据选项卡导入xml数据。

输入rss的地址。

稍等片刻，你将发现数据选项卡发生了变化。

Blend自动将我的BlogRss识别，并按照其类型做了解析。

这里可以直接用拖拽的方式操作rss。

Blend都会帮你自动的完成。

这里再看看完成的效果，和他的属性。

右侧的属性面板中 Text 属性有黄色的高亮边框，这表示这个属性是绑定的属性。

再点击其右侧的黄色小点，选择“重置”将取消其绑定。

刚才用的是直接拖拽的方式绑定的数据，现在介绍第二种。这里将刚才重置的属性做重新绑定。

还是点击刚才的Text属性旁边的小点，选择“数据绑定”

这里我要让这个文本框显示我Blog的标题。在弹出的对话框中，选择数据字段选项卡，找到刚才导入的rss并且将其展开找到title节点并选中。

单击确定，这样文本框又和title绑定到了一起。

好下来介绍第三种绑定方式。
这里我想显示我的Blog文章列表。

所以我先找到一个DataGrid控件放到舞台上并且调整好大小。

继续做拖拽操作将数据源托到这个控件上，和第一种不同的是前者要创建控件，这里只是控件数据源的附加。

itemCollection是我的文章列表，点击这个节点拖拽到DataGrid上。

最后的效果：

绑定到内部数据

内部数据的绑定，其实就是元素之间的绑定。在Silverlight 2中还没有，到了Silverlight 3才得到的支持。

以一个最简单的绑定例子开始。

在舞台上放上两个矩形。

改变其中一个的填充属性。

这里选择另外一个，在填充属性的傍边有一个正方的小点，点击他，选择数据绑定。

在元素属性选项卡中找到并且选择第一个矩形的填充属性。

这样他的填充属性就与第一个的相同了。

看效果

改变第一个矩形的属性，第二个也跟着改变。

这个是相同元素、相同属性的绑定。下边介绍一个复杂而且实用点的。不同元素、不同属性间的绑定。

现在很多新闻的详情页面都有文字大小的选择。这里就以这个应用为例来进行说明。

先把需要的控件放入舞台。

这里我想用slider控件来控制文本的大小。在这里先设置好slider控件的最大值、最小值、以及最小变化。

选中文本框，对齐文本字体的大小进行绑定。

选择Slider控件的Value值。

F5 编译运行效果：

数据的双向绑定

数据的双向绑定就是无论是数据的那一方发送改变另一方也跟着变化。

以上一个例子做基础演示说明。

在新增一个输入文本框控件，将控件的Text属性与Slider控件的value属性绑定。

在运行中发现，text显示的是Slider的value值。但是自己输入一个新值改变text，但是Slider不发生变化，这是由于数据是Slider到text的单项绑定。

现在要做双向绑定，在绑定弹出对话框中点击最下方的下拉扩展按钮。

选择TwoWay双向绑定。

这时再编译运行，你会发现Slider和Text不论那一个发生变化另一个也都跟着改变。