ReportViewer y Rdlc, ejemplo Factura- Eviar Imagen

El envió de imágenes a un reporte Local o remoto siempre es muy necesario, en muchas ocasiones se requieren para hacer un reporte personalizado utilizando el logo de la empresa, firma digital, etc. o simplemente para embellecer nuestros reportes “recordando que una imagen vale mal que mil palabras”

En este articulo aprovecharemos un proyecto anterior que ya tenemos creado y creo que la mayoría de ustedes ya analizo  y puso en practica los conceptos ahí mencionados para mostrar como enviar una imagen a un Local Report, si aun no tiene el proyecto anterior o tiene dudas sobre como crear un reporte local por favor antes de continuar sírvase a revisar el articulo abajo mencionado:

ReportViewer y Rdlc, ejemplo Factura (Base de datos)

Extenderemos el proyecto insertando un objeto Imagen al Report1.rdlc y enviándole un arreglo de Bytes desde el formulario principal dicho arreglo contendrá los bytes de archivo tipo *.png

Antes de comenzar a leer este articulo recuerde que: “El objetivo no es otro mas que el de orientar a los Parvulos .Net sobre como Utilizar el control Imagen de un Local Report, todo lo escrito en este articulo no es ensayado y no es revisado por nadie mas, por lo cual podría contener errores gramaticales y sintácticos, el articulo y sus conceptos no pretenden ser la verdad absoluta del tema, siéntase en confianza de dejar sus comentarios y opiniones en la sección de comentarios al final del mismo y si lo considera prudente envíeme un correo electrónico por medio del formulario de contacto y por ultimo si el articulo le es de utilidad por favor considere dejar un comentario de agradecimiento.”

Requisitos: Visual Studio 2012, Framework 4.0

1. Para empezar, descargue el proyecto ofrecido en el articulo anterior, ábralo utilizando Vs2012, espere a que termine la conversión del código.

2. Abra el formulario principal llamado Form1


3. Cree el siguiente diseño utilizando un PictureBox y un Botón (recuerde que el objetivo del articulo es mostrar como se envía un objeto imagen a un Local Report así que ignore mi escaso sentido del diseño), nombre a los controles como pctboxLogo y btnSeleccionar respectivamente.


4. En las propiedades del objeto PictureBox, seleccione StretchImage para que la imagen que seleccione se autoajuste al tamaño de nuestro control.


5. Haga doble clic sobre el botón que acabamos de crear a fin de generar la estructura de código del evento Click, dentro coloque las siguientes líneas de código:

