WPF DataGrid using data templates

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>

Create a data source using data model classes,所以AutoGenerateColumns=“False”

使用DataGridTextColumn Binding model's property fields.

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;
}

Create a data collection for the data model,绑定到DataGrid 的ItemsSource 属性.

显示效果如下：