手把手教你搭WPF之列表数据绑定

1 前言

之前已经简单介绍了列表的大致设计，在设计完列表界面后，我们可以开展列表的数据绑定，在前端显示我们的数据，对列表进行数据输入。 那么让我们开始大干一场吧！

---

2 数据绑定

2.1 前端

在前端DataGrid的ItemsSource中使用Bing就绑定好后台定义的数据，这里的DataList与后台定义的名称要相互对应，保持一致。同时这个ItemsSource绑定的集合就是多个类的集合，类的属性就再绑定给不同的列表元素中。当绑定的集合发生变化时，对应列表里的数据也会发生变化，从而实现多组数据刷新。集合中的类还需要细化到每个控件的绑定，这里定义Name、ClothTpye等属性要绑定到对应的控件中去。

<DataGrid ItemsSource="{Binding DataList}"   ScrollViewer.VerticalScrollBarVisibility="Hidden" >
   <DataGrid.Columns>
       <DataGridTextColumn Header="名称" Width="*" Binding="{Binding Name}"/>
       <DataGridTextColumn Header="衣服类型" Width="*" Binding="{Binding ClothTpye}"/>
       <DataGridTextColumn Header="颜色" Width="*" Binding="{Binding ClothColor}"/>
       <DataGridTextColumn Header="尺码" Width="*" Binding="{Binding ClothSize}"/>
       <DataGridTextColumn Header="价格" Width="*" Binding="{Binding ClothPrice}"/>

2.2 后端实现

2.2.1 界面后台

在界面的后台.xaml中需要将当前窗口或控件的 DataContext 属性设置为一个新的 DataViewModel 实例。DataContext 是一个依赖属性，它允许子控件继承其父控件的DataContext。

this.DataContext = new DataViewModel();

DataContext 属性用于绑定UI元素和数据源，将数据模型与视图（UI）连接起来。

2.2.2 模型与逻辑

我们在模型中，定义一个属性，this.NotifyChanged();实现了 INotifyPropertyChanged 接口，需要 OnPropertyChanged 方法来通知绑定的UI元素属性值的改变。这样，当 Name 属性的值改变时，所有绑定到 Name 属性的UI元素都会自动更新。

private int _name;

        public int Name
        {
            get { return _name; }
            set { _name = value; this.NotifyChanged(); }
        }

这一部分可以根据自己的需要来增加属性。

public ObservableCollection<DataModel> DataList { get; set; } = new ObservableCollection<DataModel>();

public DataViewModel()
{
    DataList.Add(new DataModel { Name = 1, Clothcolor = "红色", ClothSize = 2 });
}

我们在控制器的文件中，通过定义的ObservableCollection<DataModel> 是.NET Framework中提供的一个泛型集合类，它继承自Collection<DataModel>并实现了 INotifyCollectionChanged 接口。 这里的DataList与前端的数据绑定要一致！ 我们在构造函数内增加对象，从而显示对应的数值。

3 问题

后续要继续解决显示问题，如无故空行，多列显示！

---

总结

以上就是今天要讲的内容，本文仅仅简单介绍了列表数据绑定，并展示了数据显示。