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 ;

        }

    }