private void btnSeleccionar_Click(object sender, EventArgs e)
{
    //
    //Utilizaremos el la clase OpenFileDialog para seleccionar una imagen
    OpenFileDialog fileDialog = new OpenFileDialog();
    //
    //Definimos los filtros necesarios para evitar ver archivos que no corresponden a archivo de imagen
    fileDialog.Filter = "Archivo JPG (*.jpg)|*.jpg| Archivo PNG (*.png)|*.png| Archivo BMP (*.bmp)|*bmp";

    if (fileDialog.ShowDialog() == DialogResult.OK)
    {
        //
        //Cargamos nuestro control PictureBox con el archivo de imagen seleccionado
        pctboxLogo.Image = Image.FromFile(fileDialog.FileName);
    }

Probemos estas líneas de código:


Puesto que pudimos cargar una imagen a nuestro PictureBox el código anterior funciona. Continuemos…

Para poder enviar nuestro arreglo de Bytes al Local Report necesitamos crear una nueva propiedad que será la encargada de transportar los Bytes, como el Logo forma parte del Header de la factura, usaremos la clase EFactura, para esto.

6. Desde el “Explorador de Soluciones” haga doble clic sobre la clase EFactura y cree una nueva propiedad llamada Logo la cual será de tipo Bytes[] con acceso publico:

using System;using System.Collections.Generic;
namespace ReportViewerInvoiceReport_CSharp
{
    public class EFactura
    {
        public int Numero { get; set; }
        public string Nombre { get; set; }
        public string Rfc { get; set; }
        public string Direccion { get; set; }
        public decimal Subtotal { get; set; }
        public decimal Iva { get; set; }
        public decimal Total { get; set; }
        public DateTime FechaFacturacion { get; set; }
        //
        //Propiedad con acceso publico del tipo Byte, será el encargado de transportar los bytes de nuestro imagen
        public Byte[] Logo { get; set; }

        //Creamos una lista con una nueva Instancia de la clase Articulo
        //esta lista contendra el detalle de la factura
        public List<EArticulo> Detail = new List<EArticulo>();
    }
}

7. Ahora vayamos a configurar nuestro Local Report para recibir esta imagen como parte de los datos que debe de mostrar, para ello, desde el Explorador de Soluciones abra el reporte llamado Report1.rdlc haciendo doble clic sobre el:


Tendremos que modificar un poco nuestro  diseño a fin de darle espacio en el Header al control Imagen, que será el encargado de mostrar la imagen que fungirá como logo de la empresa.

8. Modifique el diseño arrastrando los controles hacia abajo hasta que considere prudente.


Antes de continuar con nuestro diseño tenemos que actualizar nuestro origen de datos a fin de tener acceso a la propiedad Logo de nuestra clase EFactura, pero antes de eso observe que la propiedad agregada pasos anteriores aun no esta visible y por lo tanto no esta disponible para ser utilizado en nuestro reporte:




y por mas que hagamos Clic derecho Actualizar no veremos jamás esta propiedad hasta que no hagamos una nueva compilación de nuestro proyecto, así que:

10. Diríjase a la barra de Menús –> Compilar –> Compilar Solución


11. Observe como después de la compilación en el cuadro de Origen de Datos podemos visualizar una nueva propiedad llamada Logo:


12. Diríjase al cuadro “Datos del informe”- > clic derecho sobre el origen “Encabezado” –> Actualizar y observe que nuestra propiedad se hace presente en este origen de datos.


Ahora que tenemos nuestra nueva propiedad como parte del origen de datos de nuestro informe podemos utilizarlo para asignárselo al objeto Imagen.

13. Desde el cuadro de herramientas ubique el control Imagen y arrástrelo al Header de nuestro local report.


14. Automáticamente veremos el cuadro de dialogo “Propiedades de la imagen”, ubique la opción “Seleccionar el origen de la imagen” y seleccione “Base de datos”, ubique la opción “Usar este campo:” y seleccione “=First(Fields!Logo.Value, "Encabezado")”, ubique la opción “Usar este tipo MIME:” y seleccione “image/png” (esta ultima opción lo dejo a su consideración no necesariamente tiene que ser este tipo de imagen)


15. Haga clic en “Aceptar” y observe como nuestro nuevo control fue agregado al Header de nuestro Local Report, juegue un poco con  el tamaño.


Para continuar vayamos a nuestro Form1 a terminar de configurar el envió del arreglo de bytes

16. En la parte superior de nuestra estructura de código, cree el siguiente método que nos ayudara a la transformación de nuestra imagen en un arreglo de bytes.

private byte[] GetBytes(Image imageIn)
{
    //
    //Usamos la clase MemoryStream para contener los bytes que compone la imagen
    MemoryStream ms = new MemoryStream();
    imageIn.Save(ms, ImageFormat.Png);
    //
    //Retornamos el arreglo de bytes
    return ms.ToArray();
}

17. Ubique el método InvoiceGenerate() y agregue las siguiente líneas de código:

//
// Usamos la Función GetBytes() para convertir la imagen cargada al PicureBox en un arreglo de Bytes para establecérselo a nuestra propiedad Logo_factura.Logo = GetBytes(pctboxLogo.Image);

Después de haber realizado todo lo anterior solo nos resta probar nuestra aplicación.

Ejecute la aplicación presionado la tecla “F5” o desde el menú presione el botón “Iniciar”


En el campo “Numero” ingrese cualquier valor del 1 al 5 y presione “Enter”


Haga Clic sobre el botón “…” para seleccionar una imagen (yo escogeré una imagen del tipo png)


Observe como nuestro PictureBox muestra la imagen seleccionada:


Presione el botón “Imprimir” y observe como nuestra imagen es mostrada en nuestro Local Report



Repita esta operación con tantas imágenes guste…

Por ultimo recuerde que el origen de la imagen podrías ser un arreglo de bytes almacenado en un campo de una base datos, el resultado siempre será el mismo ya que al Local Report no le interesa ni necesita saber el origen de la imagen siempre y cuando esta venga como un arreglo de Bytes

Escribir este articulo me llevo mas de 3 horas, dejar un comentario de agradecimiento le tomara 5 minutos.

Saludos desde Monterrey, Nuevo León México!

Ejemplo C#
Ejemplo Vb.Net


Nota: Al momento de migrar la aplicación de Vs2010 a Vs2012 recibí este mensaje de advertencia “

Advertencia    1    El proyecto hace referencia a una versión anterior de SQL Server Compact que no tiene compatibilidad con el diseñador en la versión actual de Visual Studio. Para continuar sin compatibilidad con el diseñador, descargue SQL Server Compact 3.5 del centro de descarga de Microsoft (http://go.microsoft.com/fwlink/?LinkId=229598). Para actualizar los activos a SQL Server Compact 4.0 y habilitar la compatibilidad con el diseñador, abra el proyecto y use el cuadro de diálogo Agregar conexión para crear una conexión a la base de datos. ReportViewerInvoiceReport-CSharp”

No tuve la necesidad de realizar absolutamente nada para poder trabajar con el proyecto de ejemplo pero si usted lo desea podría actualizar la base de datos a la versión 4.0, el script para crear las estructuras de las tablas la podrá descargar en el link proporcionado en el proyecto anterior.