WPF DataGrid 使用数据模板（2）

效果如下：

1. UI XAML设计

<DataGrid x:Name="gdTestPoints" AutoGenerateColumns="False" Margin="5">
   <DataGrid.Columns>
     <DataGridTextColumn Header="TestPointName" Binding="{Binding TestPointName}" Width="120"/>
     <DataGridTextColumn Header="TestStartDate" Binding="{Binding TestDate}" Width="200"/>
   </DataGrid.Columns>


       <DataGrid.RowDetailsTemplate>
          <DataTemplate>
             <DockPanel Background="GhostWhite">
                <Image DockPanel.Dock="Left" Source="{Binding ImageUrl}" Height="24" Margin="10"/>

                  <Grid Margin="0 10">
                      <Grid.ColumnDefinitions>
                         <ColumnDefinition Width="Auto"/>
                          <ColumnDefinition Width="\*"/>
                       </Grid.ColumnDefinitions>

                        <Grid.RowDefinitions>
                            <RowDefinition Height="Auto"/>
                            <RowDefinition Height="Auto"/>
                            <RowDefinition Height="Auto"/>
                         </Grid.RowDefinitions>

                 <TextBlock Text="ID:" FontWeight="Bold"/>
                 <TextBlock Text="{Binding Id}" Grid.Column="1"/>
                 <TextBlock Text="TestPointName:" FontWeight="Bold" Grid.Row="1"/>
                 <TextBlock Text="{Binding TestPointName}" Grid.Column="1" Grid.Row="1"/>
                  <TextBlock Text="TestStartDate:" FontWeight="Bold" Grid.Row="2"/>
                  <TextBlock Text="{Binding TestDate}" Grid.Column="1" Grid.Row="2"/>
                </Grid>
            </DockPanel>
         </DataTemplate>
     </DataGrid.RowDetailsTemplate>
   </DataGrid>

2. UI 后台代码

/// <summary>
/// MainWindow.xaml 的交互逻辑
/// </summary>

public partial class MainWindow : Window
{
    
       public class TestPoint
        {
    
            public int Id {
     get; set; }
            public string TestPointName {
     get; set; }
            public DateTime TestDate {
     get; set; }
            public string ImageUrl {
     get; set; }
        }

        public MainWindow()
        {
    
            InitializeComponent();
            List<TestPoint> points = new List<TestPoint>();
            //ImageUrl = "http://www.wpf-tutorial.com/images/misc/john\_doe.jpg"
            points.Add(new TestPoint() {
     Id = 1, TestPointName = "LCD Test", TestDate = new DateTime(2022, 7, 23), ImageUrl = "yes.png" });
            points.Add(new TestPoint() {
     Id = 2, TestPointName = "Temperateure Test", TestDate = new DateTime(2022, 1, 17) });
            points.Add(new TestPoint() {
     Id = 3, TestPointName = "Voltage Test", TestDate = new DateTime(2022, 9, 2), ImageUrl = "No.png" });
            gdTestPoints.ItemsSource = points ;
        }
    }