C# Wpf集合双向绑定

msdn中   ObservableCollection<T> 类    表示一个动态数据集合,在添加项、移除项或刷新整个列表时,此集合将提供通知。

在许多情况下,所使用的数据是对象的集合。 例如,数据绑定中的一个常见方案是使用 ItemsControl(如 ListBoxListView 或 TreeView)来显示记录的集合。

可以枚举实现 IEnumerable 接口的任何集合。 但是,若要设置动态绑定,以便集合中的插入或删除操作可以自动更新 UI,则该集合必须实现 INotifyCollectionChanged 接口。 此接口公开 CollectionChanged 事件,只要基础集合发生更改,都应该引发该事件。

WPF 提供 ObservableCollection<T> 类,它是实现 INotifyCollectionChanged 接口的数据集合的内置实现。

还有许多情况,我们所使用的数据只是单纯的字段或者属性,此时我们需要为这些字段或属性实现INotifyPropertyChanged接口,实现了该接口,只要字段或属性的发生了改变,就会提供通知机制。

实例:

Xaml指定TwoWay双向绑定

<Grid>
    <StackPanel Height="295" HorizontalAlignment="Left" Margin="10,10,0,0" Name="stackPanel1" VerticalAlignment="Top" Width="427">
        <TextBlock Height="23" Name="textBlock1" Text="学员编号:" />
        <TextBox Height="23" Name="txtStudentId" Width="301" HorizontalAlignment="Left"/>
        <TextBlock Height="23" Name="textBlock2" Text="学员列表:" />
        <ListBox Height="156" Name="lbStudent" Width="305" HorizontalAlignment="Left">
            <ListBox.ItemTemplate>
                <DataTemplate>
                    <StackPanel Name="stackPanel2" Orientation="Horizontal">
                        <TextBlock  Text="{Binding Id,Mode=TwoWay}" Margin="5" Background="Beige"/>
                        <TextBlock Text="{Binding Name,Mode=TwoWay}" Margin="5"/>
                        <TextBlock  Text="{Binding Age,Mode=TwoWay}" Margin="5"/>
                    </StackPanel>
                </DataTemplate>
            </ListBox.ItemTemplate>
        </ListBox>
        <Button Content="Button" Height="23" Name="button1" Width="75" HorizontalAlignment="Left" Click="button1_Click" />
    </StackPanel>
</Grid>后台代码创建ObservableCollection<T>实例:
ObservableCollection<Students> infos = new ObservableCollection<Students>() {
    new Students(){ Id=1, Age=11, Name="Tom"},
    new Students(){ Id=2, Age=12, Name="Darren"},
    new Students(){ Id=3, Age=13, Name="Jacky"},
    new Students(){ Id=4, Age=14, Name="Andy"}
    };
public Bind7()
{
    InitializeComponent();

    this.lbStudent.ItemsSource = infos;
    this.txtStudentId.SetBinding(TextBox.TextProperty, new Binding("SelectedItem.Id") { Source = lbStudent });
}
private void button1_Click(object sender, RoutedEventArgs e)
{
    infos[1] = new Students() { Id = 4, Age = 14, Name = "这是一个集合改变" };
    infos[2].Name = "这是一个属性改变";
}
public class Students
{
    public int Id { get; set; }
    public string Name { get; set; }
    public int Age { get; set; }
}

显示结果:

说明,ObservableCollection<T>只针对列表数据项修改进行通知,对于列表项属性修改不进行通知

如果想对于对象属性修改也通知到UI,需要类实现INotifyPropertyChanged接口

public class Students : INotifyPropertyChanged
{
    string _name;
    public int Id { get; set; }
    public string Name
    {
        get { return _name; }
        set { _name = value; OnPropertyChanged("Name"); }
    }
    public int Age { get; set; }
    protected internal virtual void OnPropertyChanged(string propertyName)
    {
        if (PropertyChanged != null)
            PropertyChanged(this, new PropertyChangedEventArgs(propertyName));
    }
    public event PropertyChangedEventHandler PropertyChanged;
}

				
时间: 2024-10-11 23:14:00

C# Wpf集合双向绑定的相关文章

WPF DataGrid双向绑定,数据源数据更改 刷新列表(无需重新加载数据源~~~)

