Archive

Posts Tagged ‘“DataGrid com Imagem”’

WPF: DataGrid – Parte 2

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

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 esse tipo de coluna 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 contem a imagem.

Veja como ficou nosso exemplo:

Bem simples, não? Na próxima tarde desse artigo vamos aprender como utilizar a coluna DataGridHyperlinkColumn, a congelar colunas e outras funcionalidades.

Obrigado e até o próximo artigo.