En esta oportunidad, me tomo el tiempo de continuar escribiendo información que tenga que ver con la manipulación de imágenes desde una aplicación de escritorio, utilizando Visual Studio, C# y SQL Server.
En el post anterior realizábamos un ejemplo que permitía almacenar imágenes en la base de datos, como un arreglo de bytes.
Ahora vamos a ver como obtener esos registros que contienen imágenes, para colocarlos en un simple Data Grid.
Tomando como base siempre el proyecto desarrollado en el post anterior, lo primero que hay que hacer es actualizar la clase EmpleadoBL, agregando el método que permita obtener todos los empleados almacenados en la base de datos.
Para este ejemplo, el método se llamará ObtenerEmpleados, y el código se verá más o menos así:
Después de realizar la respectiva actualización de la clase de Empleado en la capa de lógica de negocios, ahora nos vamos a agregar una nueva ventana en la interfaz WPF, para poder visualizar el resultado del método creado en el paso anterior.
La estructura del formulario, será muy sencilla. Solamente utilizaremos un par de objetos en el formulario (un Button y un DataGrid para ser más exactos). Al distribuir los objetos en el formulario, lucirá más o menos de esta forma:
Al terminar el diseño del formulario, vamos a realizar unas pequeñas modificaciones al Data Grid.
Primero, vamos a establecer la propiedad AutoGenerateColumns en False. Esto servirá para evitar que se generen columnas que no deseamos visualizar en el Data Grid. El código XAML deberá lucir de una forma similar a ésta:
Como siguiente paso, establecemos las columnas que necesitaremos. Esto lo lograremos por medio de la etiqueta <DataGrid.Columns>.
Si buscamos información acerca de la etiqueta, nos daremos cuenta que nos permite obtener la colección que contiene todas las columnas que se definen en el data grid. Puedes visitar este enlace para más información.
Al momento de definir las columnas tendremos que escoger entre las diferentes opciones disponibles: DataGridHyperlinkColumn, DataGridComboBoxColumn, DataGridTextColumn, DataGridCheckBoxColumn, DataGridTemplateColumn.
Para el caso de las primeras columnas bastará con utilizar una DataGridTextColumn, ya que lo único que necesitaremos será mostrar texto. Al terminar de definir las columnas con las propiedades Header, IsReadOnly, Width y el Binding que vamos a utilizar para mostrar texto, el XAML será:
Caso especial merece hablar acerca de la columna que se utilizará para mostrar la foto. Vamos a utilizar una DataGridTemplateColumn. Este tipo de columna nos permite especificar la plantilla del contenido a mostrar en la celda.
Iniciamos con la etiqueta de apertura de <DataGridTemplateColumn>, definiendo propiedades como el Header, IsReadOnly, y el Width, para dentro de ella poder utilizar la propiedad CellTemplate. Esto nos permite que la plantilla de la celda defina cómo el contenido se presenta en las celdas de la columna. Esta propiedad no puede quedar vacía, por lo que no debemos de asustarnos al ver que se nos genera un error cuando recién declaramos la variable <DataGridTemplateColumn.CellTemplate>. Dentro de la propiedad CellTemplate, utilizamos la propiedad <DataTemplate para crear la estructura visual de objetos que nos permitirán mostrar la imagen. Por lo que, junto con lo agregado hasta el momento, el código XAML debería de verse algo así:
Por último, dentro del DataTemplate agregamos un control Image en el cual también tendremos que definir algunas propiedades comunes: Source, Width, Height y el Stretch.
A la propiedad Source del control Image, solo le colocaremos un Binding, el cual permitirá ir a traer los datos del campo Foto de la base de datos.
Finalmente el código XAML del Data Grid será:
Configuramos en el App.xaml el formulario de arranque para que sea el de Obtener Empleados.
Al compilar la solución y comenzar con el Debug, los resultados serán los siguientes:
No hay comentarios :
Publicar un comentario