//假设变动的属性是“IsChanged”, List<DataChangedViewModel> lstDataChanged = new List<DataChangedViewModel>(); //赋值省略 this.dataGrid.ItemsSource = lstDataChanged; private void dataGrid_SelectionChanged(object sender, SelectionChangedEventArgs e)        {

C# Wpf双向绑定实例

Wpf中双向绑定处理需要两处 实例1: 1.前台Xaml中属性Binding 时Model指定 TwoWay <Grid> <Ellipse x:Name="ellipse" Fill="#FFF4F4F5" HorizontalAlignment="Left" Height="{Binding Path=Number,Mode=TwoWay}" Margin="50,55,0,0" St

如何在双向绑定的Image控件上绘制自定义标记(wpf)

原文:如何在双向绑定的Image控件上绘制自定义标记(wpf) 我们的需求是什么? 答:需要在图片上增加一些自定义标记,例如:2个图片对比时,对相同区域进行高亮. 先上效果图: 设计思路 1.概述 1.通过TargeUpdated事件,重新绘制图片进行替换. 2.详细实现 1.我们先绑定ImageTargetUpdated事件. ? 1 <Image x:Name="DestImageControl" Source="{Binding Path=Source.Url,

Angular数据双向绑定

Angular数据双向绑定 AngularJS诞生于2009年,由Misko Hevery 等人创建,后为Google所收购.是一款优秀的前端JS框架,已经被用于Google的多款产品当中.AngularJS有着诸多特性,最为核心的是:MVVM.模块化.自动化双向数据绑定.语义化标签.依赖注入等等. 一.什么是数据双向绑定 Angular实现了双向绑定机制.所谓的双向绑定,无非是从界面的操作能实时反映到数据,数据的变更能实时展现到界面. 一个最简单的示例就是这样: <div ng-control

剖析Vue原理&amp;实现双向绑定MVVM

剖析Vue原理&实现双向绑定MVVM vue.js 双向绑定 javascript 邓木琴居然被盗用了 2016年08月16日发布 推荐 24 推荐 收藏 195 收藏,10.6k 浏览 本文能帮你做什么?1.了解vue的双向数据绑定原理以及核心代码模块2.缓解好奇心的同时了解如何实现双向绑定为了便于说明原理与实现,本文相关代码主要摘自vue源码, 并进行了简化改造,相对较简陋,并未考虑到数组的处理.数据的循环依赖等,也难免存在一些问题,欢迎大家指正.不过这些并不会影响大家的阅读和理解,相信看完

Vuejs——(1)入门(单向绑定、双向绑定、列表渲染、响应函数)

版权声明:出处http://blog.csdn.net/qq20004604 目录(?)[+] 参照链接: http://cn.vuejs.org/guide/index.html [起步]部分 本文是在其基础上进行补全和更详细的探寻 嗯,根据朋友的建议,我改投vue阵营了 (一)单向绑定 [javascript] view plain copy <div id="app"> {{ message }} </div> <script> new Vue

ASP.NET Web API实践系列07,获取数据, 使用Ninject实现依赖倒置,使用Konockout实现页面元素和视图模型的双向绑定

本篇接着上一篇"ASP.NET Web API实践系列06, 在ASP.NET MVC 4 基础上增加使用ASP.NET WEB API",尝试获取数据. 在Models文件夹下创建Comment类: namespace MvcApplication5.Models { public class Comment { public int ID { get; set; } public string Author { get; set; } public string Text { ge

Vue数据双向绑定原理及简单实现

嘿,Goodgirl and GoodBoy,点进来了就看完点个赞再go. Vue这个框架就不简单介绍了,它最大的特性就是数据的双向绑定以及虚拟dom.核心就是用数据来驱动视图层的改变.先看一段代码. 一.示例 var vm = new Vue({ data: { obj: { a: 1 } }, created: function () { console.log(this.obj); } }); 二.实现原理 vue数据双向绑定是通过数据劫持结合发布者-订阅者模式的方式来实现的. 1)数据劫

vue双向绑定原理源码解析

当我们学习angular或者vue的时候,其双向绑定为我们开发带来了诸多便捷,今天我们就来分析一下vue双向绑定的原理. 简易vue源码地址:https://github.com/maxlove123/simple-Vue.git 1.vue双向绑定原理 vue.js 则是采用数据劫持结合发布者-订阅者模式的方式,通过Object.defineProperty()来劫持各个属性的setter,getter,在数据变动时发布消息给订阅者,触发相应的监听回调.我们先来看Object.definePr