[Resolvido] Implementando o DataGrid em WPF - Parte 02

[RSS iMasters 5]

Na primeira parte do arquivo (caso não tenha lido, acesse aqui) aprendemos como popular nosso DataGrid, especificar as colunas e osm seus tipos. Como prometido, vamos aprender a colocar uma imagem no DataGrid. Vamos continuar a utilizar a aplicação de exemplo do artigo anterior.

O primeiro passo é alterar nossa consulta anterior. Estamos utilizando nesse exemplo a base de dados do AdventureWorks. Nossa consulta irá partir da tabela Product até chegar na tabela Product Photo, que contém a imagem do produto:

 SELECT PRO.ProductID,

PRO.Name,

PRO.ProductNumber,

PRO.color,

IMG.ThumbNailPhoto

FROM Production.Product PRO

INNER JOIN Production.ProductProductPhoto PPR

ON PPR.ProductID = PRO.ProductID

INNER JOIN Production.ProductPhoto IMG

ON PPR.ProductPhotoID = IMG.ProductPhotoID

Essa consulta irá trazer uma coluna chamada ThumbNailPhoto, que possui uma imagem no formato binário.

Agora vamos alterar nosso código C# para acessar essa nova consulta. Faça a alteração no evento click do botão Carregar:

 private void btnCarregar_Click(object sender, RoutedEventArgs e)

{

DataSet dsConsulta = new DataSet();

 

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

{

conn.Open();

 

string strComando = "SELECT PRO.ProductID, " +

" PRO.Name, " +

" PRO.ProductNumber, " +

" PRO.color, " +

" IMG.ThumbNailPhoto " +

" FROM Production.Product PRO " +

"INNER JOIN Production.ProductProductPhoto PPR " +

" ON PPR.ProductID = PRO.ProductID " +

"INNER JOIN Production.ProductPhoto IMG " +

" ON PPR.ProductPhotoID = IMG.ProductPhotoID";

 

SqlCommand cmd = new SqlCommand(strComando, conn);

 

SqlDataAdapter sda = new SqlDataAdapter(cmd);

 

sda.Fill(dsConsulta, "TABLE");

}

 

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

}

Agora é a parte interessante: vamos alterar o código XAML. No artigo anterior aprendemos sobre os tipos de colunas e um deles foi o DataGridTemplateColumn. Com ela podemos definir qual objeto estará dentro da célula - pode ser um TextBlock, um CheckBox ou um componente Image, que é o que vamos utilizar. Veja o código abaixo:

 <DataGridTemplateColumn Header="Imagem" Width="SizeToCells" IsReadOnly="True">

<DataGridTemplateColumn.CellTemplate>

<DataTemplate>

<Image Source="{Binding ThumbNailPhoto}" />

</DataTemplate>

</DataGridTemplateColumn.CellTemplate>

</DataGridTemplateColumn>

Esse código deve ficar dentro da tag <DataGrid.Columns>. Criamos uma coluna do Tipo DataGridTemplateColumn. Dentro da coluna definimos a tag DataTemplate, que é onde definimos nosso componente. No componente Image definimos o Source onde setamos a imagem, no caso Binding (significa que vem da fonte de dados do DataGrid) e a coluna que contém a imagem.

Veja como ficou nosso exemplo:

No próximo artigos vamos aprender como colocar uma coluna com um link.

Até a próxima.

 

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