none
Imagem do DataGrid RRS feed

  • Pergunta

  • Olá a todos,

    Estou com um problema e olha que pesquisei de mais, e tentei usar MUITOS códigos, porém nenhum foi com sucesso. Vou explicar o máximo que puder.

    Tenho uma aplicação Web Silverlight (C#). Tenho um Grid no qual adiciono algumas colunas no código xaml  (Código 1) e uso um Binding para adicionar os dados nele.

    <DataGrid Name="DataGrid1" HorizontalAlignment="Left" Margin="6,68,0,0" VerticalAlignment="Top" AutoGenerateColumns="False" SelectionMode="MultiRow" RowHeight="50" CanUserSort="False" Background="#FF415869" Foreground="White" BorderBrush="#FF415869" SelectedBackground="#C2169EC4" MouseOverBrush="#96169EC4">
                            <DataGrid.Columns>
                                <DataGridTextColumn Header="Visitante" Binding="{Binding NomePessoa}" Width ="Auto" />
                                <DataGridTextColumn Header="Classe" Binding="{Binding ClassePessoa}" Width="Auto" />
                                <DataGridTextColumn Header="Empresa" Binding="{Binding UnidadePessoa}" Width="Auto"/>
                                
                            </DataGrid.Columns>
    </DataGrid>

    *Código1

    Vamos lá, junto neste meu Grid, futuramente irei precisar trazer imagens de um banco de dados, porém até o momento, preciso apenas pegar essa imagem da minha maquina mesmo ou até mesmo posso importar para o projeto (Resources/imagens/imagens.jpg). Essa coluna da Imagem eu estou criando via código C#, tentei utilizar o código abaixo (Código 2) porém nao foi com sucesso, nao existe essa opção de "DataGridViewImageCell". Gostaria de saber se vocês podem me ajudar, segue abaixo também o código que eu uso para criar essa coluna minha de fotos (Código 3).

    DataGridViewImageColumn colunaImage = new DataGridViewImageColumn();
    DataGridViewImageCell celulaImage = new DataGridViewImageCell();
    celulaImage.Value = Image.FromFile("c:\\msn.jpg");
    dataGridView1.Columns.Add(colunaImage);
    DataGridViewRow linhadgv = new DataGridViewRow();
    linhadgv.Cells.Add(celulaImage);
    dataGridView1.Rows.Add(linhadgv);

    *Código2 / ref: http://social.msdn.microsoft.com/Forums/pt/vsvbasicpt/thread/25ddca31-6871-442d-a150-0cec2328cca3

            void CriaColunaFoto()
            {
                DataGridImageColumn coluna = new DataGridImageColumn();           
                coluna.Header = "Fotos";            
                DataGrid1.Columns.Add(coluna);
            }

    Obrigado a todos, até o momento !!


    Atenciosamente, Guilherme. Caso esta resposta foi útil para seu problema, por favor, marque como mesma. Caso ela apenas responda sua pergunta corretamente, não esqueça de marca-lá.



    • Movido Levi Domingos quinta-feira, 31 de maio de 2012 11:55 (De:C#)
    • Editado Seratti quinta-feira, 31 de maio de 2012 16:54
    quarta-feira, 30 de maio de 2012 19:43

Respostas

  • Seratti,

    Quando você estiver tratando com Imagem, a história muda um pouco, pois o BitmapImage não trata diretamente array de bytes. O que você pode fazer é o seguinte. No caso existem vários jeitos de se fazer essa mesma coisa, mas estou vendo um formato simples de se utilizar.

    using System.IO;
    using System.Linq;
    using System.Windows;
    using System.Windows.Controls;
    using System.Windows.Media.Imaging;
    namespace SilverlightApplication1
    {
        public partial class MainPage : UserControl
        {
            public MainPage()
            {
                InitializeComponent();
            }
            private void UserControl_Loaded(object sender, RoutedEventArgs e)
            {
                dataGrid1.ItemsSource = Enumerable.Range(1, 10).Select(i =>
                    new PessoaSource
                    {
                        NomePessoa = string.Format("Nome {0}", i),
                        ClassePessoa = string.Format("Classe {0}", i),
                        Unidade = string.Format("Unidade {0}", i),
                        Imagem = new BitmapImage().SetSource(new byte[] {})
                    });
            }
        }
        public static class BitmapImageExtension
        {
            public static BitmapImage SetSource(this BitmapImage image, byte[] b)
            {
                using (MemoryStream ms = new MemoryStream(b))
                {
                    image = new BitmapImage();
                    image.SetSource(ms);
                }
                return image;
            }
        }
        public class PessoaSource
        {
            public string NomePessoa { get; set; }
            public string ClassePessoa { get; set; }
            public string Unidade { get; set; }
            public BitmapImage Imagem { get; set; }
        }
    }

    Espero que tenha ajudado,

    Atenciosamente,


    Samuel Fabel

    • Marcado como Resposta Seratti segunda-feira, 23 de julho de 2012 12:35
    segunda-feira, 25 de junho de 2012 19:37

Todas as Respostas

  • Olá Seratti,

    Como você bem disse isso não vai funcionar, isto por que o conceito do datagrid no silverlight é bem diferente do datagrid em um WindowsForm.

    Para o senario, criei um User Control chamado TesteGridImage, uma classe para representar a PessoaSource na qual estamos falando. Como é um exemplo, estou buscando uma imagem numa pasta chamada images que ficou dentro do projeto. O xaml ficaria assim:

    <UserControl x:Class="SilverlightApplication1.TesteGridImage"
        xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
        xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
        xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
        xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
        mc:Ignorable="d" Loaded="UserControl_Loaded"
        d:DesignHeight="300" d:DesignWidth="400" xmlns:sdk="http://schemas.microsoft.com/winfx/2006/xaml/presentation/sdk">
        
        <Grid x:Name="LayoutRoot" Background="White">
            <sdk:DataGrid AutoGenerateColumns="False" Name="dataGrid1">
                <sdk:DataGrid.Columns>
                    <sdk:DataGridTextColumn Header="Visitante" Binding="{Binding Path=NomePessoa}" Width="Auto" />
                    <sdk:DataGridTextColumn Header="Classe" Binding="{Binding Path=ClassePessoa}" Width="Auto" />
                    <sdk:DataGridTextColumn Header="Empresa" Binding="{Binding Path=Unidade}" Width="Auto" />
                    <sdk:DataGridTemplateColumn Header="Imagem Pessoa">
                        <sdk:DataGridTemplateColumn.CellTemplate>
                            <DataTemplate>
                                <Image Source="{Binding Path=Imagem}" />
                            </DataTemplate>
                        </sdk:DataGridTemplateColumn.CellTemplate>
                    </sdk:DataGridTemplateColumn>
                </sdk:DataGrid.Columns>
            </sdk:DataGrid>
        </Grid>
    </UserControl>

    O código fica assim:

    using System;
    using System.Linq;
    using System.Windows;
    using System.Windows.Controls;
    using System.Windows.Media.Imaging;
    namespace SilverlightApplication1
    {
        public partial class TesteGridImage : UserControl
        {
            public TesteGridImage()
            {
                InitializeComponent();
            }
            private void UserControl_Loaded(object sender, RoutedEventArgs e)
            {
                dataGrid1.ItemsSource = Enumerable.Range(1, 10).Select(i =>
                    new PessoaSource
                    {
                        NomePessoa = string.Format("Nome {0}", i),
                        ClassePessoa = string.Format("Classe {0}", i),
                        Unidade = string.Format("Unidade {0}", i),
                        Imagem = new BitmapImage(new Uri("images/form10.PNG", UriKind.Relative))
                    });
            }
        }
        public class PessoaSource
        {
            public string NomePessoa { get; set; }
            public string ClassePessoa { get; set; }
            public string Unidade { get; set; }
            public BitmapImage Imagem { get; set; }
        }
    }

    O que eu fiz. Coloquei uma coluna do tipo template e uma imagem dentro desse template. No Source dessa imagem, eu coloquei um binding para pegar uma das propriedades da coleção que está preenchendo o grid. Você pode observar que a propriedade Imagem na classe PessoaSource é do tipo BitmapImage que é um tipo que mais para frente você poderá trabalhar com array de bytes, isto é, o tipo que normalmente vem quando é imagem no banco.

    No caso se precisar aplicar essa coluna via código não é tão complicado assim. Ficaria mais ou menos assim:

    DataGridTemplateColumn column = new DataGridTemplateColumn();
    column.CellTemplate = (DataTemplate)XamlReader.Load(@"<DataTemplate xmlns=""http://schemas.microsoft.com/client/2007""><Image Source=""{Binding Imagem}"" /></DataTemplate>");
    É claro que isso é muito improvisado, mas funciona.

    Espero que tenha ajudado,

    Atenciosamente,


    Samuel Fabel

    segunda-feira, 18 de junho de 2012 20:19
  • Samuel, preciso pegar imagens do banco agora, seja o caminho ou seja a própria imagem armazenada no banco. Caso vc possa me ajudar ficarei agradecido !! abraços.

    Atenciosamente, Guilherme. Caso esta resposta foi útil para seu problema, por favor, marque como mesma. Caso ela apenas responda sua pergunta corretamente, não esqueça de marca-lá.

    segunda-feira, 25 de junho de 2012 17:40
  • Seratti,

    Quando você estiver tratando com Imagem, a história muda um pouco, pois o BitmapImage não trata diretamente array de bytes. O que você pode fazer é o seguinte. No caso existem vários jeitos de se fazer essa mesma coisa, mas estou vendo um formato simples de se utilizar.

    using System.IO;
    using System.Linq;
    using System.Windows;
    using System.Windows.Controls;
    using System.Windows.Media.Imaging;
    namespace SilverlightApplication1
    {
        public partial class MainPage : UserControl
        {
            public MainPage()
            {
                InitializeComponent();
            }
            private void UserControl_Loaded(object sender, RoutedEventArgs e)
            {
                dataGrid1.ItemsSource = Enumerable.Range(1, 10).Select(i =>
                    new PessoaSource
                    {
                        NomePessoa = string.Format("Nome {0}", i),
                        ClassePessoa = string.Format("Classe {0}", i),
                        Unidade = string.Format("Unidade {0}", i),
                        Imagem = new BitmapImage().SetSource(new byte[] {})
                    });
            }
        }
        public static class BitmapImageExtension
        {
            public static BitmapImage SetSource(this BitmapImage image, byte[] b)
            {
                using (MemoryStream ms = new MemoryStream(b))
                {
                    image = new BitmapImage();
                    image.SetSource(ms);
                }
                return image;
            }
        }
        public class PessoaSource
        {
            public string NomePessoa { get; set; }
            public string ClassePessoa { get; set; }
            public string Unidade { get; set; }
            public BitmapImage Imagem { get; set; }
        }
    }

    Espero que tenha ajudado,

    Atenciosamente,


    Samuel Fabel

    • Marcado como Resposta Seratti segunda-feira, 23 de julho de 2012 12:35
    segunda-feira, 25 de junho de 2012 19:37