CÓMO CREAR UN VISOR DE IMÁGENES PARA WINDOWS 10 CON C#
En este tutorial podrán aprender como realizar un sencillo y ligero visor de imágenes para Windows 10.
Tipo de Proyecto: Windows Forms / C# / .Net Framework 4.7.2
Las principales características de esta aplicación son:
- Permite mostrar las imágenes en la aplicación abriendo directamente una imagen con formato soportado (JPG, BMP o PNG) desde el explorador de archivos de Windows.
- Abrir una imagen desde la aplicación.
- Al abrir una imagen, la aplicación detecta si en la carpeta donde esta almacenada la imagen que estemos visualizando existen más archivos con formato compatible, y si es así, crea internamente una lista de estos para poder recorrer estas imágenes con los botones Anterior y Siguiente.
- Cambiar el tamaño de la imagen entre tamaño original y tamaño ajustado a la ventana.
Todos los íconos usados para esta aplicación fueron descargados desde: https://www.iconsdb.com/
Interfaz Gráfica
La interfaz gráfica es muy sencilla. En la siguiente imagen se muestran los controles, su tipo y nombre usado en el código:
Debes configurar correctamente la propiedad Anchor de cada control para que mantengan su posición al redimensionar el formulario.
Clase PicVi
En esta clase (de tipo estática y pública) se encuentran los métodos globales de la aplicación y que además no están rigurosamente vinculados a los controles del formulario principal:
En esta porción de código tenemos inicialmente todas las directivas que requiere la aplicación ("los using"). La clase se crea como pública y estática. Luego, creamos unas auto-propiedades y una lista.
ObtenerRutaImagen: Creamos un método público y estático que ejecute un cuadro de dialogo abrir con el fin de obtener la ruta de la imagen a visualizar. En este mismo método aprovechamos y obtenemos la ruta de la carpeta donde se encuentra la imagen, esto será útil más adelante:
ObtenerTodasLasImagenes: Este método permite crear una lista con todas las imágenes (si las hay) que existan en la misma carpeta donde se encuentra la imagen que estemos visualizando. Debido a que la carpeta que contiene dicha imagen puede estar acompañada de otros tipos de archivo diferentes, lo que hacemos es usar el método Where de la lista y con una función lamda y un método EndWith filtramos los archivos para obtener una lista de rutas que correspondan únicamente a imágenes:
Código del Formulario
En el formulario tendremos los siguientes métodos y códigos:
Inicialmente las directivas de las clases que requiere la aplicación, luego unas variables de ámbito global al formulario:
Evento Clic del botón btABRIR: Este evento hace un llamado al método ObtenerRutaImagen de la clase PicVi, luego muestra la imagen seleccionada en el control PictureBox (pVIEWER). Después, asigna a la variable ImagenAMostrar la ruta de la imagen abierta y muestra la ruta de la imagen en la barra de título de la aplicación. Después de estas acciones, se llama al método ObtenerTodasLasImagenes de la clase PicVi para crear la lista de las demás imágenes (si las hay) que se encuentran en la misma carpeta que la imagen visualizada. Por último, asignamos a la variable IndiceActual el valor que dentro de la lista creada le corresponde a la imagen visualizada.
Voy a explicar esto del índice un poco mejor. Cuando llamamos al método ObtenerTodasLasImagenes se crea una lista con todas las imágenes (si las hay) de la carpeta en donde se encuentra la imagen que abrimos, y como es lógico, este listado también incluye a la imagen que estamos visualizando. Ahora, para poder movernos a "la siguiente" o "la anterior" imagen primero debemos saber en que puesto de la lista se encuentra la imagen que abrimos. El puesto (es decir, su índice dentro de la lista) lo obtenemos con el método IndexOf al cual le pasamos como argumento la imagen que estamos visualizando.
Ejemplo:
Supongamos una carpeta en C llamada Fotos que contiene las siguientes imágenes:
C:\Fotos\Foto01.jpg
C:\Fotos\Foto02.jpg
C:\Fotos\Foto03.jpg
Ahora, supongamos que hemos abierto la imagen Foto03.jpg. La lista tendrá los siguientes elementos:
[0]="C:\Fotos\Foto01.jpg", [1]="C:\Fotos\Foto02.jpg", [2]="C:\Fotos\Foto03.jpg"
IndexOf buscará "C:\Fotos\Foto03.jpg" en la lista y asignará a la variable IndiceActual el valor 2 ya que este es su índice.
Evento del botón btAJUSTAR: Este método es muy sencillo, usamos una variable booleana para verificar el estado de la imagen. Si esta es verdadera mostramos la imagen en su tamaño original usando el valor CenterImage de la propiedad SizeMode del PictureBox, si su valor es falso, entonces hacemos que la imagen se adapte al tamaño de la ventana usando el valor Zoom de la propiedad SizeMode del PictureBox.
Eventos Clic de los botones btANTERIOR y btSIGUIENTE: Las instrucciones de estos dos botones son prácticamente iguales, lo que las diferencia es como cambiamos el valor de IndiceActual, si queremos ir a la "siguiente" imagen, aumentamos su valor, y, si queremos ir a la "anterior" disminuimos su valor. Pero antes de esto, cada evento primero asigna a la variable ImagenAMostar la ruta de la "siguiente" o "anterior" imagen, luego carga la imagen en el PictureBox y se actualiza el valor de IndiceActual. También se cambia el texto de la barra de título de la ventana:
Evento Load del Formulario: Este evento es el encargado de mostrar la imagen y asignar los respectivos valores cuando la aplicación se ejecuta al abrir una imagen desde el explorador de archivos de Windows.
Clase Program
Por ultimo, solo falta modificar la clase Program (el punto de entrada de la aplicación) para que podamos ver imágenes abriéndolas desde el explorador de archivos de Windows:
Para esto, agregamos al método Main un parámetro que nos permitirá obtener la ruta de la imagen desde la cual se ha ejecutado nuestra aplicación. Después con un condicional verificamos si hemos obtenido información y la asignamos a la propiedad RutaImagen de la clase PicVi. Esta verificación es necesaria ya que si abrimos la aplicación desde su ícono o acceso directo, por este método no se obtendrá nada:
Recuerda: Para poder abrir nuestra aplicación desde una imagen en el explorador de archivos de Windows, es necesario que primero hayamos asociado los tipos de archivo JPG, BMP y PNG con nuestra aplicación.
Si quieres apoyarme económicamente para que siga creando contenido y podamos seguir aprendiendo juntos, en Ko-Fi puedes hacerlo.
¡Sí, quiero apoyarte!
Deja un comentario: