Visor imagenes

Bienvenid@ lector/a, en esta nueva entrada  les mostrare el paso a paso de cómo hacer un visor de imagen muy sencillo el cual contara con cinco funcionalidades.

1.  Cargar una imagen y visualizarla.
2. Cambiar color de fondo.
3. Copiar imagen al porta papel.
4. Usar imagen como fondo de pantalla.
5. Y ajustar la imagen a todo el tamaño del visor.

Para empezar el proyecto del visor tenemos que tener en cuenta que no está hecho con la tecnología WPF, sino que Windows Form. En una próxima entrada se realizara la migración a WPF, con el objetivo de ver cuáles son las diferencias entre estas dos tecnologías y presentar las ventajas y desventajas de estas mismas.

Ahora se debe de realizar el diseño de la aplicación tal como se muestra a continuación, en donde utilizaremos el componente “TableLayoutPanel” para hacer la grilla. Utilizaremos dos “TableLayoutPanel” (1); el primero de estas contendrá el elemento “PictureBox” (2) donde se visualizara la imagen o imágenes cargadas, la segunda contendrá todo lo que es acciones mediante botones. Además  de las “TableLayoutPanel” (3) se utilizara el elemento “FlowLayoutPanel” (4) para que los botones se adapten de acuerdo al tamaño de la ventana.

Imagen 1: Diseño principal.

Imagen 2: Disposición Diseño.

Para conseguir que quede tal como se ve en el primer  “TableLayoutPanel” debes de apretar la flecha del lado superior derecho (5) y seleccionar “Editar filas y columnas”

Imagen 3: Editar TableLayoutPanel.

Y tendrás que agregar una columna con el porcentaje que desees en este caso coloque 50% ya que así viene por Default

Imagen 4: Tamaño del primer TableLayoutPanel.

Para el segundo “TableLayoutPanel” debes seguir los mismos pasos de seleccionar la flecha y seleccionar “Editar filas y columnas” sin embargo ahora si tiene que ir con una nueva disposición, hay que agregar dos Columnas 15% y 85% respectivamente, además de añadir una fila que sea del 100% respecto al tamaño de la aplicación tal como se muestra en la imagen.

Imagen 5: Editar TableLayoutPanel.

Imagen 6: Tamaño del segundo TableLayoutPanel y disposición de elementos.

A continuación se mostraran fragmentos de código con su breve descripción 

En primer lugar empezaremos declarando algunas variables globales, las cuales osaremos más adelante, ruta_archivo es donde se almacenara la ruta de la imagen que seleccionemos para mostrar. Mientras que dlg_archivo es un elemento para cargar o abrir cualquier tipo de fichero de nuestro sistema, en este caso abriremos imágenes. 

   
1: private String ruta_archivo = String.Empty; //path de la imagen

   2:  private OpenFileDialog dlg_archivo;     //abre archivo imagen

   3:  public Visor()

   4:  {

   5:    InitializeComponent();

   6:    this.dlg_archivo = new OpenFileDialog(); //se instancea el open dialog

   7:  }

El método btn_cargar_Click se enlaza con el botón al que llamamos cargar, y su principal función es abrir el elemento OpenFileDialog para cargar el archivo de imagen, sin embargo aquí aplicaremos un pequeños filtro para que sea más fácil visualizar que tipo de imagen estamos cargando.

Una vez que presiones el botón Cargar se desplegara un dialogo para seleccionar la imagen, cuando decida que imagen abrir y le des en el botón Abrir este almacenara la ruta de la imagen seleccionado en la variable ruta_archivo y enseguida cargara la imagen en el contenedor de la imagen que es un pictureBox.

   1:  private void btn_cargar_Click(object sender, EventArgs e)

   2:  {

   3:   //se le aplica un filtro para que solo pueda abrir imagenes con formato jpg, png o bmp

   4:   this.dlg_archivo.Filter = "Imagenes JPG (*.jpg)|*.jpg|Imagenes PNG (*.png)|*.png|Imagenes bmp (*.bmp)|*.bmp";

   5:   //cuando se abre y se selecciona una imagen

   6:   if (this.dlg_archivo.ShowDialog() == DialogResult.OK) {

   7:     this.ruta_archivo = this.dlg_archivo.FileName;  // se guarda la ruta de la imagen

   8:     this.contenedor_imagen.Load(ruta_archivo);      //se agrega imagen a picturebox

   9:   }

  10: }

El método btn_borrar_Click se enlaza con el botón borrar antes creado, este método tiene una única función, la cual es resetear todos los valores que tengan alguna relación con la imagen antes seleccionada ya sea eliminar el contenido del PictureBox que se utiliza para ver la imagen como eliminar la ruta de la imagen antes seleccionada.

   1:  private void btn_borrar_Click(object sender, EventArgs e)

   2:  {

   3:     this.contenedor_imagen.Image = null;//se elimina el contenido del picturebox

   4:     this.ruta_archivo = String.Empty;   //se resetea el path de la imagen

   5:  }

