如何：向 DataGrid 控件中添加行详细信息

项目
05/04/2023

当使用 DataGrid 控件时，可以通过添加行详细信息部分来自定义数据表示形式。通过添加行详细信息部分，可对模板中的一些可见或折叠（可选）数据进行分组。例如，可以向 DataGrid 添加行详细信息，它仅显示 DataGrid 中每一行的数据摘要，但在用户选择行时将显示更多数据字段。在 RowDetailsTemplate 属性中定义行详细信息部分的模板。下图显示行详细信息部分的示例。

DataGrid shown with row details

将行详细信息模板定义为内联 XAML 或资源。以下过程中显示了这两种方法。可在整个项目中使用作为资源添加的数据模板，而无需重新创建模板。作为内联 XAML 添加的数据模板只能从定义它的控件访问。

使用内联 XAML 显示行详细信息

创建显示来自数据源的数据的 DataGrid。
在 DataGrid 元素内，添加一个 RowDetailsTemplate 元素。

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

以下 XAML 显示 DataGrid 以及如何定义 RowDetailsTemplate 内联。 DataGrid 将在每行中显示三个值，并在选择该行时显示另外三个值。

<Window x:Class="WpfApplication1.MainWindow"
        xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
        xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
        Title="MainWindow" Height="350" Width="525" 
        Loaded="Window_Loaded">
    <Grid>
        <DataGrid Name="dataGrid1" IsReadOnly="True" AutoGenerateColumns="False" >
            <DataGrid.Columns>
                <DataGridTextColumn Header="Company Name" Binding="{Binding CompanyName}"></DataGridTextColumn>
                <DataGridTextColumn Header="Contact First Name" Binding="{Binding FirstName}"></DataGridTextColumn>
                <DataGridTextColumn Header="Contact Last Name" Binding="{Binding LastName}"></DataGridTextColumn>
            </DataGrid.Columns>
            <DataGrid.RowDetailsTemplate>
                <DataTemplate>
                    <Border BorderThickness="0" Background="BlanchedAlmond" Padding="10">
                        <StackPanel Orientation="Vertical">
                            <StackPanel Orientation="Horizontal">
                                <TextBlock FontSize="12" Text="Email: " VerticalAlignment="Center" />
                                <TextBlock FontSize="16" Foreground="MidnightBlue" Text="{Binding EmailAddress}" VerticalAlignment="Center" />
                            </StackPanel>
                            <StackPanel Orientation="Horizontal">
                                <TextBlock FontSize="12" Text="Phone: " VerticalAlignment="Center" />
                                <TextBlock FontSize="16" Foreground="MidnightBlue" Text="{Binding Phone}" VerticalAlignment="Center" />
                            </StackPanel>
                            <StackPanel Orientation="Horizontal">
                                <TextBlock FontSize="12" Text="Sales Person: " VerticalAlignment="Center" />
                                <TextBlock FontSize="16" Foreground="MidnightBlue" Text="{Binding SalesPerson}" VerticalAlignment="Center" />
                            </StackPanel>
                        </StackPanel>
                    </Border>
                </DataTemplate>
            </DataGrid.RowDetailsTemplate>
        </DataGrid>
    </Grid>
</Window>

以下代码显示了一个查询，该查询用于选择在 DataGrid 中显示的数据。在此示例中，查询从包含客户信息的实体中选择数据。

private void Window_Loaded(object sender, RoutedEventArgs e)
{
    AdventureWorksLT2008Entities advenWorksEntities = new AdventureWorksLT2008Entities();

    ObjectQuery<Customer> customers = advenWorksEntities.Customers;

    var query =
    from customer in customers
    orderby customer.CompanyName
    select new
    {
        customer.LastName,
        customer.FirstName,
        customer.CompanyName,
        customer.Title,
        customer.EmailAddress,
        customer.Phone,
        customer.SalesPerson
    };

    dataGrid1.ItemsSource = query.ToList();
}

