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.