El método btn_copiar_Click se enlaza con el botón copiar, y su función es copiar la imagen como un objeto al porta papeles de Windows, esto lo realizamos con el fin de poder Pegar la imagen en otro sitio o implementarla en algún editor de imágenes de forma rápida.

   1:  private void btn_copiar_Click(object sender, EventArgs e)

   2:  {

   3:    Clipboard.SetDataObject(this.contenedor_imagen.Image);//se copia al portapapeles

   4:  }

El método btn_color_Click, es uno de esos métodos que casi nadie va a ocupar, pero igualmente lo agregamos como un elemento de “personalización”. Su única y principal función es cambiar el fondo del PictureBox que contiene la imagen, con el fin de rellenar en caso de que la imagen seleccionada sea demasiado pequeña y esta no sea muy vistosa, o si se carga alguna imagen PNG con transparencias.

   1: private void btn_color_Click(object sender, EventArgs e)

   2:  {

   3:     //cuando se habre el selector de color y se aprete ok o abrir

   4:     if (this.colorDialog1.ShowDialog() == DialogResult.OK)

   5:        this.contenedor_imagen.BackColor = this.colorDialog1.Color;//carga un color de fondo para el picturebox

   6:  }

El método btn_fondo_Click, se utiliza para mandar como fondo de pantalla la imagen que antes ha sido seleccionada, si no existe una imagen previa ya sea porque se borró o simplemente no se cargó nunca, envía un mensaje de advertencia con el mensaje de que no se cargó ninguna imagen. Cabe recalcar que este método dependerá de una clase que trabaja con los Dll del sistema que usted este utilizando.

   1:  private void btn_fondo_Click(object sender, EventArgs e)

   2:  {

   3:    //si existe un ruta de imagen

   4:    if (this.ruta_archivo != String.Empty)

   5:      Fondo_Class.SetDesktopWallpaper(this.ruta_archivo);//se setea la imagen como fondo de pantalla

   6:    else //de lo contrario

   7:      MessageBox.Show("Carge una imagen antes.");//muestra mensaje de advertencia

   8:  }

El método chk_ajuste_CheckedChanged, tiene como función el de adaptar la imagen cargada al tamaño del contenedor sin importar si la imagen seleccionada tiene un resolución mayor o menor de la del contenedor.

   1:  private void chk_ajuste_CheckedChanged(object sender, EventArgs e)

   2:  {

   3:     this.contenedor_imagen.SizeMode = this.chk_ajuste.Checked ? PictureBoxSizeMode.StretchImage : PictureBoxSizeMode.Normal;

   4:  }

Esta clase creada, sirve únicamente para dejar la imagen seleccionada como fondo de pantalla, sin embargo para que realice esta tarea que se ve simple se necesita primero manipular las Dll del sistema operativo, es por ello que se deben de implementar dos importaciones 1) using System.Runtime.InteropServices; que se proporciona servicios de invocación de plataforma para asi poder hacer llamado a las Dll y using System.ComponentModel;  que proporciona clases que se utilizan para implementar comportamiento de componentes en tiempo de diseño y en  tiempo de ejecución.

   1:  class Fondo_Class

   2:  {

   3:     private const uint SPI_SETDESKWALLPAPER = 20;

   4:     private const uint SPIF_UPDATEINIFILE = 0x01;

   5:     private const uint SPIF_SENDWINICHANGE = 0x02;

   6:     [DllImport("user32.dll", CharSet = CharSet.Unicode, SetLastError = true)]

   7:     [return: MarshalAs(UnmanagedType.Bool)]

   8:     private static extern bool SystemParametersInfo(uint uiAction, uint uiParam, string pvParam, uint fwinIni);

   9:   

  10:     public static void SetDesktopWallpaper(string path) {

  11:        if (!SystemParametersInfo(SPI_SETDESKWALLPAPER, 0, path, SPIF_UPDATEINIFILE | SPIF_SENDWINICHANGE)) {

  12:           throw new Win32Exception();

  13:        }

  14:     }

  15:  }

Resultados

Imagen 7: diseño del visor.

Imagen 8: Selección y carga de imagen.

Imagen 9: Imagen seleccionada.

Guía en vídeo

Visor Modificado

Para la descarga directa, dirigirse al siguiente LINK

Este sitio fue creado en primera instancia como un lugar donde ir acumulando información y/o apuntes que considere de utilidad para un futuro cercano, pero a medida que ha avanzado el tiempo este lugar se a vuelto un punto de encuentro para muchas personas que se están iniciando en el mundo de la programación, es por eso que si estás leyendo esto estas invitado a participar en de esta comunidad que día a día va creciendo. Si estás dispuesto a cooperar te sugiero que dejes tus inquietudes, dudas o aportes en la caja de comentario de cualquiera de las entradas del blog o haciendo directamente desde el formulario de contacto que puede encontrar en la página de inicio y responderé a la brevedad.