Imagens no Reportviewer 2010
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:
Agora na mesma pasta do projeto, vou incluir 2 imagens rostoA.jpg e rostoB.png.
Veja como fica na Solution Explorer:
Altere nas propriedades das duas figuras (Copy to Output Directory) para copy if newer, como figura a baixo:
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).
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:
Agora é necessário criarmos o reportDataSet.
Após clicar em New. Aparecerá o form como figura abaixo:
Escolhemos a opção Object e clicamos e Next. E no próximo form escolhemos ClientInfo e clicamos em Finish.
E no próximo form damos o nome para o dataset de dsClient. Veja figura abaixo:
Inclua a partir da Toolbox uma tabela, e inclua os headers e no body, coloque o Id e o nome como figura abaixo.
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:
Pronto o design fica assim:
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:
Após compilar basta executar. E o resultado será:
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
















Show de bola este Artigo, parabéns!
Abraço!
Aeww Suzuki!! mandou bem!!
Informação de qualidade, isso é fundamental. Para procurar informação não comece pelo google e sim pelo C# Brasil. Parabéns!