WPF -  DataGrid - Exibindo detalhes em cada linha - I
  Um recurso muito útil do controle DataGrid da WPF é a capacidade de exibir detalhes para cada linha do grid. Neste artigo iremos mostrar o recurso funcionando e analisar o seu funcionamento.

O controle DatGrid da WPF foi incluído a partir da versão do Visual Studio 2008 (.NET Framework 3.5 SP1) como uma instalação do WPF ToolKit. A partir da versão 4.0 do .NET Framework ele esta integrado ao Visual Studio.

O componente DataGrid pode ser considerado uma tabela composta de linhas e colunas, possuindo muitas propriedades e eventos que permitem a sua configuração de forma fácil e intuitiva. A propriedade ItemsSource é usada para preencher o controle com dados.

Um dos recursos interessantes do DataGrid é poder exibir detalhes de cada linha do grid. Fazemos isso usando a propriedade RowDetailsTemplate para especificar um template para o detalhe das linhas.

Vamos criar um exemplo onde fazemos a vinculação como DataGrid com as propriedades Nome, Nascimento e Detalhes da classe Usuario, onde no DataGrid a propriedade Detalhes será exibida como um detalhe para cada linha quando a mesma for selecionada pelo usuário.

Objetivo

Exibir detalhes em cada linha do controle DataGrid da WPF.

Recursos usados:

Criando o projeto WPF

Abra o Visual Studio 2012 Express for Web e clique em New Project;

Selecione a linguagem Visual C#  e o template WPF Application e informe o nome DataGrid_Detalhes_WPF;

Selecione o arquivo MainWindow.xaml que foi criado no projeto e defina o seguinte código neste arquivo:

No código a seguir temos a criação e configuração do controle DataGrid:

<DataGrid Name="dgUsuarios" AutoGenerateColumns="False" FontFamily="Trebuchet MS" FontSize="14">
                <DataGrid.Columns>
                    <DataGridTextColumn Header="Nome" Binding="{Binding Nome}" />
                    <DataGridTextColumn Header="Data de Nascimento" Binding="{Binding Nascimento}" />
                </DataGrid.Columns>
                <DataGrid.RowDetailsTemplate>
                    <DataTemplate>
                        <TextBlock Text="{Binding Detalhes}" Margin="15" />
                    </DataTemplate>
                </DataGrid.RowDetailsTemplate>
</DataGrid>

Definimos neste código:

  1. O nome do controle :  Name="dgUsuarios"
  2. Duas colunas vinculadas : uma à propriedade Nome e outro à propriedade Nascimento da classe Usuario:

     <DataGrid.Columns>
             <DataGridTextColumn Header="Nome" Binding="{Binding Nome}" />
             <DataGridTextColumn Header="Data de Nascimento" Binding="{Binding Nascimento}" />
    </DataGrid.Columns>

  3. Um template usando RowDetailsTemplate que esta vinculado à propriedade Detalhes da classe Usuario:

     <DataGrid.RowDetailsTemplate>
            <DataTemplate>
               <TextBlock Text="{Binding Detalhes}" Margin="15" />
           </DataTemplate>
     </DataGrid.RowDetailsTemplate>

Vamos agora definir o código no arquivo MainWindow.xaml.cs onde vamos definir a classe Usuario e um construtor que irá criar alguns usuários para exibição no controle DataGrid.

Abra o arquivo MainWindow.xaml.cs e digite o código abaixo neste arquivo:

using System;
using System.Collections.Generic;
using System.Windows;
using System.Windows.Documents;

namespace DataGrid_Detalhes_WPF
{
    public partial class MainWindow : Window
    {
        public MainWindow()
        {
            InitializeComponent();
            List<Usuario> usuarios = new List<Usuario>();
            usuarios.Add(new Usuario() { Id = 1, Nome = "Macoratti", Nascimento = new DateTime(1975, 9, 23) });
            usuarios.Add(new Usuario() { Id = 2, Nome = "Jefferson", Nascimento = new DateTime(1992, 7, 10) });
            usuarios.Add(new Usuario() { Id = 3, Nome = "Janice", Nascimento = new DateTime(1994, 8, 13) });
            usuarios.Add(new Usuario() { Id = 3, Nome = "Miriam", Nascimento = new DateTime(1996, 9, 13) });
            usuarios.Add(new Usuario() { Id = 3, Nome = "Jessica", Nascimento = new DateTime(1990, 7, 1) });
            usuarios.Add(new Usuario() { Id = 3, Nome = "Mario", Nascimento = new DateTime(1959, 7, 13) });
            dgUsuarios.ItemsSource = usuarios;
        }
    }

    public class Usuario
    {
        public int Id { get; set; }
        public string Nome { get; set; }
        public DateTime Nascimento { get; set; }
        public string Detalhes
        {
            get
            {
                return String.Format("{0} nasceu na {1}.", this.Nome, this.Nascimento.ToLongDateString());
            }
        }
    }
}

Neste código criamos a classe Usuario definindo as propriedades : Id, Nome, Nascimento e detalhes que irá exibir o nome e a data de nascimento por extenso do usuário no detalhe da linha.

O construtor MainWindow() inicializa os controles e cria uma lista de usuários vinculando-os ao controle DataGrid (dgUsuarios) usando sua propriedade ItemsSource.

Executando o projeto WPF e selecionando uma linha do DataGrid iremos visualizar o detalhe para linha que exibe o nome e data de nascimento conforme figura a seguir:

Usando a propriedade RowDetailsVisibilityMode  podemos alterar esse comportamento.

O valor padrão para essa propriedade é VisibleWhenSelected que exibe o detalhe somente quando a linha for selecionada.

Alterando o seu valor para Visible, e executando o projeto teremos o seguinte resultado:

Agora temos a exibição de todos os detalhes para cada linha.

E se eu quiser exibir uma imagem no detalhe para cada linha ?

Neste caso você terá que aguardar a continuação deste artigo onde eu mostro como fazer isso...

Pegue o projeto completo aqui :   DataGrid_Detalhes_WPF.zip 

João 8:12 Então Jesus tornou a falar-lhes, dizendo: Eu sou a luz do mundo; quem me segue de modo algum andará em trevas, mas terá a luz da vida.

Veja os Destaques e novidades do SUPER DVD Visual Basic (sempre atualizado) : clique e confira !

Quer migrar para o VB .NET ?

Quer aprender C# ??

 

             Gostou ?   Compartilhe no Facebook   Compartilhe no Twitter
 

Referências:

José Carlos Macoratti