WPF中JSON数据绑定问题：文本框与动态表格实现

看起来你在WPF绑定JSON数据时遇到了两个核心问题：文本框绑定为空，以及如何动态展示person数组数据。我来一步步帮你解决这些问题：

一、先修复文本框绑定为空的问题 #

你的文本框绑定没生效，主要有几个原因：

1. 修复XAML中的控件命名冲突 #

你在XAML里同时给Label和TextBox设置了x:Name="number"，这会导致WPF解析时出现冲突，控件的引用和绑定都会出问题。先把它们的名字改得不一样：

<!-- 把原来的Label改名 -->
<Label x:Name="numberLabel" Content="Number" HorizontalAlignment="Left" Margin="45,20,0,0" VerticalAlignment="Top" Width="68"/>
<!-- 把原来的TextBox改名 -->
<TextBox x:Name="numberTextBox" HorizontalAlignment="Left" Height="23" Margin="118,20,0,0" TextWrapping="Wrap" Text="{Binding number}" VerticalAlignment="Top" Width="85" TextChanged="textBox_TextChanged"/>

2. 正确加载JSON并设置DataContext #

WPF的绑定需要有数据源，也就是DataContext。你需要先把JSON数据反序列化为你的Rootobject实例，然后把它设置为窗口的DataContext。

如果你用的是Newtonsoft.Json（需要先在NuGet包管理器中搜索安装），可以这样写：

using Newtonsoft.Json;
using System.IO;

public MainWindow()
{
    InitializeComponent();
    // 加载JSON数据（这里假设你的JSON文件在项目根目录，也可以直接用JSON字符串）
    string jsonContent = File.ReadAllText("yourJsonFile.json");
    // 反序列化为Rootobject实例
    Rootobject data = JsonConvert.DeserializeObject<Rootobject>(jsonContent);
    // 设置窗口的DataContext，这样绑定才能找到数据源
    this.DataContext = data;
}

如果你用的是.NET Core/.NET 5+自带的System.Text.Json，代码是这样的：

using System.Text.Json;
using System.IO;

public MainWindow()
{
    InitializeComponent();
    string jsonContent = File.ReadAllText("yourJsonFile.json");
    Rootobject data = JsonSerializer.Deserialize<Rootobject>(jsonContent);
    this.DataContext = data;
}

3. 确保实体类属性符合绑定要求 #

你的实体类属性已经是公共的，JSON键和属性名完全一致，反序列化会自动匹配。如果之后遇到大小写不一致的情况，可以用特性标记，比如Newtonsoft的[JsonProperty("number")]或者System.Text.Json的[JsonPropertyName("number")]。

二、动态展示person数组数据（用DataGrid代替手动Grid） #

你现在用多个Grid模拟表格的方式太繁琐，而且没法自动调整行数。WPF的DataGrid控件可以自动根据数据源生成列，并且自动适配行数，非常适合你的需求。

1. 修改XAML，添加DataGrid #

把你原来的多个Col Grid和table Grid替换成一个DataGrid：

<!-- 替换原来的nameCol、phoneCol等Grid和table Grid -->
<DataGrid x:Name="personDataGrid" 
          HorizontalAlignment="Left" 
          Height="288" 
          Margin="40,242,0,0" 
          VerticalAlignment="Top" 
          Width="430"
          ItemsSource="{Binding person}"
          AutoGenerateColumns="True"
          CanUserAddRows="False"/>

• ItemsSource="{Binding person}"：将DataGrid的数据源绑定到Rootobject里的person数组
• AutoGenerateColumns="True"：自动根据Person类的属性生成列
• CanUserAddRows="False"：禁止用户手动添加行（因为你的数据来自JSON）

2. 自定义列（可选） #

如果你不想用自动生成的列，想自定义列的显示名称和样式，可以这样写：

<DataGrid x:Name="personDataGrid" 
          HorizontalAlignment="Left" 
          Height="288" 
          Margin="40,242,0,0" 
          VerticalAlignment="Top" 
          Width="430"
          ItemsSource="{Binding person}"
          AutoGenerateColumns="False"
          CanUserAddRows="False">
    <DataGrid.Columns>
        <DataGridTextColumn Header="Name" Binding="{Binding name}"/>
        <DataGridTextColumn Header="Phone" Binding="{Binding phone}"/>
        <DataGridTextColumn Header="Address" Binding="{Binding address}"/>
        <DataGridTextColumn Header="Email" Binding="{Binding email}"/>
    </DataGrid.Columns>
</DataGrid>

三、最终代码调整总结 #

1. 修复XAML中的控件命名冲突
2. 加载并反序列化JSON数据，设置窗口的DataContext
3. 用DataGrid控件代替手动Grid来动态展示person数组数据

这样运行之后，你的文本框会显示JSON里的number值，DataGrid会自动显示所有person的条目，行数会根据JSON里的person数组长度自动调整。

内容的提问来源于stack exchange，提问作者marissalianam