Início > WPF > WPF: DataGrid – Parte 1

WPF: DataGrid – Parte 1

WPF em suas primeiras versões não possuía um grid, porém na versão .NET 4.0 a Microsoft corrigiu essa “falha”. Nós últimos dias tive estudado sobre esse componente (estou desenvolvendo meu primeiro projeto em WPF) e vou compartilhas com vocês um pouco desse aprendizado.

Como de costume, gosto de explicar e ao mesmo tempo desenvolver o projeto, então abra o Visual Studio, crie um projeto WPF Application, no meu exemplo o nome ficou WPF_DataGrid. Na página MainWindows coloque um DataGrid e um botão, conforme abaixo:

Tela Iniciada

Para esse exemplo vou utilizar o banco de dados AdventureWorks que você acha de forma fácil para download na internet. No evento Click do botão carregar, faça uma conexão com a base do SQL Server e uma consulta na tabela Product conforme código abaixo:


        private void btnCarregar_Click(object sender, RoutedEventArgs e)
        {
            DataSet dsConsulta = new DataSet();

            using (SqlConnection conn = new SqlConnection(ConfigurationManager.ConnectionStrings[1].ConnectionString))
            {
                conn.Open();

                SqlCommand cmd = new SqlCommand("SELECT ProductID, Name, ProductNumber, color FROM Production.Product", conn);

                SqlDataAdapter sda = new SqlDataAdapter(cmd);

                sda.Fill(dsConsulta, "TABLE");
            }
        }

Agora vamos ao nosso DataGrid. Coloquei o nome de dgTeste. No código XAML, localize o grid e coloque a opção ItemsSource=”{Binding}:

    <DataGrid AutoGenerateColumns="False" Height="287" HorizontalAlignment="Left" Margin="12,12,0,0" Name="dgTeste" VerticalAlignment="Top" Width="479" ItemsSource="{Binding}" />

É através do ItemsSource que informamos qual a fonte de dados o DataGrid ira acessar. Nesse exemplo a fonte de dados é dinâmica então apenas informamos que será um Binding (ligação de dados), poderíamos usar a opção Path para especificar a fonte (o que não faremos).

Em nosso DataGrid, altere a propriedade AutoGeneraterColumns para True.  e no final do nosso método carregar coloque:

this.dgTeste.DataContext = dsConsulta.Tables[0];

Execute o botão carregar e você terá o resultado abaixo:

Aprendemos como carregar o DataGrid de forma automática. Agora vamos supor, que mesmo minha consulta trazendo 4 colunas, queremos somente exibir 3 colunas e também queremos mudar o título da coluna. Nesse caso temos que criar as colunas na mão através do código XAML.

Primeiro passo é voltar a opção AutoGeneraterColumns para False.

Em seguida coloque uma Tag fechando o DataGrid e colocar a Tag de coluna, veja abaixo:

        <DataGrid AutoGenerateColumns="False" Height="287" HorizontalAlignment="Left"
                  Margin="12,12,0,0" Name="dgTeste" VerticalAlignment="Top" Width="479" ItemsSource="{Binding}">
            <DataGrid.Columns>

            </DataGrid.Columns>
        </DataGrid>

Agora temos que definir as colunas, podemos utilizar 5 opções:

  • DataGridCheckBoxColumn para valores booleanos
  • DataGridComboBoxColumn para valores enumeráveis
  • DataGridHyperlinkColumn para valores Uri
  • DataGridTemplateColumn para mostrar todos os tipos de dados, definindo o modelo de célula própria
  • DataGridTextColumn para mostrar valores de texto
No nosso exemplo, por hora vamos utilizar o tipo DataGridTextColumn, veja como vai ficar nosso DataGrid:

        <DataGrid AutoGenerateColumns="False" Height="287" HorizontalAlignment="Left"
                  Margin="12,12,0,0" Name="dgTeste" VerticalAlignment="Top" Width="479" ItemsSource="{Binding}">
            <DataGrid.Columns>
                <DataGridTextColumn Binding="{Binding Path=ProductID}" Header="Código Produto" />
                <DataGridTextColumn Binding="{Binding Path=Name}" Header="Nome" />
                <DataGridTextColumn Binding="{Binding Path=ProductNumber}" Header="Nº Produto" />
            </DataGrid.Columns>
        </DataGrid>

Criamos três colunas, onde no Binding informamos a qual Path cada coluna irá representar, no caso colocamos o nome das colunas que utilizamos em nossa consulta SQL. A propriedade Header é o nome que será exibido na coluna do DataGrid. Executando nossa aplicação veja como ficará:

Bem pessoal encerramos por aqui a primeira parte do artigo, salve a aplicação e aguardem o próximo artigo onde vamos aprender a colocar uma imagem no DataGrid e algumas outras propriedades disponíveis.

Até a próxima.

Anúncios
Categorias:WPF Tags:,
  1. outubro 4, 2011 às 8:21 am

    Olá Marcos, post bem claro e fácil de entender. Podia rolar um falando sobre a estruturas dos projetos em WPF, o que vc acha?

    • outubro 4, 2011 às 8:35 am

      Olá Luiz, é uma boa ideia, assim que terminar essa série de DataGrid, podemos estudar a possibilidade :D. Obrigado.

  1. outubro 9, 2011 às 11:45 am
  2. maio 6, 2012 às 3:27 pm

Deixe um comentário

Preencha os seus dados abaixo ou clique em um ícone para log in:

Logotipo do WordPress.com

Você está comentando utilizando sua conta WordPress.com. Sair / Alterar )

Imagem do Twitter

Você está comentando utilizando sua conta Twitter. Sair / Alterar )

Foto do Facebook

Você está comentando utilizando sua conta Facebook. Sair / Alterar )

Foto do Google+

Você está comentando utilizando sua conta Google+. Sair / Alterar )

Conectando a %s

%d blogueiros gostam disto: