Добавление сведений о строках в элемент управления DataGrid

Статья
06/02/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 в класс Application в файле App.xaml (или Application.xaml).

В элементе resources создайте элемент DataTemplate, который определяет внешний вид раздела сведений о строках.

В следующем коде XAML показан шаблон RowDetailsTemplate, определенный в классе Application.

<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

Отображение сведений о строках с помощью ресурса

Настройка видимости и блокировка горизонтальной прокрутки для сведений о строках

Обратная связь

Дополнительные ресурсы