DataGrid 控件中显示和配置行详细信息

1. 创建定义行详细信息部分的外观的一个 DataTemplate。

2. 将 DataTemplate 放入 <DataGrid.RowDetailsTemplate> 标记。

<sdk:DataGrid x:Name="dataGrid1" Height="400" IsReadOnly="True" >
    <sdk:DataGrid.RowDetailsTemplate>
        <!-- Begin row details section. -->
        <DataTemplate>
            <Border BorderBrush="Black" BorderThickness="1" Background="Tan">
                <StackPanel Orientation="Horizontal">
                    <StackPanel>
                        <StackPanel Orientation="Horizontal">
                            <!-- Controls are bound to Task properties. -->
                            <TextBlock FontSize="16" Foreground="MidnightBlue" Text="{Binding Name}" 
                               Margin="0,0,10,0" VerticalAlignment="Bottom" />
                            <TextBlock FontSize="12" Text="Due Date: " VerticalAlignment="Bottom"/>
                            <sdk:DatePicker SelectedDate="{Binding DueDate, Mode=TwoWay}" VerticalAlignment="Bottom" />
                            <TextBlock FontSize="12" Text="    Complete:" VerticalAlignment="Bottom" />
                            <CheckBox IsChecked="{Binding Complete, Mode=TwoWay}" 
                                  VerticalAlignment="Center" />
                        </StackPanel>
                        <TextBlock FontSize="12" Text="Notes: " />
                        <TextBox FontSize="12" Text="{Binding Notes, Mode=TwoWay}" 
                             Width="420" TextWrapping="Wrap"/>
                    </StackPanel>
                </StackPanel>
            </Border>
        </DataTemplate>
        <!-- End row details section. -->
    </sdk:DataGrid.RowDetailsTemplate>
</sdk:DataGrid>

3. 将 DataTemplate 绑定到 DataGrid 的 RowDetailsTemplate 属性。

<data:DataGrid RowDetailsTemplate="{StaticResource templateReference}"/>