Blend基础-数据绑定

简介: Blend基础-数据绑定数据绑定 什么是数据绑定 将属性和值联系到一起 属性 控件、动画、文件、富媒体等都是有属性的,比如颜色属性、宽度、高度属性、可见度属性等...... 值 值是可有有很多种类型的,比如颜色值(#000000)、数字、真假、字符串等......这里所说的值也就是指的数据。
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不论那一个发生变化另一个也都跟着改变。
扩展
以下都是数据绑定的高级应用,有兴趣的朋友可以看下




作者:Nasa 
文章出处:我和未来有约会 (http://nasa.cnblogs.com/
版权声明:本文的版权归作者与博客园共有。转载时须注明本文的详细链接,否则作者将保留追究其法律责任。



相关文章
|
8月前
|
前端开发 开发者 UED
构建响应式网页布局的现代方法
【2月更文挑战第13天】随着移动互联网的兴起,为不同设备设计适配的网页变得至关重要。本文深入探讨了使用Flexbox和Grid两种CSS布局技术构建响应式网页的方法,分析了它们的优劣,并通过实例展示了如何有效地运用这些技术以提升页面的响应性和用户体验。
|
编解码
【响应式和自适应的区别】
【响应式和自适应的区别】
|
8月前
|
前端开发 开发者 UED
构建响应式网页布局:Flexbox的全面指南
【2月更文挑战第20天】 随着移动互联网的蓬勃发展,响应式网页设计已成为前端开发中不可或缺的一环。Flexbox作为CSS的新布局模式,为开发者提供了创建灵活和可适应不同屏幕尺寸的布局的强大工具。本文将深入探讨Flexbox的基本概念、关键属性及其在实际项目中的应用,旨在帮助读者掌握这一强大技术,以提升网站的用户体验和前端开发效率。
82 0
|
8月前
|
前端开发
前端必看的8个HTML+CSS技巧 (七)混合模式(Blend)
前端必看的8个HTML+CSS技巧 (七)混合模式(Blend)
|
机器学习/深度学习 前端开发
21、前端开发:CSS知识总结——transform变形属性
21、前端开发:CSS知识总结——transform变形属性
216 0
响应式 - 创建自适应的响应式字体
响应式 - 创建自适应的响应式字体
111 0
响应式 - 创建自适应的响应式字体
|
编解码
响应式和自适应布局
响应式和自适应布局
291 0
|
前端开发
响应式 - 基于尺寸的响应式内边距
响应式 - 基于尺寸的响应式内边距
111 0
响应式 - 基于尺寸的响应式内边距
|
开发框架 前端开发 JavaScript
Bootstrap响应式前端框架笔记一——强大的栅格布局
Bootstrap响应式前端框架笔记一——强大的栅格布局
293 0
Bootstrap响应式前端框架笔记一——强大的栅格布局
|
Windows
ItemsControl的两种数据绑定方式
原文:ItemsControl的两种数据绑定方式      最近在学习ItemsControl这个控件的时候,查看了MSDN上面的一个例子,并且自己做了一些修改,这里主要使用了两种方式来进行相应的数据绑定,一种是使用DataContext,另外一种是直接将一个类绑定到前台,其实这两种方式原理差不多都...
1112 0