Dim advenWorksEntities As AdventureWorksLT2008Entities = New AdventureWorksLT2008Entities

Private Sub Window_Loaded(ByVal sender As System.Object, ByVal e As System.Windows.RoutedEventArgs) Handles MyBase.Loaded
    Dim customers As ObjectQuery(Of Customer) = advenWorksEntities.Customers
    Dim query = _
        From customer In customers _
        Order By customer.CompanyName _
        Select _
          customer.LastName, _
          customer.FirstName, _
          customer.CompanyName, _
          customer.Title, _
          customer.EmailAddress, _
          customer.Phone, _
          customer.SalesPerson

    dataGrid1.ItemsSource = query.ToList()
End Sub

使用资源显示行详细信息

创建显示来自数据源的数据的 DataGrid。
将 Resources 元素添加到根元素（例如 Window 控件或 Page 控件），或将 Resources 元素添加到 App.xaml（或 Application.xaml）文件中的 Application 类。

在资源元素中，创建定义行详细信息部分外观的 DataTemplate。

以下 XAML 显示了 Application 类中定义的 RowDetailsTemplate。

<Application.Resources>
    <DataTemplate x:Key="CustomerDetail">
        <Border BorderThickness="0" Background="BlanchedAlmond" Padding="10">
            <StackPanel Orientation="Vertical">
                <StackPanel Orientation="Horizontal">
                    <TextBlock FontSize="12" Text="Email: " VerticalAlignment="Center" />
                    <TextBlock FontSize="16" Foreground="MidnightBlue" Text="{Binding EmailAddress}" VerticalAlignment="Center" />
                </StackPanel>
                <StackPanel Orientation="Horizontal">
                    <TextBlock FontSize="12" Text="Phone: " VerticalAlignment="Center" />
                    <TextBlock FontSize="16" Foreground="MidnightBlue" Text="{Binding Phone}" VerticalAlignment="Center" />
                </StackPanel>
                <StackPanel Orientation="Horizontal">
                    <TextBlock FontSize="12" Text="Sales Person: " VerticalAlignment="Center" />
                    <TextBlock FontSize="16" Foreground="MidnightBlue" Text="{Binding SalesPerson}" VerticalAlignment="Center" />
                </StackPanel>
            </StackPanel>
        </Border>
    </DataTemplate>
</Application.Resources>

在 DataTemplate 上，将 x:Key 指令设置为唯一标识数据模板的值。

在 DataGrid 元素中，将 RowDetailsTemplate 属性设置为在前面步骤中定义的资源。将资源分配为静态资源。

以下 XAML 显示了为上一个示例中的资源设置的 RowDetailsTemplate 属性。

<DataGrid Name="dataGrid1" IsReadOnly="True" AutoGenerateColumns="False" RowDetailsTemplate="{StaticResource CustomerDetail}" >
    <DataGrid.Columns>
        <DataGridTextColumn Header="Company Name" Binding="{Binding CompanyName}"></DataGridTextColumn>
        <DataGridTextColumn Header="Contact First Name" Binding="{Binding FirstName}"></DataGridTextColumn>
        <DataGridTextColumn Header="Contact Last Name" Binding="{Binding LastName}"></DataGridTextColumn>
    </DataGrid.Columns>
</DataGrid>

设置可见性并防止水平滚动行详细信息

如有需要，请将 RowDetailsVisibilityMode 属性设置为 DataGridRowDetailsVisibilityMode 值。

默认情况下，该值设置为 VisibleWhenSelected。可以将其设置为 Visible 以显示所有行的详细信息，或将其设置为 Collapsed 以隐藏所有行的详细信息。
如有需要，请将 AreRowDetailsFrozen 属性设置为 true，以防止行详细信息部分水平滚动。

通过

如何：向 DataGrid 控件中添加行详细信息

使用内联 XAML 显示行详细信息

使用资源显示行详细信息

设置可见性并防止水平滚动行详细信息

其他资源