Como adicionar detalhes de linha a um controle DataGrid

Artigo
01/30/2025

Ao usar o controle DataGrid, 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 DataGrid que apresenta apenas um resumo dos dados de 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 propriedade RowDetailsTemplate. A ilustração a seguir mostra um exemplo de uma seção de detalhes da linha.

DataGrid exibido com detalhes da linha

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 que é 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 a partir do controle em que ele é definido.

Para exibir detalhes de linha usando XAML embutido

Crie um DataGrid que exibe 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 DataGrid e como definir o 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 do cliente.

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 da linha usando um recurso

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

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

O XAML a seguir mostra o RowDetailsTemplate definido na classe 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>

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

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

O XAML a seguir mostra a propriedade RowDetailsTemplate definida como 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 impedir a rolagem horizontal para obter detalhes da linha

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

Por padrão, o valor é definido como VisibleWhenSelected. Você pode defini-lo como Visible para mostrar os detalhes de todas as linhas ou Collapsed para ocultar os detalhes de todas as linhas.
Se necessário, defina a propriedade AreRowDetailsFrozen como true para impedir que a 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 da linha usando um recurso

Para definir a visibilidade e impedir a rolagem horizontal para obter detalhes da linha

Recursos adicionais