[Resolvido] Implementando o DataGrid em WPF - Parte 01

[RSS iMasters 5]

Em suas primeiras versões o WPF não possuía um grid, mas na versão .NET 4.0, a Microsoft corrigiu essa ?falha?. Estudei sobre esses componentes nos últimos dias (estou desenvolvendo meu primeiro projeto em WPF) e vou compartilhar com vocês um pouco desse aprendizado.

Como de costume, gosto de explicar e ao mesmo tempo desenvolver o projeto. Então, vamos começar!

Abra o Visual Studio e 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:

Para esse exemplo vou utilizar o banco de dados AdventureWorks que você encontra 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 irá 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.

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 a Tag de coluna conforme 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!

 

http://imasters.com.br/artigo/23012/dotnet/implementando-o-datagrid-em-wpf-parte-01