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 下载 .

 


相关文章
|
10月前
|
边缘计算 人工智能 算法
LLM最大能力密度100天翻一倍!清华刘知远团队提出Densing Law
大型语言模型(LLMs)的快速发展显著提升了性能,但也带来了计算与能耗挑战。清华大学刘知远团队提出“能力密度”概念,定义为有效参数规模与实际参数规模的比值,揭示LLMs能力密度每100天翻倍的“Densing Law”。这一发现提供评估模型效率与性能的新视角,推动LLMs向更高效、可持续方向发展,同时降低部署成本,拓展应用场景。然而,Densing Law的普适性及多因素影响仍需进一步研究,未来需克服技术挑战以实现更高效率的模型设计与优化。
345 30
|
12月前
|
人工智能 运维 应用服务中间件
OS Copilot测评报告
作为一名全栈开发,我在日常维护阿里云服务器时遇到了不少Linux操作难题。最近尝试了阿里云推出的OS Copilot,基于大模型的AI助手,大大简化了运维工作。通过简单的对话式命令,如“co nginx是否安装”和“co 将nginx设置为开启自启动 -t”,轻松完成任务。甚至可以通过文件定义复杂任务,如解析日志并提取攻击IP。OS Copilot显著提升了效率,降低了学习成本,真是运维利器!
217 24
|
数据可视化 Python
使用OpenPyXL在Excel中创建折线图:数据可视化入门
本文介绍了如何使用Python的`openpyxl`库在Excel中创建折线图,包括安装库、加载Excel文件、定义数据范围、设置图表属性(如标题、轴标签)及保存文件等步骤,适合数据可视化初学者。
699 15
|
前端开发 Java 数据处理
【Netty】Netty 异步任务模型 及 Future-Listener 机制
【Netty】Netty 异步任务模型 及 Future-Listener 机制
993 0
【Netty】Netty 异步任务模型 及 Future-Listener 机制
|
存储 缓存 安全
【ARM架构】ARMv8-A 系统中的安全架构概述
【ARM架构】ARMv8-A 系统中的安全架构概述
526 0
|
存储 缓存 编解码
Redis 缓存有哪些淘汰策略?
Redis(Remote Dictionary Server ),即远程字典服务,是一个开源的使用ANSI C语言编写、支持网络、可基于内存亦可持久化的日志型、Key-Value数据库,并提供多种语言的API。
890 0
Redis 缓存有哪些淘汰策略?
|
安全 物联网 区块链
阿里云农产品区块链溯源服务为农产品建立信任体系
农产品溯源系统,全程商品种养殖管理记录,为农产品建立信任体系,消费者扫码了解商品全部溯源信息,消除安全担忧,获取消费者信任.
阿里云农产品区块链溯源服务为农产品建立信任体系
|
NoSQL 存储 Apache
Cassandra全球使用的公司及场景
Apache Cassandra是最流行的分布式宽表数据库,具有SQL的入口,最初由Facebook开发,后续贡献给Apache。阿里云Cassandra公测,就有不少客户在问,Cassandra到底有哪些公司在使用,可以解决什么问题。
Cassandra全球使用的公司及场景
|
搜索推荐 SEO
如何提高网站的权重?提高网站权重的10个方法
SEO网站优化工作中,最重要的目的是提高网站的权重。一个网站的权重越高,那么搜索引擎给予网站的权威值越大。 网站权重的高低对排名的提升起到一定的作用,培养网站的权重从而提升关键词排名。 如何提高网站的权重?提高网站权重的10个方法
906 0
|
Web App开发 Java 数据库
全面深入学习OLE技术
全面深入学习OLE技术 引言(问题的提出) 1.如何将同步软件的联系人/日历/任务/邮件等信息导入到微软的OutLook软件中 为了解决此问题,就需要用到微软的OLE技术。 涉及相关技术有:OLE,OLE Automation,ActiveX,COM等技术。
1849 0