一起搭WPF之列表数据绑定

一起搭WPF之列表数据绑定

  • [1 前言](#1 前言)
  • [2 数据绑定](#2 数据绑定)
    • [2.1 前端](#2.1 前端)
    • [2.2 后端实现](#2.2 后端实现)
      • [2.2.1 界面后台](#2.2.1 界面后台)
      • [2.2.2 模型与逻辑](#2.2.2 模型与逻辑)
  • [3 问题](#3 问题)
    • [3.2 解决](#3.2 解决)
  • 总结

1 前言

之前已经简单介绍了列表的大致设计,在设计完列表界面后,我们可以开展列表的数据绑定,在前端显示我们的数据,对列表进行数据输入。

那么让我们开始大干一场吧!


2 数据绑定

2.1 前端

在前端DataGrid的ItemsSource就绑定好后台定义的数据,要相互对应。同时这个ItemsSource就是多个类的集合,类的属性就再绑定给不同的列表元素中。这里定义Name、ClothTpye等属性。

csharp 复制代码
<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。

csharp 复制代码
this.DataContext = new DataViewModel();

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

2.2.2 模型与逻辑

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

csharp 复制代码
private int _name;

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

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

csharp 复制代码
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 解决

问题主要出现在前端,主要是设置方面的问题。

csharp 复制代码
AutoGenerateColumns="False"
CanUserAddRows="False"
CanUserResizeColumns="False"

总结

提示:这里对文章进行总结:

例如:以上就是今天要讲的内容,本文仅仅简单介绍了列表数据的绑定。

相关推荐
玉面小君3 天前
从 WPF 到 Avalonia 的迁移系列实战篇6:Trigger、MultiTrigger、DataTrigger 的迁移
wpf·avalonia
招风的黑耳4 天前
Java生态圈核心组件深度解析:Spring技术栈与分布式系统实战
java·spring·wpf
lfw20194 天前
WPF 数据绑定模式详解(TwoWay、OneWay、OneTime、OneWayToSource、Default)
wpf
Magnum Lehar4 天前
3d wpf游戏引擎的导入文件功能c++的.h实现
3d·游戏引擎·wpf
FuckPatience5 天前
WPF Telerik.Windows.Controls.Data.PropertyGrid 自定义属性编辑器
wpf
almighty275 天前
C#WPF控制USB摄像头参数:曝光、白平衡等高级设置完全指南
开发语言·c#·wpf·usb相机·参数设置
军训猫猫头6 天前
12.NModbus4在C#上的部署与使用 C#例子 WPF例子
开发语言·c#·wpf
我要打打代码6 天前
在WPF项目中使用阿里图标库iconfont
wpf
拾忆,想起7 天前
Redisson 分布式锁的实现原理
java·开发语言·分布式·后端·性能优化·wpf
weixin_464078077 天前
wpf依赖注入驱动的 MVVM实现(含免费源代码demo)
wpf