Mostrar imágenes: Utilizar el control PictureBoxl

  • Artículo

Actualización: noviembre 2007

En esta lección aprenderá a utilizar un control PictureBox para mostrar imágenes y a mostrar una imagen como imagen de fondo en un formulario.

Se dice que una imagen vale más que mil palabras y, de hecho, muchos programas las utilizan para transmitir información. Hay varias maneras de mostrar imágenes en Visual Basic: la más común es utilizando un control PictureBox.

Los controles PictureBox actúan como un contenedor para las imágenes; se elige la imagen que se va a mostrar estableciendo la propiedad Image. La propiedad Image se puede establecer en la ventana Propiedades o se puede escribir el código para decirle al programa cuál imagen se va mostrar.

Otras propiedades útiles para el control PictureBox son la propiedad AutoSize, que determina si PictureBox se expandirá para ajustar la imagen, y la propiedad SizeMode, que se puede utilizar para expandir, centrar o ampliar la imagen en el control PictureBox.

Antes de agregar una imagen a un control PictureBox, generalmente se agregará el archivo de imagen al proyecto como un recurso. Una vez que se agrega un recurso al proyecto, puede volver a utilizarlo tantas veces como quiera; puede, por ejemplo, mostrar la misma imagen en varias ubicaciones.

Inténtelo

Para agregar una imagen como un recurso

  1. En el menú Archivo, haga clic en Nuevo proyecto.

  2. En el cuadro de diálogo Nuevo proyecto, en el panel Plantillas, haga clic en Aplicación para Windows.

  3. En el cuadro Nombre, escriba Pictures y haga clic en Aceptar.

    Se abre un nuevo proyecto de formularios Windows Forms.

  4. En la ventana Explorador de soluciones, haga doble clic en el nodo My Project para abrir el Diseñador de proyectos.

  5. En el Diseñador de proyectos, haga clic en la ficha Recursos.

  6. Haga clic en Agregar recurso y, a continuación, seleccione Agregar archivo existente en la lista desplegable.

    Se abrirá el cuadro de diálogo Agregar archivo existente a los recursos. Si no ve ningún archivo de imagen, vaya a una carpeta que sí contiene imágenes.

  7. Seleccione un archivo de imagen (con una extensión de nombre de archivo .bmp, .gif o .jpg) y haga clic en Abrir. Para este ejemplo, es mejor elegir una imagen pequeña.

    La imagen se agregará al proyecto y aparecerá en la ventana Administrador de recursos.

  8. Repita los dos pasos anteriores para agregar una segunda imagen al proyecto.

  9. En el menú Archivo, haga clic en Cerrar. Si le preguntan si desea guardar los cambios, haga clic en Sí.

Para mostrar imágenes utilizando un control PictureBox

  1. En el Explorador de soluciones, seleccione Form1.vb y, a continuación, en el menú Ver, haga clic en Diseñador.

  2. En el Cuadro de herramientas, arrastre un control PictureBox hasta el formulario.

  3. En la ventana Propiedades, haga clic en el botón ... ubicado junto a la propiedad Image para abrir el cuadro de diálogo Seleccionar recurso.

  4. En la lista Entrada, seleccione una de las imágenes que agregó y haga clic en Aceptar.

  5. Seleccione la propiedad SizeMode y establézcala en AutoSize.

    Observe cómo el control PictureBox cambia automáticamente de tamaño para ajustar la imagen.

  6. En el formulario, haga doble clic en el control PictureBox para abrir el controlador de eventos PictureBox1_Click en el Editor de código.

  7. Agregue el código siguiente al controlador de eventos PictureBox1_Click.

    Nota:

    Deberá reemplazar "MyPictureName2" con el nombre real de la segunda imagen que agregó anteriormente.

    		 
    PictureBox1.Image = My.Resources.MyPictureName2

  8. Presione F5 para ejecutar el programa. Cuando aparece el formulario, haga clic en la imagen para que aparezca la segunda imagen.

Mostrar una imagen de fondo en un formulario

Además de mostrar una imagen en un control PictureBox, también puede mostrar una imagen como el fondo del formulario. La propiedad BackgroundImage de un formulario se utiliza para mostrar una imagen que aparecerá detrás de cualquier otro control en el formulario, casi igual que un papel tapiz en el escritorio de Windows.

De igual modo que Windows permite elegir si el papel tapiz está centrado, en mosaico o expandido para rellenar la pantalla, se puede utilizar la propiedad BackgroundImageLayout para hacer lo mismo en un formulario.

Sugerencia:

Muchos de los otros controles, como Panel, GroupBox e incluso el control Button también tienen una propiedad BackgroundImage. Pruébelos.

Inténtelo

Para mostrar una imagen de fondo en un formulario

  1. En el Explorador de soluciones, seleccione Form1.vb y, a continuación, en el menú Ver, haga clic en Diseñador.

  2. Seleccione el formulario haciendo clic en él fuera del control PictureBox.

  3. En la ventana Propiedades, haga clic en el botón ... ubicado junto a la propiedad BackgroundImage para abrir el cuadro de diálogo Seleccionar recurso.

  4. En la lista Entrada, seleccione una de las imágenes que agregó antes y haga clic en Aceptar.

    Observe que la imagen se muestra en el formulario detrás de PictureBox y se ordena en mosaico de manera predeterminada.

    Nota:

    Si la imagen en el control PictureBox es demasiado grande, es posible que no se pueda ver la imagen de fondo. En este caso, seleccione el control PictureBox y arrástrelo hacia la parte inferior del formulario para apartarlo.

  5. Seleccione la propiedad BackgroundImageLayout y establézcala en Stretch.

    Observe cómo la imagen se expande para rellenar todo el formulario.

  6. Haga doble clic en el formulario para abrir el Editor de código.

  7. Asegúrese de que Eventos de Form1 esté seleccionado en el cuadro desplegable del lado izquierdo y seleccione Hacer clic en el cuadro desplegable del lado derecho.

  8. Agregue el código siguiente al controlador de eventos Form1_Click

    If Me.BackgroundImageLayout = ImageLayout.Stretch Then
  Me.BackgroundImageLayout = ImageLayout.Center
Else
  Me.BackgroundImageLayout = ImageLayout.Stretch
End If

  9. Presione F5 para ejecutar el programa. Cuando aparece el formulario, haga clic en él para cambiar el diseño.

Pasos siguientes

En esta lección, aprendió a utilizar el control PictureBox para mostrar imágenes y también aprendió a utilizar la propiedad BackgroundImage de un formulario. En la siguiente lección aprenderá a crear menús para presentar opciones a los usuarios.

Siguiente lección: Proporcionar opciones al usuario: crear menús en tiempo de diseño

Vea también

Tareas

Cómo: Establecer el fondo de un control Panel de formularios Windows Forms

Referencia

Información general del control PictureBox (Formularios Windows Forms)