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

2011-08-12

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

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

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

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

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

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

下面的 XAML 演示 DataGrid 以及如何以内联方式定义 RowDetailsTemplate。 DataGrid 在每行中显示三个值，在选择行时显示另外三个值。

<Window x:Class="WpfApplication1.MainWindow"
        xmlns="https://schemas.microsoft.com/winfx/2006/xaml/presentation"
        xmlns:x="https://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 中的数据。在此示例中，查询从包含客户信息的实体中选择数据。

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

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();
}

使用资源显示行详细信息

创建显示来自数据源的数据的 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 显示行详细信息

使用资源显示行详细信息

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

其他资源