UWP+XAML中嵌套列表数据绑定实现问题咨询

嘿，这事儿不难，我一步步给你拆解，保证你能搞定嵌套列表的绑定！

第一步：准备ViewModel（关键！） #

首先，咱们得把数据包装成支持通知的ViewModel，这样API拿到数据后，UI能自动更新。先搞个通用的基类实现INotifyPropertyChanged接口：

using System.ComponentModel;
using System.Runtime.CompilerServices;

public class ViewModelBase : INotifyPropertyChanged
{
    public event PropertyChangedEventHandler PropertyChanged;

    protected void OnPropertyChanged([CallerMemberName] string propertyName = null)
    {
        PropertyChanged?.Invoke(this, new PropertyChangedEventArgs(propertyName));
    }
}

然后写主ViewModel，用来存储从API获取的TableData集合：

using System.Collections.ObjectModel;
using System.Net.Http;
using System.Threading.Tasks;
using Newtonsoft.Json;

public class MainViewModel : ViewModelBase
{
    private ObservableCollection<TableData> _tableDataList;
    public ObservableCollection<TableData> TableDataList
    {
        get => _tableDataList;
        set
        {
            _tableDataList = value;
            OnPropertyChanged();
        }
    }

    // 替换成你的真实API请求逻辑
    public async Task LoadDataFromApi()
    {
        using var client = new HttpClient();
        // 这里替换为你的API地址
        string jsonResponse = await client.GetStringAsync("https://your-api-endpoint");
        
        // 反序列化数据，你的JsonProperty标签已经帮咱们匹配好了字段
        var rawDataList = JsonConvert.DeserializeObject<List<TableData>>(jsonResponse);
        
        // 转成ObservableCollection，集合变化时UI能自动感知
        TableDataList = new ObservableCollection<TableData>(rawDataList);
    }
}

第二步：绑定页面的数据上下文 #

在你的页面后台代码（比如MainPage.xaml.cs）里，初始化ViewModel并设置数据上下文：

public MainPage()
{
    InitializeComponent();
    DataContext = new MainViewModel();
    
    // 页面加载时触发数据加载
    Loaded += async (sender, e) =>
    {
        var vm = DataContext as MainViewModel;
        await vm.LoadDataFromApi();
    };
}

第三步：XAML里实现嵌套列表绑定 #

核心就在这里了，外层用ListView绑定TableDataList，然后在每个列表项的模板里，再用ItemsControl（或ListView）绑定当前TableData的ObjectsDetected集合：

<ListView ItemsSource="{Binding TableDataList}">
    <ListView.ItemTemplate>
        <DataTemplate>
            <!-- 外层列表项：显示文件编号 -->
            <StackPanel Margin="10" BorderBrush="#E0E0E0" BorderThickness="1" Padding="12">
                <TextBlock Text="文件编号：" FontWeight="SemiBold"/>
                <TextBlock Text="{Binding File_Name_At_Upload}" FontSize="16" Margin="0,0,0,12"/>
                
                <!-- 内层嵌套列表：显示检测到的对象 -->
                <TextBlock Text="检测结果：" FontWeight="SemiBold" Margin="0,8,0,4"/>
                <ItemsControl ItemsSource="{Binding ObjectsDetected}">
                    <ItemsControl.ItemTemplate>
                        <DataTemplate>
                            <StackPanel Orientation="Horizontal" Margin="4,0">
                                <TextBlock Text="{Binding className}" Width="140"/>
                                <TextBlock Text="置信度："/>
                                <TextBlock Text="{Binding score, StringFormat={}{0:P2}}"/>
                            </StackPanel>
                        </DataTemplate>
                    </ItemsControl.ItemTemplate>
                </ItemsControl>
            </StackPanel>
        </DataTemplate>
    </ListView.ItemTemplate>
</ListView>

实用小提示 #

• 为什么用ObservableCollection？因为它会在集合增删改时自动通知UI更新，普通List做不到这一点。
• 如果内层列表数据较多，把ItemsControl换成ListView就能自带滚动功能。
• 确保你已经安装了Newtonsoft.Json NuGet包，不然反序列化会报错。

这样一套流程走下来，你从API拿到的嵌套数据就能完美渲染到UI上啦！

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