WPF DataGrid 使用数据模板

1. 创建数据模型类

public class TestPointModel
{
        public int Id { get; set; }
        public string TestPointName { get; set; }
        public DateTime TestDateTime { get; set; }
        public string Details
        {
            get
            {
                return $"{Id} ,{TestPointName} have tested on {TestDateTime}";
            }
        }
    }

2. UI设计

<DataGrid x:Name="dgTestPoints" Margin="5" AutoGenerateColumns="False">
            <DataGrid.Columns>
                <DataGridTextColumn Header="ID" Binding="{Binding Id}" Width="50"/>
                <DataGridTextColumn Header="PointName" Binding="{Binding TestPointName}" Width="120"/>
                <DataGridTextColumn Header="DateTime" Binding="{Binding TestDateTime}" Width="200"/>
            </DataGrid.Columns>

            <!-- Visibility 属性 Visible,Collapsed,Hidden -->
            <DataGrid.RowDetailsTemplate>
                <DataTemplate>
                    <TextBlock Margin=" 10" Visibility="Visible" Text="{Binding Details}"></TextBlock>
               </DataTemplate>
            </DataGrid.RowDetailsTemplate>
        </DataGrid>

使用数据模型类创建数据源，所以AutoGenerateColumns=“False”

使用DataGridTextColumn 绑定模型的属性字段。

3.UI 后台代码

public MainWindow()
{
      InitializeComponent();
      dgTestPoints.ItemsSource = CreatDataSource();
 }

  

 //Create Data sorce for DataGrid Control show
private static List<TestPointModel> CreatDataSource()
{

   List<TestPointModel> testPoints = new List<TestPointModel>();
   testPoints.Add(new TestPointModel() { Id = 1, TestPointName = "VoltageTest", TestDateTime = new DateTime(2022, 7, 23) });
   testPoints.Add(new TestPointModel() { Id = 2, TestPointName = "CurrentTest", TestDateTime = new DateTime(2022, 1, 17) });
  testPoints.Add(new TestPointModel() { Id = 3, TestPointName = "SwitchTest", TestDateTime = new DateTime(2022, 9, 2) });

    return testPoints;
}

创建数据模型的数据集合，绑定到DataGrid 的ItemsSource 属性。

显示效果如下：