WPF：将列表绑定到 Grid/DataGrid/ItemControl 以进行自定义显示

Question

我有以下对象示例列表。它们只是示例，但在我的实际应用程序中，结果基于搜索条件。在我的示例中，我有 3 个人，我想以表格格式显示他们，可以是网格、数据网格、项目控件等，只要我可以绑定项目。行数和列数是动态的，因此我无法在设计时指定列数和行数。它们必须是动态的。在我的示例中，我列出了 3 个人。我想显示它们类似于所需的输出屏幕截图。在我的例子中，我有

1. 修复名为“属性”的第一列。此列列出类或对象的所有属性。它们也可以是动态的，因为结果来自数据库。可能有例如地址、性别、联系电话等，它们应该只显示在第一列。
2. PId1、PId2 和 PId3 列应该是动态的。例如，我有另一个项目 PId4、PId5 等等。它们必须作为新列添加。

请帮助我如何实现输出。我应该使用什么控件？我想把它绑定到列表中。

MainWindow.xaml.cs

using System.Collections.ObjectModel;
using System.Windows;

namespace DataGridDemo
{
    /// <summary>
    /// Interaction logic for MainWindow.xaml
    /// </summary>
    public partial class MainWindow : Window
    {
        public ObservableCollection<Person> Persons { get; set; }
        public int RowCount { get; set; }
        public MainWindow()
        {

            InitializeComponent();
            Persons = new ObservableCollection<Person>();
            Persons.Add(new Person { Name = "Mark", Age = 16, Id="PId1" });
            Persons.Add(new Person { Name = "Cyrus", Age = 18, Id= "PId2" });
            Persons.Add(new Person { Name = "David", Age = 20, Id= "PId3" });
            this.DataContext = this;
        }
    }
    public class Person
    {
        public string Name { get; set; }
        public int Age { get; set; }
        public string Id { get; set; }
    }
}

MainWindow.xaml（固定行和列仅用于演示）

<Window x:Class="DataGridDemo.MainWindow"
        xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
        xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
        xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
        xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
        xmlns:local="clr-namespace:DataGridDemo"
        mc:Ignorable="d"
        Title="MainWindow" Height="450" Width="800">
    <Grid>
        <Grid Width="400">
            <Grid.ColumnDefinitions>
                <ColumnDefinition></ColumnDefinition>
                <ColumnDefinition></ColumnDefinition>
                <ColumnDefinition></ColumnDefinition>
                <ColumnDefinition></ColumnDefinition>
            </Grid.ColumnDefinitions>
            <Grid.RowDefinitions>
                <RowDefinition Height="20"></RowDefinition>
                <RowDefinition Height="20"></RowDefinition>
                <RowDefinition Height="20"></RowDefinition>
            </Grid.RowDefinitions>
            <TextBlock Text="Properties" Grid.Row="0" Grid.Column="0"></TextBlock>
            <TextBlock Text="PId1" Grid.Row="0" Grid.Column="1"></TextBlock>
            <TextBlock Text="PId2" Grid.Row="0" Grid.Column="2"></TextBlock>
            <TextBlock Text="PId3" Grid.Row="0" Grid.Column="3"></TextBlock>
            <TextBlock Text="Name" Grid.Row="1" Grid.Column="0"></TextBlock>
            <TextBlock Text="Mark" Grid.Row="1" Grid.Column="1"></TextBlock>
            <TextBlock Text="Cyrus" Grid.Row="1" Grid.Column="2"></TextBlock>
            <TextBlock Text="David" Grid.Row="1" Grid.Column="3"></TextBlock>
            <TextBlock Text="Age" Grid.Row="2" Grid.Column="0"></TextBlock>
            <TextBlock Text="16" Grid.Row="2" Grid.Column="1"></TextBlock>
            <TextBlock Text="18" Grid.Row="2" Grid.Column="2"></TextBlock>
            <TextBlock Text="20" Grid.Row="2" Grid.Column="3"></TextBlock>
        </Grid>
    </Grid>
</Window>

期望的输出

我最想在 DPReview 相机比较中实现类似的目标

Answer 1

只需将 itemsSource 属性绑定到您的可观察集合（在您的情况下为 Persons）。

然后在您的 xaml 中使用数据模板并根据需要创建可视项目并将其绑定到模型类的属性

在你的 Xaml 中测试这个

<StackPanel>
    <ListView ItemsSource="{Binding Path=Persons,Mode=TwoWay,UpdateSourceTrigger=PropertyChanged}" >
        <ListView.ItemTemplate>
            <DataTemplate>
                <StackPanel Orientation="Horizontal">
                    <TextBlock Width="100" Text="{Binding Name}"/>
                    <TextBlock Width="100" Text="{Binding Age}"/>
                    <TextBlock Width="100" Text="{Binding Id}"/>
                </StackPanel>
            </DataTemplate>
        </ListView.ItemTemplate>
    </ListView>
</StackPanel>

我知道它与您在图片中描述的不完全一样，但是很容易找到它。