CONSTRUYENDO UN PRESENTADOR DE IMÁGENES BÁSICO CON C#
Muchas de las veces cuando deseamos realizar una pequeña presentación de nuestras imágenes que tenemos en nuestra carpeta de “Mis Imágenes” usamos MS PowerPoint ó usamos la funcionalidad de Windows “Ver como una presentación”, en ambos casos tenemos un resultado final “Ver las imágenes como una presentación” la aplicación que se ha desarrollado es un pequeño explorador de imágenes (Figura 1) construido con C#, el cual nos permitirá realizar una exploración de las imágenes y posteriormente visualizarlas en toda la pantalla del computador (Figura 2).
Figura 1: Explorador y Presentador de imágenes
Figura 2: Vista de imagen en tamaño Full Screan
PASO 1
Comencemos analizando el código para obtener la ruta del directorio “Mis Imágenes” para lo cual examinaremos la clase Ficheros
public class Ficheros
{
public static string MisImagenes()
{
return Environment.GetFolderPath(Environment.SpecialFolder.MyPictures);
}
}
Usaremos
Environment.GetFolderPath() obtendremos una cadena del tipo string la cual contendrá la ruta del directorio “Mis Imágenes” para lo cual nos valemos del un enumerador como lo es Environment.SpecialFolder.MyPictures el cual sirve para especificar las constantes enumeradas que se utilizan para recuperar rutas de acceso a directorios en carpetas especiales de sistema (
Special Folder).
El motivo de construir esta pequeña clase se fundamenta por motivos de que de las diferentes versiones de sistemas operativos de Windows XP y Vista (Español, Ingles ) el nombre de la carpeta “Mis imágenes” cambia dependiendo del idioma Ej. C:/Documents and Settings/<usuario>/Mis Imágenes, C:/Documents and Settings/<usuario>/My Pictures ó C:/Users/<usuario>/My Pictures etc., lo cual nos evita quemar en código la ruta de dicha carpeta.
A continuación creamos un nuevo formulario (Form1) y luego procedemos a arrastras los siguientes controles de TOOLBOX: Colocamos dentro del formulario un ToolStrip y un MenuStrip seguido, arrastramos un SplitContainer el cual dividirá el formulario en dos areas de trabajo (Panel1 a la izquierda y Panel2 a la derecha). En el Panel1 arrastramos a su interior el control TreeView (treeView1), y en el Panel2 colocamos un ListView (listView1), a continuación colocamos un control ImageList (imageList2).
Figura 3: Controles que conforman la aplicación.
Presionamos F7 para examinar el código del formulario y definimos una variable privada FileInfo de tipo array la cual llamaremos fullNameImages (FileInfo[] fullNameImages; ), la cual nos servirá para acceder a información de los archivos cargados en la misma, a continuación revisaremos el código que usaremos para cargar el listView1 con las miniaturas de las imágenes.
¿Cómo funciona este método?
La idea del algoritmo consiste en:
1) Seleccionamos los ficheros de tipo “*.jpg” ayudándonos del path ó ruta que deseemos y cargamos dicho resultado en el arreglo de tipo fullNameImages (FileInfo[]) que definimos anteriormente.
2) Recorremos el arreglo fullNameImages con un foreach, y procedemos a añadir cada imagen a nuestro imageList2, luego procedemos a añadir los ítems a nuestro listView1 los cuales son nuestras imágenes del imageList2 para lo cual al momento de añadirlo usaremos un índice, un nombre para el Item que en nuestro caso es el nombre del fichero de imagen y el imagekey que en nuestro caso es la ruta del fichero.
3) Regresamos a la ventana de diseño y procedemos a hacemos click en el listView1 y en la ventana de propiedades nos ubicamos en Behavior y cambiamos la propiedad LargeImageList y seleccionamos imageList2.
4) Seleccionamos el imageList2 y lo configuramos de la siguiente manera:
a. Image Size: 100, 100
b. Image Bit Depth: depth24bit
Esto lo hacemos para poder visualizar las imágenes en un tamaño aceptable y de buena calidad.
///<summary>
/// Obtiene las imagenes tipo [JPG] del directorio deseado y las carga en [ListView]
///</summary>
///<param name="directorio"></param>
void CargarMiniaturas(string directorio)
{
try
{
if (listView1.Items.Count > 0) //Limpia el contenido de los controles
{
listView1.Clear();
imageList2.Images.Clear();
}
fullNameImages = new DirectoryInfo(directorio).GetFiles("*.jpg");
int c = 0;
foreach (FileInfo info in fullNameImages)
{ //ImageKey, Imágen
imageList2.Images.Add(info.FullName, (Image)(new Bitmap(info.FullName)));
//indice, Nombre Imagen, ImageKey
listView1.Items.Insert(c, info.Name, info.FullName);
c++;
}
}
catch
{
throw;
}
}
El código antes mencionado lo usaremos tanto al momento de cargar las imágenes al inicio y en el transcurso del uso de la aplicación. El código que seguidamente encontraremos se ejecutara al momento de iniciar la aplicación, a través del evento Load del formulario.
El funcionamiento es así:
1) Instanciamos un objeto de tipo DirectoryInfo al cual le enviaremos la ruta (path) de donde se encuentra la carpeta Mis Imágenes, esto con el fin de obtener todos los directorios que se encuentre dentro de dicha carpeta.
2) Haciendo uso de un foreach recorremos el arreglo de directorios producto de llamar al método GetDirectories el cual nos retorna un arreglo de tipo DirectoryInfo con la ruta de los directorios. A continuación añadimos un nuevo nodo al treeView1 con la ruta completa del subdirectorio.
Nota: Esta operación se realiza por única vez al momento de iniciar la aplicación.
3) Llamamos al método CargarMiniaturas para lo cual enviamos por defecto la ruta de la carpeta “Mis Imágenes” con el fin de mostrar por defecto las imágenes que se encuentran directamente bajo dicho directorio.
4) private void Form1_Load(object sender, EventArgs e)
5) {
6) try
7) {
8) DirectoryInfo objDI = new DirectoryInfo(Ficheros.MisImagenes());
9) treeView1.Nodes.Add("------");
10) treeView1.Nodes.Add(Ficheros.MisImagenes());
11)
12) TreeNode t = new TreeNode("Directorios");
13) foreach (DirectoryInfo carpetas in objDI.GetDirectories())
14) {
15) t.Nodes.Add(carpetas.FullName);
16) }
17) treeView1.Nodes.Add(t);
18) CargarMiniaturas(Ficheros.MisImagenes());
19)
20)
21) /* foreach (DirectoryInfo carpetas in objDI.GetDirectories())
22) {
23) treeView1.Nodes.Add(carpetas.FullName);
24) }
25) CargarMiniaturas(Ficheros.MisImagenes());
26) */
27) }
28) catch (Exception exx )
29) {
30) MessageBox.Show(exx.Message);
31) }
32) }
Hasta este momento lograremos visualizar algo parecido a lo que se muestra en la Figura 1
PASO 2
Creando el formulario que actuara como Full Screan para presentar las imágenes.
Procedemos a crear un nuevo formulario (Form2) y procedemos a modificar el constructor por defecto del formulario de la siguiente forma:
public Form2(FileInfo[] rutasFicheros, int tiempo )
{
InitializeComponent();
RutasFicheros = rutasFicheros;
crono.Interval = tiempo;
////////// CONFIGURACION DEL FORM /////////
this.ShowIcon = false;
this.ShowInTaskbar = false;
this.FormBorderStyle = FormBorderStyle.None;
this.Bounds = Screen.PrimaryScreen.Bounds;
this.BackgroundImageLayout = ImageLayout.Zoom;
this.BackColor = Color.Black;
Cursor.Hide();
///////////////////////////////////////////
}
//// Obtener la posicion actual del cursor al momento de cargarce el formulario
Point pos = Cursor.Position;
//// Propiedad para almacenar las rutas de los ficheros de imagen
private FileInfo[] RutasFicheros
{
get; set;
}
El motivo por el que el constructor recibe dos parámetros de tipo FileInfo[] y int, es debido que el primero se refiere a las rutas de las imágenes a proyectar y el tiempo que se tardar por cada imagen.
El código que se encuentra dentro de las líneas comentadas CONFIGURACION DEL FORM, son configuraciones que nos servirán para crear una pantalla que cubrirá toda el área visible de la pantalla principal las cuales definirán el BackColor del formulario a negro y ocultaran el cursor entre otras.
A continuación procedemos a arrastrar un control Timer (crono) desde el ToolBox a nuestro formulario (Form2) y procedemos a hacer doble click sobre dicho control (crono) el cual nos generara el evento Tick tal y como se muestra a continuación.
private void crono_Tick(object sender, EventArgs e)
{
try
{
MostrarImagenes();
}
catch (Exception EX)
{
MessageBox.Show(EX.Message, "Error", MessageBoxButtons.OK,
MessageBoxIcon.Error);
this.Close();
}
}
Este evento llamara al método MostrarImagenes, el cual ejecutara las siguientes instrucciones
int contador = 0;
void MostrarImagenes()
{
if (contador < RutasFicheros.Length)
{
// A la imagen se le añade una leyenda al pie y se hace un cast para mostrarla
this.BackgroundImage =
(Image)new Imagenes.CopyRight().AnadirCopyRight(
RutasFicheros[contador].FullName,
Properties.Resources.Leyenda
);
contador++;
}
else contador = 0;
}
Dado que RutasFicheros es del tipo FileInfo[] , podemos darnos cuenta que no es más que un simple arreglo. Por lo que usaremos un contador para ir recorriendo uno a uno las posiciones de RutasFicheros cada vez que sea llamado por el evento Tick del Timer (crono), y de donde obtendremos el Full Path del archivo que contiene la imagen que será anexada como imagen de fondo y a la que se le añadirá una pequeña leyenda para su presentación.
Al ejecutarse este formulario se cargara una pantalla que cubrirá toda la pantalla y que mostrara una a una las imágenes en formato de presentación.
Para poder cerrar la pantalla en ejecución (Form2) creamos los eventos: MouseDown y MouseMove con el nombre EventoRaton tal y como se muestra a continuación
private void EventoRaton(object sender, MouseEventArgs e)
{
if (pos.X != e.X || pos.Y != e.Y) this.Close();
if (e.Clicks > 0) this.Close();
}
Este evento se encargara de capturar algún movimiento ó click realizado por el ratón (Point pos = Cursor.Position;) y procederá a cerrar el formulario.
Todo el código antes descrito se ejecutara al iniciar el evento Load del formulario (Form2)
private void Form2_Load(object sender, EventArgs e)
{
crono.Enabled = true;
MostrarImagenes();
}
PASO 3
Añadiendo CopyRight ó Leyenda a una imágen
El proceso de añadir una leyenda a una imagen es muy sencillo y consiste en cargar la imagen desde el archivo en un Bitmap y luego definir tipo de fuente, tamaño a usar, definir la posición del texto dentro de la imagen y seguidamente a dibujar el texto en la imagen, luego liberamos los recursos usados y retornamos un Bitmap el cual contiene la imagen que se mostrara como Imagen de fondo en el form2.
using System;
using System.Data;
using System.Configuration;
using System.Drawing;
namespace Imagenes
{
///<summary>
/// Añade CopyRight o leyenda al pie de una imágen
///</summary>
public class CopyRight
{
public Bitmap AnadirCopyRight(string fichero, string leyenda)
{
try
{
Bitmap bmp = new Bitmap(fichero);
Graphics grafico = Graphics.FromImage(bmp);
//Se define el tipo de color de la fuente
SolidBrush colortexto = new SolidBrush(Color.Orange );
//Se define el tipo de fuente de la leyenda
Font tipofuente = new Font("Arial", 12,FontStyle.Bold);
SizeF tamanotexto = new SizeF();
tamanotexto = grafico.MeasureString(leyenda, tipofuente);
float x = ((float)bmp.Width - tamanotexto.Width - 3);
float y = ((float)bmp.Height - tamanotexto.Height - 3);
float w = ((float)x + tamanotexto.Width);
float h = ((float)y + tamanotexto.Height);
RectangleF area = new RectangleF(x, y, w, h);
grafico.FillRectangle(new SolidBrush(Color.Transparent ), area);
//Se imprime el texto en la imagen
grafico.DrawString(leyenda, tipofuente, colortexto, area);
//Se libera los recursos
colortexto.Dispose();
tipofuente.Dispose();
grafico.Dispose();
return bmp;
}
catch
{
throw;
}
}
}
}
Nota: Este código se lo puede usar por separado para añadir a un gran número de imágenes una leyenda como las que se puede observar cuando se copia una imagen de MS Encarta esto con el fin de mantener el derecho de autor de una imagen.
PASO 4
Añadiendo funcionalidades extra a la imagen
Hasta el momento tenemos construido un pequeño explorador de imágenes que nos permite visualizar las imágenes en modo presentación, pero podemos añadir una nueva funcionalidad como lo es abrir una imagen al seleccionarla, para lo cual se construye la siguiente clase.
namespace CORE
{
public static class LauncherApplication
{
///<summary>
/// Abre el archivo para ser mostrado
///</summary>
public static void LanzarAplicacion(string fullpath )
{
try
{
Process.Start(fullpath);
}
catch
{
throw;
}
}
}
}
Esta clase es muy sencilla, ya que delegara al SO la tarea de abrir el archivo de imagen seleccionada con el Software de imágenes usado por defecto para abrir el tipo de imágenes JPG. Esto se logra a través de usar la clase Process la cual implementa un método Start el cual recibe como parámetro el Full Path de nuestra imágen.
Seguido de construir la antes mencionada clase nos ubicamos en el Form1 y seleccionamos el control listView1 y creamos el evento ItemSelectionChanged al cual le añadiremos el siguiente código, el cual usaremos para extraer el FullPath de la imagen seleccionada ya que al momento de crear el ítem del ListView definimos un ImageKey. Dicho FullPath lo usaremos para enviarlo como parámetro a la clase LauncherApplication.
private void listView1_ItemSelectionChanged(object sender,
ListViewItemSelectionChangedEventArgs e)
{
try
{
if (e.Item.Selected)
CORE.LauncherApplication.LanzarAplicacion(e.Item.ImageKey);
}
catch (Exception ex)
{
MessageBox.Show(ex.Message);
}
}