一起搭WPF之列表数据绑定
- 1 前言
- 2 数据绑定
- 2.1 前端
- 2.2 后端实现
- 2.2.1 界面后台
- 2.2.2 模型与逻辑
- 3 问题
- 3.2 解决
- 总结
1 前言
之前已经简单介绍了列表的大致设计,在设计完列表界面后,我们可以开展列表的数据绑定,在前端显示我们的数据,对列表进行数据输入。
那么让我们开始大干一场吧!
2 数据绑定
2.1 前端
在前端DataGrid的ItemsSource就绑定好后台定义的数据,要相互对应。同时这个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 是.NET Framework中提供的一个泛型集合类,它继承自 Collection 并实现了 INotifyCollectionChanged 接口。
这里的DataList与前端的数据绑定要一致!
我们在构造函数内增加对象,从而显示对应的数值。
3 问题
无故的空行以及数据列的增加!
3.2 解决
问题主要出现在前端,主要是设置方面的问题。
AutoGenerateColumns="False"
CanUserAddRows="False"
CanUserResizeColumns="False"
总结
提示:这里对文章进行总结:
例如:以上就是今天要讲的内容,本文仅仅简单介绍了列表数据的绑定。