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; }
        }
    }

原文网址

时间: 2024-10-16 05:40:32

Silverlight实用窍门系列:47.Silverlight中元素到元素的绑定,以及ObservableCollection和List的使用区别的相关文章

Silverlight实用窍门系列:68.Silverlight的资源字典ResourceDictionary

允许转载,转载时请务必以超链接形式标明文章 原始出处 .作者信息和本声明.否则将追究法律责任.http://chengxingliang.blog.51cto.com/3972944/886643 ResourceDictionary是一个键控对象字典,可在 XAML 和代码中使用.在其中我们可以定义样式.模板等以方便在其他页面中随时调用. 首先我们新建一个ResourceDictionary页面如下图: 然后向资源字典文件中写入以下代码,分别是样式和模板: <ResourceDictionar

Silverlight系列--动态生成DataGrid列 根据动态列绑定Dictionary数据

1.获取表头数据源动态生成DataGrid表头 DataGridTextColumn d = new DataGridTextColumn(); d.Header = itemPriceClass.PriceKindCode + itemPriceClass.PriceKindName; Binding bin = new Binding(); bin.Converter = new RowIndexConverter(); bin.ConverterParameter = itemPriceC

Silverlight 图表下载到Excel文件中

一.Silverlight xaml.cs文件按钮触发方法 1.//下载图表        private void btnDown_Click(object sender, RoutedEventArgs e)        { DBServiceClient svc = new DBServiceClient();            svc.GenerateExcelReportAsync();            svc.GenerateExcelReportCompleted +=

CSharpGL(6)在OpenGL中绘制UI元素

CSharpGL(6)在OpenGL中绘制UI元素 主要内容 学习使用IUILayout接口及其机制,以实现在OpenGL中绘制UI元素. 以SimpleUIAxis为例演示如何使用IUILayout. 下载 您可以在(https://github.com/bitzhuwei/CSharpGL)找到最新的源码.欢迎感兴趣的同学fork之. 什么是OpenGL中的UI元素 您可以在源码中找到SimpleUIAxis这一示例. 如上图所示,有5个坐标轴,中间那个是一个普通的三维模型(元素),作为对照

Canvas中鼠标获取元素并拖动技术

Silverlight拖动,需要Canvas. Canvas管网定义: 定义一个区域,在该区域中可以使用相对于该区域的坐标显式定位子元素. XAML <Canvas ...> oneOrMoreUIElements </Canvas> -or- <Canvas .../> XAML 值 值 描述 oneOrMoreUIElements 从 UIElement 对象派生的以下对象元素中的一个或多个:Border (Silverlight 2).Canvas.Ellipse

[Asp.net MVC]Asp.net MVC5系列——在模型中添加验证规则

目录 概述 在模型中添加验证规则 自定义验证规则 伙伴类的使用 总结 系列文章 [Asp.net MVC]Asp.net MVC5系列——第一个项目 [Asp.net MVC]Asp.net MVC5系列——添加视图 [Asp.net MVC]Asp.net MVC5系列——添加模型 [Asp.net MVC]Asp.net MVC5系列——从控制器访问模型中的数据 [Asp.net MVC]Asp.net MVC5系列——添加数据 概述 上篇文章中介绍了添加数据,在提交表单的数据的时候,我们需

jQuery源码分析系列(33) : AJAX中的前置过滤器和请求分发器

jQuery1.5以后,AJAX模块提供了三个新的方法用于管理.扩展AJAX请求,分别是: 1.前置过滤器 jQuery. ajaxPrefilter 2.请求分发器 jQuery. ajaxTransport, 3.类型转换器 ajaxConvert 源码结构: jQuery.extend({ /** * 前置过滤器 * @type {[type]} */ ajaxPrefilter: addToPrefiltersOrTransports(prefilters), /** * 请求分发器 *

Android总结篇系列:Activity中几个主要函数详解

专注Android领域开发. 仰望星空,同时需要脚踏实地. ——好记性不如烂博客 Android总结篇系列:Activity中几个主要函数详解 Activity作为Android系统中四大基本组件之一,包含大量的与其他的各大组件.intent.widget以及系统各项服务等之间的交互的函数.在此,本文主要选取实际项目开发中常用的,但完全理解又需要有一定深入了解的几个函数进行讲解,后续本文会根据需要不断更新. 1. startActivityForResult / onActivityResult

47. 数组中出现次数超过一半的数字[Number appears more than half times]

[题目]:数组中有一个数字出现的次数超过了数组长度的一半,找出这个数字. 例如长度为9的数组{1,2,3,2,2,2,5,4,2}中次数超过了数组长度的一半的数字为2,而长度为8的数组{1,2,3,2,2,2,5,4}则为非法输入. [思路一]:先对数组进行排序,再遍历排序后的数组,统计每个数的次数,出现次数最大的数即为要找的数. 时间复杂度:O(nlgn)+ O(n)= O(nlgn):空间复杂度:O(1). [思路二]:先对数组进行排序,出现次数超过数组长度的一半的数必然是数组中间的那个数.