Como: Adicionar linha de detalhes para um controle DataGrid

Artigo
08/04/2011

Ao usar o DataGrid o controle, você pode personalizar a apresentação de dados adicionando uma seção de detalhes de linha. Adicionar uma seção de detalhes da linha permite agrupar alguns dados em um modelo que está opcionalmente visível ou recolhidos. Por exemplo, você pode adicionar detalhes da linha para um DataGrid que apresenta apenas um resumo dos dados para cada linha na 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 de RowDetailsTemplate propriedade. A ilustração a seguir mostra um exemplo de uma seção de detalhes da linha.

DataGrid mostrada com detalhes de linha

Você pode definir o modelo de detalhes da linha como em linha XAML 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 é adicionado como inline XAML só é acessível do controle onde ele está definido.

Para exibir os detalhes da linha usando in-line XAML

Criar um DataGrid que exibe dados de uma fonte de dados.
In the DataGrid element, add a RowDetailsTemplate element.

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

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

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

O código a seguir mostra a consulta que é usada para selecionar os dados que são exibidos na DataGrid. Neste exemplo, a consulta seleciona dados de uma entidade que contém as informações do cliente.

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

Para exibir os detalhes da linha usando um recurso

Criar um DataGrid que exibe dados de uma fonte de dados.
Adicionar um Resources elemento para o elemento raiz, como um Window controle ou um Page de controle ou adicionar um Resources elemento para o Application classe no arquivo a ser (ou Application).

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

O XAML a seguir mostra a RowDetailsTemplate definidos a 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>

Sobre o DataTemplate, defina a Diretiva X:Key para um valor que identifica exclusivamente o modelo de dados.

No DataGrid elemento, defina a RowDetailsTemplate propriedade ao recurso definido no procedimento anterior. 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 impedir a rolagem horizontal para obter detalhes da linha

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

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

Partilhar via

Como: Adicionar linha de detalhes para um controle DataGrid

Para exibir os detalhes da linha usando in-line XAML

Para exibir os detalhes da linha usando um recurso

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

Recursos adicionais