Silverlight实用窍门系列:47.Silverlight中元素到元素的绑定,以及ObservableCollection和List的使用区别...
问题一:在某一些情况下,我们使用MVVM模式的时候,对于某一个字段(AgeField)需要在前台的很多个控件(A、B、C、D、E)进行绑定,但是如何能够让我们后台字段名改变的时候能够非常方便的改变所有使用了这个字段的控件呢?
回答:使用Element to Element Binding,将AgeFiled绑定到A控件,然后再让B、C、D、E控件绑定A控件的使用AgeField字段的属性。
例如:字段(AgeField)的数据是年龄大小,A、B、C、D、E控件分别是Ellipse、Label、Slider、TextBox、ProgressBar,这些字段的Width、Value或者Text值按照常规的做法,这几个控件都是在MVVM模式下都是绑定的AgeField。但是这个字段名在后期代码维护的时候修改为Age了,我们就不得不需要一一修改五个控件的绑定值。如果这几个控件还分布在不同位置,那么寻找起来就将更加麻烦。那么这里我们就将使用到Silverlight 3的一个新特性Element to Element Binding。
实例一:我们在这里有一个TextBox控件tbAge,其Value值假定绑定到某一个字段,然后我们再添加Slider、ProgressBar、Ellipse控件,使用Value="{Binding Text,ElementName=tbAge,Mode=TwoWay}"这样的方式将tbAge的Text值绑定到这几个控件上。下面我们看源码如下:
<!--这里是数据源--><TextBox x:Name="tbAge" Text="30" Width="80" Margin="0,87,0,183" Height="30" HorizontalAlignment="Left" VerticalAlignment="Top"/><!--Silder控件绑定上面的tbAge控件的值--><Slider Name="sdAge" Value="{Binding ElementName=tbAge, Path=Text, Mode=TwoWay }" Minimum="1" Maximum="100" Height="40" Width="210" HorizontalAlignment="Left" VerticalAlignment="Top" Margin="0,145,0,115"></Slider><!--ProgressBar控件绑定上面的tbAge控件的值--><ProgressBar Value="{Binding Text,ElementName=tbAge,Mode=TwoWay}" Margin="0,27,0,0" Name="progressBar1" Height="24" HorizontalAlignment="Left" VerticalAlignment="Top" Width="210" /><!--Ellipse的Width属性绑定sdAge控件的值--><Ellipse Width="{Binding Value,ElementName=sdAge,Mode=TwoWay}" Height="100" HorizontalAlignment="Left" Margin="0,200,0,0" Name="ellipse1" Stroke="Black" StrokeThickness="1" VerticalAlignment="Top" />
问题二:为什么在Silverlight中我们更常用ObservableCollection<T>来作为数据集合绑定到控件中,而不是使用List<T>呢?
回答:当T继承于INotifyPropertyChanged接口的时候,如果T的属性值发生变化时,ObservableCollection和List都能够让前台UI发生相应的改变。但是当增加一个T的数据行时,List不能及时更新前台UI,而ObservableCollection能够将新增的T数据行马上更新到UI上去。
实例二:我们拖出两个DataGrid控件分别是ShowListCity和ShowObservableCity,然后分别绑定数据List和Observable数据,再添加一个按钮为这两个数据集合添加集合值。看UI是否变化。下面我们看源码如下:
<sdk:DataGrid HorizontalAlignment="Left" AutoGenerateColumns="False" Margin="476,12,0,0" Name="ShowListCity" VerticalAlignment="Top" Height="169" Width="324" ><sdk:DataGrid.Columns><sdk:DataGridTextColumn Header="省会" Binding="{Binding AddrName}" IsReadOnly="True" Width="108"/><sdk:DataGridTextColumn Header="城市" Binding="{Binding CityName}" IsReadOnly="True" Width="108"/><sdk:DataGridTextColumn Header="电话区号" Binding="{Binding TelNum}" IsReadOnly="True" Width="108"/></sdk:DataGrid.Columns></sdk:DataGrid> <sdk:DataGrid HorizontalAlignment="Left" AutoGenerateColumns="False" Margin="476,187,0,0" Name="ShowObservableCity" VerticalAlignment="Top" Height="180" Width="324" ><sdk:DataGrid.Columns><sdk:DataGridTextColumn Header="省会" Binding="{Binding AddrName}" IsReadOnly="True" Width="108"/><sdk:DataGridTextColumn Header="城市" Binding="{Binding CityName}" IsReadOnly="True" Width="108"/><sdk:DataGridTextColumn Header="电话区号" Binding="{Binding TelNum}" IsReadOnly="True" Width="108"/></sdk:DataGrid.Columns></sdk:DataGrid><Button Content="添加条目" Height="23" HorizontalAlignment="Left" Margin="364,13,0,0" Name="button1" VerticalAlignment="Top" Width="75" Click="button1_Click" />
下面是MainPage.xaml.cs代码
public partial class MainPage : UserControl {public MainPage() { InitializeComponent(); ListCity = new List<CityInformation>() {new CityInformation(){ AddrName="四川", CityName="成都", TelNum="028"},new CityInformation(){ AddrName="北京", CityName="北京", TelNum="010"},new CityInformation(){ AddrName="广东", CityName="广州", TelNum="021"} }; ObservableCity = new ObservableCollection<CityInformation>() {new CityInformation(){ AddrName="四川", CityName="成都", TelNum="028"},new CityInformation(){ AddrName="北京", CityName="北京", TelNum="010"},new CityInformation(){ AddrName="广东", CityName="广州", TelNum="021"} };this.ShowListCity.ItemsSource = ListCity;this.ShowObservableCity.ItemsSource = ObservableCity; } private List<CityInformation> _ListCity;/// <summary>/// 城市集合/// </summary> public List<CityInformation> ListCity {get { return _ListCity; }set { _ListCity = value; } } private ObservableCollection<CityInformation> _ObservableCity;/// <summary>/// 城市集合/// </summary> public ObservableCollection<CityInformation> ObservableCity {get { return _ObservableCity; }set { _ObservableCity = value; } }private void button1_Click(object sender, RoutedEventArgs e) { ListCity.Add(new CityInformation() { AddrName = "重庆", CityName = "重庆", TelNum = "022" }); ObservableCity.Add(new CityInformation() { AddrName = "重庆", CityName = "重庆", TelNum = "022" }); } }
下面我们来看CityInformation实例类代码如下:
/// <summary> /// 城市信息的实体类 /// </summary> public class CityInformation {private string _AddrName;private string _CityName;private string _TelNum;/// <summary>/// 地址名/// </summary> public string AddrName {get { return _AddrName; }set { _AddrName = value; } }/// <summary>/// 城市名/// </summary> public string CityName {get { return _CityName; }set { _CityName = value; } }/// <summary>/// 区号/// </summary> public string TelNum {get { return _TelNum; }set { _TelNum = value; } } }
最后我们来看看运行效果如何,另外如需源码请点击 SLElement.zip 下载 .
本文转自程兴亮博客园博客,原文链接:http://www.cnblogs.com/chengxingliang/archive/2011/07/18/2108732.html,如需转载请自行联系原作者
Silverlight实用窍门系列:47.Silverlight中元素到元素的绑定,以及ObservableCollection和List的使用区别...相关推荐
- Silverlight实用窍门大集合+Silverlight 5 最全新特性【目录索引】
在最近的几个月内整理出了Silverlight的一些相关的比较实用的功能讲解文章,并且随着Silverlight 5 beta版本的发布整理出的新特性系列文章,在这里做一个总的概括和索引,以方便大家观 ...
- Silverlight实用窍门系列:59.多个中心点联动多线的可拖动控件扩展为拓扑图
在本系列的第17篇文章中"Silverlight实用窍门系列:17.中心点联动多线的可拖动控件(绘制工程图.拓扑图基础) ",制作了基本的中心联动图标.有园友对此图的扩展不是很清晰 ...
- Silverlight实用窍门系列:71.Silverlight的Style
此文章实例基于Silverlight实用窍门系列:68.Silverlight的资源字典ResourceDictionary,如有数据源疑问请参考该文章. 在Silverlight中的Style相当于 ...
- Silverlight实用窍门系列:54.详解Silverlight中的矩阵变换MatrixTransform,实现其余各种变换【附带实例源码】...
在Silverlight中的MatrixTransform矩阵变换相对上篇文章所述的变换较复杂一些,但这种变换也更灵活. MatrixTransform的实质:让需要变换的元素上的每一个像素点*矩阵得 ...
- Silverlight实用窍门系列:40.Silverlight中捕捉视频,截图保存到本地
在Silverlight中我们可以捕捉视频设备以制作视频会议系统,或者通过视频设备截图功能上传头像等功能. 下面我们通过一个简单的实例来访问视频设备,并且截取图像下载该截图文件至本地. 一.在Silv ...
- Silverlight实用窍门系列:61.Silverlight中的Trigger触发器,自定义翻页触发器
在Silverlight应用程序和客户进行交互工作的时候可以不用写后台代码而通过Xaml代码来实现,在本文我们将学习了解Trigger触发器. Trigger触发器:引发动作的因素,比如鼠标点击.键盘 ...
- Silverlight实用窍门系列:40.Silverlight中捕捉视频,截图保存到本地【附带实例源码】...
在Silverlight中我们可以捕捉视频设备以制作视频会议系统,或者通过视频设备截图功能上传头像等功能. 下面我们通过一个简单的实例来访问视频设备,并且截取图像下载该截图文件至本地. 一.在Silv ...
- Silverlight实用窍门系列:56.Silverlight中的Binding使用(一)【附带实例源码】
本文将详细讲述Silverlight中Binding,包括Binding的属性和用法,Binding的数据流向. Binding:一个完整的Binding过程是让源对象中的某个属性值通过一定流向规则进 ...
- Silverlight实用窍门系列:63.Silverlight中的Command,自定义简单Command
在Silverlight中的MVVM模式下将前台页面和ViewModel界面交互分离开是通过本节所要讲述的Command实现的.我们自定义一个Command需要继承于ICommand接口并且实现这个接 ...
最新文章
- 零基础自学python教程-零基础5个月快速学会Python的秘诀
- 自己封装线程(Demo)
- mybatis源码阅读(五) ---执行器Executor
- python 绘制功率谱密度图 plt.psd
- IOT(2)---物联网传感器1
- 【Java】IntegerCache的妙用和陷阱
- 再看序列化与反序列化[转]
- 官方钦定TensorFlow2.0要改这个API,用户吐槽:全世界都是keras
- 一个七年的老测试给想入行软件测试这个行业的二十条建议
- 2017-5-26 正则表达式,js实战(加减数量,全选)
- 通达信公式大全_通达信选股器公式大全:抓牛股、抓妖股、找龙头,一应俱全...
- android 文件管理 免root,真正免root的RE文件管理器(Root Explorer)详细使用教程
- 最近写的一个书店项目
- pg 备份恢复(四)—— 逻辑备份(dump与copy导入导出)
- 复制-粘贴-剪切(深入Vim寄存器)Vim寄存器
- thinkpad开机后无法进入系统怎么办?
- android钟表,Android打造属于自己的时间钟表
- 熊写代码这三年:阅读写作与技术成长
- HTTP请求/响应报文结构
- 老大告诉我不要用字符串存IP地址,不兴~
热门文章
- EEGNet: 神经网络应用于脑电信号
- 漫威游戏的VR体验 让你尖叫
- 刚刚,中国空间站核心舱“天和”出征太空!
- 全球首次!AI研制新药物仅需18个月,李开复梁颕宇:AI医疗已突破,但只打1分...
- 百度ACE智能交通能提升最高30%城市通行效率,刚刚拿下世界互联网大会最高荣誉...
- 3个可以写进简历的京东AI NLP项目实战,走完这五步就是Top算法工程师
- eyoucmsPHP企业网站内容管理系统
- 课本学习笔记5:第七章 20135115臧文君
- 打印HotSpot VM采用自动优化参数
- [链接]博客园中应用LaTex进行公式编写