在winform中如何实现双向数据绑定?

简介: 在winform中如何实现双向数据绑定?

什么是双向数据绑定?

双向数据绑定是一种允许我们创建持久连接的技术,使模型数据和用户界面(UI)之间的交互能够自动同步。这意味着当模型数据发生变化时,UI会自动更新,反之亦然。这种双向数据绑定极大地简化了UI和模型数据之间的同步,使开发者可以更专注于业务逻辑,而不是手动处理UI和数据的同步。

今天我想通过winform中DataGridView控件为例,介绍在winform中如何实现双向数据绑定。

一般在winform中使用DataGridView控件时,我们可能是这样使用的:

创建数据源

以Person类为例:

public class Person
  {
      public string? Name { get; set; }
      public string? Home { get; set; }
  }

创建Person对象列表:

// 创建一个Person对象的列表
  List<Person> people = new List<Person>()
  {
      new Person {Name = "张三",Home = "武汉" },
      new Person {Name = "李四",Home = "南昌" },
      new Person {Name = "王五",Home = "福州" },
  };

绑定数据源:

dataGridView1.DataSource = people;

这个时候的效果如下所示:

当我们进行修改之后,如下所示:

现在打印people列表第一个和第二个person对象的Home属性值看看:

Debug.WriteLine(people[0].Home);
  Debug.WriteLine(people[1].Home);

结果如下图所示:

说明在dataGridView1上修改数据,people列表也被修改了。

现在反过来测试一下,修改people列表第一个和第二个person对象的Home属性值:

people[0].Home = "厦门";
 people[1].Home = "厦门";

会发现dataGridView1上的数据不会发生变化,需要我们点击对应的空格之后才会发生改变,如下所示:

如果我们这样写的话:

people[0].Home = "厦门";
 people[1].Home = "厦门";
 dataGridView1.UpdateCellValue(1,1);
 dataGridView1.UpdateCellValue(1,2);

效果如下所示:

只改变了一个空格的值,另一个还是需要点击一下,才更新。

在winform中实现双向数据绑定示例

首先创建一个Student类,如下所示:

public class Student : INotifyPropertyChanged
 {
    
     private string? _name;
     public string Name
     {
         get { return _name; }
         set
         {
             _name = value;
             // Call OnPropertyChanged whenever the property is updated
             OnPropertyChanged("Name");
         }
     }       
     private string? _home;
     public string Home
     {
         get { return _home; }
         set
         {
             _home = value;
             // Call OnPropertyChanged whenever the property is updated
             OnPropertyChanged("Home");
         }
     }
     // Declare the event
     public event PropertyChangedEventHandler? PropertyChanged;
     // Create the OnPropertyChanged method to raise the event
     protected void OnPropertyChanged(string name)
     {
         var handler = PropertyChanged;
         handler?.Invoke(this, new PropertyChangedEventArgs(name));
     }
 }

实现了INotifyPropertyChanged接口。

创建数据源:

// 创建一个Student对象的列表
 BindingList<Student> students = new BindingList<Student>()
 {
         new Student { Name = "张三", Home = "武汉" },
         new Student { Name = "李四", Home = "南昌"  },
         new Student { Name = "王五", Home = "福州"  },
 };

注意这里使用的是BindingList<T>而不是List<T>

BindingList<T>List<T>的区别

BindingList 和 List 都是用于存储对象的集合,但它们之间有一些关键的区别。

  1. 数据绑定支持:BindingList 是为数据绑定设计的,它实现了 IBindingList 接口。这意味着当 BindingList 中的数据发生更改时(例如,添加、删除或修改项),它会自动通知绑定到它的任何 UI 控件。这对于 Windows Forms 或 WPF 这样的 UI 框架非常有用,因为它们可以自动更新以反映数据的更改。相比之下,List 不支持数据绑定。
  2. 事件通知:BindingList 提供了一些额外的事件,如 ListChanged,这可以让你知道列表何时被修改。List 没有这样的事件。
  3. 性能:由于 BindingList 提供了额外的功能,所以在某些情况下,它可能比 List 慢一些。如果你不需要数据绑定或更改通知,那么 List 可能会提供更好的性能。

绑定数据源:

dataGridView1.DataSource = students;

更改数据源的值,查看UI是否会自动改变:

students[0].Home = "厦门";
 students[1].Home = "厦门";

实现的效果如下所示:

发现当数据的值发生改变时,dataGridView1会自动进行更新。

编辑dataGridView1查看数据源是否会发生改变,编辑之后如下图所示:

查看结果:

Debug.WriteLine(students[0].Home);
 Debug.WriteLine(students[1].Home);

结果如下图所示:

说明编辑dataGridView1产生的更改也会导致数据源的更改。

总结

以上就是在winform中实现双向数据绑定的一次实践,要点有两个,第一个是类实现INotifyPropertyChanged,第二个是用BindingList<T>代替List<T>,希望对你有所帮助。

目录
相关文章
|
6月前
|
JavaScript 前端开发 UED
详解Vue——的双向数据绑定是如何实现的?
详解Vue——的双向数据绑定是如何实现的?
79 0
|
JavaScript 前端开发
双向数据绑定是什么
双向数据绑定是什么
146 2
|
JavaScript
vue双向数据绑定是如何实现的?
vue双向数据绑定是如何实现的?
|
4天前
|
JavaScript 索引
Vue 3.x 版本中双向数据绑定的底层实现有哪些变化
从Vue 2.x的`Object.defineProperty`到Vue 3.x的`Proxy`,实现了更高效的数据劫持与响应式处理。`Proxy`不仅能够代理整个对象,动态响应属性的增删,还优化了嵌套对象的处理和依赖追踪,减少了不必要的视图更新,提升了性能。同时,Vue 3.x对数组的响应式处理也更加灵活,简化了开发流程。
|
4天前
|
JavaScript 前端开发
哪些框架使用了 Proxy 实现双向数据绑定
Vue.js 和 Angular 都使用了 Proxy 来实现双向数据绑定,其中 Vue 3 更是全面采用了 Proxy 以提升性能和功能。这些框架通过 Proxy 监听数据变化,自动更新视图,简化了开发流程。
|
21天前
|
小程序 数据管理 数据处理
小程序数据绑定机制的优点
【10月更文挑战第23天】小程序数据绑定机制具有众多优点,它极大地提升了小程序的开发效率、交互性、可维护性和用户体验,是小程序开发中不可或缺的重要机制。你还可以根据实际情况进一步扩展和细化相关内容,使其更具针对性和实用性。
|
3月前
|
小程序 JavaScript 前端开发
微信小程序开发时数据是否是双向数据绑定的
微信小程序开发时数据是否是双向数据绑定的
|
5月前
|
JavaScript API 开发者
Vue中双向数据绑定是如何实现的?底层原理简介
Vue中双向数据绑定是如何实现的?底层原理简介
42 4
|
5月前
|
设计模式 前端开发 JavaScript
简述mvvm模式
简述mvvm模式
|
6月前
|
JavaScript
Vue2、3中双向数据绑定是如何实现的
Vue2、3中双向数据绑定是如何实现的
51 0