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

项目
01/30/2025

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

与行详细信息一起显示的 DataGrid

将行详细信息模板定义为内联 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 控件），或向 App.xaml（或 Application.xaml）文件中的 Application 类添加 Resources 元素。

在 resources 元素中，创建一个 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 显示行详细信息

使用资源显示行详细信息

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

其他资源