C# Brasil

Olá leitor. Após um questionamento de um amigo feito na semana passada, sobre como apresentar imagens no ReportViewer de um banco de dados, chego a este post. O processo de salvar consultar os dados da aplicação/banco de dados não mencionarei (o foco é apenas do relatório com imagens), mostrarei como apresentar imagens a partir de uma classe no relatório. Utilizarei o Microsoft Visual Studio 2010, .Net Framework 4.0, ReportViewer desta versão e o mesmo será feito em Windows Forms, mas a ideia pode ser expandida para web facilmente.
Vale lembrar que este post tem como objetivo apenas mostrar como fazer o relatório, portanto a estrutura das classes para pesquisa, lógica, etc. será forjada e estará em apenas um projeto. Isso para facilitar, frisando que não é uma boa prática.

Inicie um novo projeto do tipo Windows Forms Application com o nome ReportViewer2010Imagem. Como figura abaixo:

Figura 1

Agora na mesma pasta do projeto, vou incluir 2 imagens rostoA.jpg e rostoB.png.
Veja como fica na Solution Explorer:

Figura 2

Altere nas propriedades das duas figuras (Copy to Output Directory) para copy if newer, como figura a baixo:

Figura 3

Vou criar a classe UserInfo na raiz da aplicação, que tem um id, nome e uma foto. Vide código abaixo:

using System;
using System.Collections.Generic;
using System.Linq;
using System.Text;

namespace ReportViewer2010Imagem
{
    public class ClientInfo
    {
        public int Id { get; set; }
        public string Name { get; set; }
        public byte[] Photo { get; set; }
    }
}

E a classe ClientBll, para criar o método que retornara 2 clientes, com id, nome e foto. Repare que utilizarei um esquema de pegar as imagens que foram adicionadas no projeto, e faço o cast para array de bytes. Isso com as 2 fotos que inseri no projeto, quando alterei a propriedade das fotos, ao compilar elas serão copiadas para o diretório do executável. Veja o código abaixo e repare nos usings necessários como System.IO, System.Drawing e System.Collections.Generic.

using System.Collections.Generic;
using System.Drawing;
using System.IO;

namespace ReportViewer2010Imagem
{
    public class ClientBll
    {
        public List<ClientInfo> GetAll()
        {
            List<ClientInfo> lst = new List<ClientInfo>();

            ClientInfo clientInfoA = new ClientInfo();
            clientInfoA.Id = 1;
            clientInfoA.Name = "Alessandra";
            clientInfoA.Photo = ImageToByteArray(Image.FromFile(Directory.GetCurrentDirectory() + @"\rostoA.jpg"));

            ClientInfo clientInfoB = new ClientInfo();
            clientInfoB.Id = 2;
            clientInfoB.Name = "Renata";
            clientInfoB.Photo = ImageToByteArray(Image.FromFile(Directory.GetCurrentDirectory() + @"\rostoB.png"));

            lst.Add(clientInfoA);
            lst.Add(clientInfoB);

            return lst;
        }

        public byte[] ImageToByteArray(System.Drawing.Image imageIn)
        {
            MemoryStream ms = new MemoryStream();
            imageIn.Save(ms, System.Drawing.Imaging.ImageFormat.Jpeg);
            return ms.ToArray();
        }
    }
}

Após isso vamos ao design do relatório, inclui o relatório com o nome Client.
Inclui no relatório o pageHeader e o page footer(basta você clicar no report e aparecerá um menu como figura abaixo).

Figura 4

No Header insira um textbox e escreva Clientes, e no footer insira um textBox e insira a seguinte expression: =Globals!PageNumber & ” de ” & Globals!TotalPages
O design esta assim até o momento:

Figura 5

Agora é necessário criarmos o reportDataSet.

Figura 6

Após clicar em New. Aparecerá o form como figura abaixo:

Figura 7

Escolhemos a opção Object e clicamos e Next. E no próximo form escolhemos ClientInfo e clicamos em Finish.

Figura 8

E no próximo form damos o nome para o dataset de dsClient. Veja figura abaixo:

Figura 9

Inclua a partir da Toolbox uma tabela, e inclua os headers e no body, coloque o Id e o nome como figura abaixo.

Figura 10

Após isso, a partir da toolbox arraste o componente Image e coloque na célula do corpo da tabela referente a foto. Então será apresentada a janela (vide figura abaixo) e então no image source alteramos para database, no field escolhemos a property foto e mime type como jpeg:

Figura 11

Pronto o design fica assim:

Figura 12

Ok. Agora no form1 basta inserirmos a partir da toolbox o componente reportViewer e escolher o cliente.rdlc que acabamos de criar. Instanciar nossa bll de ClientBll e chamar o método getAll associando ao bindingSource criado no form. O código fonte fica assim:

using System;
using System.Windows.Forms;

namespace ReportViewer2010Imagem
{
    public partial class Form1 : Form
    {
        ClientBll clientBll = new ClientBll();
        public Form1()
        {
            InitializeComponent();
        }

        private void Form1_Load(object sender, EventArgs e)
        {
            ClientInfoBindingSource.DataSource = clientBll.GetAll();
            this.reportViewer1.RefreshReport();
        }
    }
}

A Solution Explorer ficará assim:

Figura 13

Após compilar basta executar. E o resultado será:

Figura 14

Espero que este post ajude com a criação de relatórios no reportViewer. Quaisquer dúvidas que tenha ficado me escreva. Segue o link para download do projeto. ReportViewer2010Imagem
Siga-me @thiagosatoshi.
Ao final deixo uma frase, sayonara e até a próxima.

Se os fatos não se encaixam na teoria, modifique os fatos. – Albert Einstein

Posts relacionados:

1. Krypton Suite 4.1 Released
2. Criando e Manipulando imagens com C-Sharp – Parte 1
3. Criando Botões com Imagens
4. CShared #3 – [Asp.net] Problema de acentuação (Encoding)
5. Observer

Postado em C#, Dicas, Visual Studio | Marcado como .NET, C#, Imagem, rdlc, Relatorio, report, reportviewer, VisualStudio, VS2010, WinForm