Como adicionar detalhes de linha a um controle DataGrid

Artigo
10/18/2023

Ao usar o DataGrid controle, você pode personalizar a apresentação de dados adicionando uma seção de detalhes da linha. Adicionar uma seção de detalhes de linha permite agrupar alguns dados em um modelo que fica opcionalmente visível ou recolhido. Por exemplo, você pode adicionar detalhes de linha a um que apresenta apenas um DataGrid resumo dos dados para cada linha no DataGrid, mas apresenta mais campos de dados quando o usuário seleciona uma linha. Você define o modelo para a seção de detalhes da linha na RowDetailsTemplate propriedade. A ilustração a seguir mostra um exemplo de uma seção de detalhes da linha.

DataGrid shown with row details

Defina o modelo de detalhes de linha como XAML embutido ou como um recurso. Ambas as abordagens são mostradas nos procedimentos a seguir. Um modelo de dados adicionado como um recurso pode ser usado em todo o projeto sem recriar o modelo. Um modelo de dados que é adicionado como XAML embutido só é acessível pelo controle no qual ele está definido.

Para exibir detalhes de linha usando XAML embutido

Crie um DataGrid que exiba dados de uma fonte de dados.
No elemento DataGrid, adicione um elemento RowDetailsTemplate.

Crie um DataTemplate que defina a aparência da seção de detalhes da linha.

O XAML a seguir mostra o e como definir o DataGrid RowDetailsTemplate embutido. O DataGrid exibe três valores em cada linha e mais três valores quando a linha é selecionada.

<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>

O código a seguir mostra a consulta usada para selecionar os dados exibidos no DataGrid. Neste exemplo, a consulta seleciona dados de uma entidade que contém informações de clientes.

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

Para exibir detalhes de linha usando um recurso

Crie um DataGrid que exiba dados de uma fonte de dados.
Adicione um elemento ao elemento raiz, como um controle ou um controle, ou adicione um Resources Resources Window Page elemento à Application classe no arquivo App.xaml (ou Application.xaml).

No elemento resources, crie um que defina a DataTemplate aparência da seção de detalhes da linha.

O XAML a seguir mostra o RowDetailsTemplate definido na Application classe.

<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>

No , defina a DataTemplate Diretiva x:Key como um valor que identifique exclusivamente o modelo de dados.

DataGrid No elemento , defina a RowDetailsTemplate propriedade para o recurso definido nas etapas anteriores. Atribua o recurso como um recurso estático.

O XAML a seguir mostra a RowDetailsTemplate propriedade definida para o recurso do exemplo anterior.

<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>

Para definir a visibilidade e evitar a rolagem horizontal para detalhes de linha

Se necessário, defina a RowDetailsVisibilityMode propriedade como um DataGridRowDetailsVisibilityMode valor.

Por padrão, o valor é definido como VisibleWhenSelected. Você pode defini-lo para Visible mostrar os detalhes de todas as linhas ou Collapsed para ocultar os detalhes de todas as linhas.
Se necessário, defina a propriedade para true impedir que a AreRowDetailsFrozen seção de detalhes da linha role horizontalmente.

Compartilhar via

Como adicionar detalhes de linha a um controle DataGrid

Para exibir detalhes de linha usando XAML embutido

Para exibir detalhes de linha usando um recurso

Para definir a visibilidade e evitar a rolagem horizontal para detalhes de linha

Recursos adicionais