当前位置：首页 > news >正文

集合对象的绑定

news 2026/3/26 17:44:48

集合对象的绑定

一、什么是集合绑定？

一句话：
把后台的 List / ObservableCollection / 数组等集合数据 → 绑定到界面的 ListBox / ListView / DataGrid / ComboBox 等控件。

作用：

不用循环添加项
不用手动刷新界面
集合增删改 → 界面自动变
MVVM 架构必备

二、集合绑定的 3 个核心知识点

1. 最重要的集合：ObservableCollection<T>

List<T>：只能显示初始数据，增删不会自动刷新界面
ObservableCollection<T>：实现了集合通知接口，增删改界面自动同步 ✅
开发必须用它！

2. 绑定属性：ItemsSource

所有列表控件显示集合都用：

1 ItemsSource="{Binding 集合名}"

3. 每一项怎么显示：ItemTemplate（DataTemplate）

用数据模板定义每一项长什么样（文字、图片、按钮…）

三、完整开发步骤（固定 4 步）

创建数据模型类（Student / Product）
创建 ObservableCollection<T> 集合
把集合交给 DataContext
界面用 ItemsSource 绑定 + ItemTemplate 显示

四、最简单示例：集合绑定 ListBox（可直接运行）

步骤 1：创建模型类

1 // 学生类
2 public class Student
3 {
4     public string Name { get; set; }
5     public int Age { get; set; }
6 }

步骤 2：窗口后台创建 ObservableCollection 集合

 1 using System.Collections.ObjectModel;
 2 
 3 public partial class MainWindow : Window
 4 {
 5     // 【关键】可自动刷新的集合
 6     public ObservableCollection<Student> Students { get; set; }
 7 
 8     public MainWindow()
 9     {
10         InitializeComponent();
11 
12         // 初始化数据
13         Students = new ObservableCollection<Student>()
14         {
15             new Student{Name="张三", Age=18},
16             new Student{Name="李四", Age=19},
17             new Student{Name="王五", Age=20}
18         };
19 
20         // 设置数据源
21         this.DataContext = this;
22     }
23 }

步骤 3：界面最简单绑定

1 <ListBox 
2     ItemsSource="{Binding Students}"          <!-- 绑定集合 -->
3     DisplayMemberPath="Name"/>                <!-- 显示 Name 属性 -->

效果

列表自动显示：
张三
李四
王五

五、进阶示例：用 DataTemplate 显示完整卡片（项目常用）

 1 <ListBox ItemsSource="{Binding Students}">
 2     <!-- 每一项的外观：数据模板 -->
 3     <ListBox.ItemTemplate>
 4         <DataTemplate>
 5             <StackPanel Orientation="Horizontal" Margin="5">
 6                 <TextBlock Text="姓名：" />
 7                 <TextBlock Text="{Binding Name}" FontWeight="Bold" FontSize="18"/>
 8                 <TextBlock Text=" 年龄：" Margin="10,0"/>
 9                 <TextBlock Text="{Binding Age}" Foreground="Gray"/>
10             </StackPanel>
11         </DataTemplate>
12     </ListBox.ItemTemplate>
13 </ListBox>

效果

每一项都变成美观卡片：
姓名：张三年龄：18

六、超级重要：ObservableCollection 自动刷新测试

在窗口加一个按钮，点击添加一条数据：

1 private void ButtonAdd_Click(object sender, RoutedEventArgs e)
2 {
3     Students.Add(new Student { Name = "新同学", Age = 22 });
4 }

结果

界面列表自动多出一项！
List 做不到，只有 ObservableCollection 能做到 ✅

七、集合绑定到 ListView（带表头）

1 <ListView ItemsSource="{Binding Students}">
2     <ListView.View>
3         <GridView>
4             <GridViewColumn Header="姓名" DisplayMemberBinding="{Binding Name}" Width="120"/>
5             <GridViewColumn Header="年龄" DisplayMemberBinding="{Binding Age}" Width="80"/>
6         </GridView>
7     </ListView.View>
8 </ListView>

效果

标准表格列表：

姓名	年龄
张三	18

八、集合绑定到 ComboBox（下拉框）

1 <ComboBox 
2     ItemsSource="{Binding Students}"
3     DisplayMemberPath="Name"       <!-- 下拉显示什么 -->
4     SelectedValuePath="Age"/>      <!-- 选中后获取什么值 -->