Tutorial: Creación de una aplicación de visor de imágenes de Windows Forms en Visual Studio

  • Artículo

En esta serie de tres tutoriales, creará una aplicación de Windows Forms que carga una imagen y la muestra. El entorno de desarrollo integrado (IDE) de Visual Studio proporciona las herramientas necesarias para crear la aplicación. Para obtener más información, consulte Le damos la bienvenida al IDE de Visual Studio.

En este primer tutorial, obtendrá información sobre cómo hacer lo siguiente:

  • Creación de un proyecto de Visual Studio que utilice Windows Forms
  • Adición de un elemento de diseño
  • Ejecución de la aplicación

Prerrequisitos

Necesitará Visual Studio para completar este tutorial. Visite la página de descargas de Visual Studio para obtener una versión gratuita.

Creación del proyecto de Windows Forms

Al crear un visor de imagen, el primer paso consiste en crear un proyecto de aplicación de Windows Forms.

  1. Abra Visual Studio.

  2. En la ventana de inicio, seleccione Crear un proyecto.

    Screenshot shows the Create a new project option in the Visual Studio start window.

  3. En la ventana Crear un proyecto, busque Windows Forms. Después, seleccione Escritorio en la lista Tipo de proyecto.

  4. Seleccione la plantilla Aplicación de Windows Forms (.NET Framework) para C# o Visual Basic y, luego, Siguiente.

    Screenshot shows the Create a new project dialog box with Windows Forms entered and options for Windows Forms App.

    Nota:

    Si no ve la plantilla Aplicación de Windows Forms (.NET Framework), puede instalarla desde la ventana Crear un proyecto nuevo. En el mensaje ¿No encuentra lo que busca? , seleccione el vínculo Instalar más herramientas y características.

    Screenshot shows the Install more tools and features link from the Not finding what you're looking for message in the Create new project dialog box.

    Luego, en el Instalador de Visual Studio, seleccione Desarrollo de escritorio de .NET.

    Screenshot shows .NET Core workload in the Visual Studio Installer.

    Seleccione Modificar en el Instalador de Visual Studio. Es posible que se le pida que guarde su trabajo. Seguidamente, seleccione Continuar para instalar la carga de trabajo.

  5. En la ventana Configure su nuevo proyecto, asigne al proyecto el nombre PictureViewer y, después, seleccione Crear.

  1. Abra Visual Studio.

  2. En la ventana de inicio, seleccione Crear un proyecto.

    Screenshot shows the Create a new project option in the Visual Studio start window.

  3. En la ventana Crear un proyecto, busque Windows Forms. Después, seleccione Escritorio en la lista Tipo de proyecto.

  4. Seleccione la plantilla Aplicación de Windows Forms (.NET Framework) para C# o Visual Basic y, luego, Siguiente.

    Screenshot shows the Create a new project dialog box with Windows Forms entered and options for Windows Forms App.

    Nota:

    Si no ve la plantilla Aplicación de Windows Forms (.NET Framework), puede instalarla desde la ventana Crear un proyecto nuevo. En el mensaje ¿No encuentra lo que busca? , seleccione el vínculo Instalar más herramientas y características.

    Screenshot shows the Install more tools and features link from the Not finding what you're looking for message in the Create new project dialog box.

    Luego, en el Instalador de Visual Studio, seleccione Desarrollo de escritorio de .NET.

    Screenshot shows .NET Core workload in the Visual Studio Installer.

    Seleccione Modificar en el Instalador de Visual Studio. Es posible que se le pida que guarde su trabajo. Seguidamente, seleccione Continuar para instalar la carga de trabajo.

  5. En la ventana Configure su nuevo proyecto, asigne al proyecto el nombre PictureViewer y, después, seleccione Crear.

    Screenshot shows the Configure your new project dialog box.

Visual Studio crea una solución para la aplicación. Una solución es un contenedor de todos los proyectos y archivos necesarios para la aplicación.

En este momento, Visual Studio muestra un formulario vacío en el Diseñador de Windows Forms.

Adición de un elemento de diseño

La aplicación de visualización de imágenes contiene un cuadro de imagen, una casilla y cuatro botones, que agregará en el siguiente tutorial. El elemento de diseño controla su ubicación en el formulario. En esta sección se muestra cómo cambiar el título del formulario, ajustar su tamaño y agregar un elemento de diseño.

  1. En el proyecto, seleccione el Diseñador de Windows Forms. La pestaña se denomina Form1.cs [Design] para C# o Form1.vb [Design] para Visual Basic.

  2. Seleccione cualquier parte de Form1.

  3. En la ventana Propiedades, ahora se muestran las propiedades del formulario. La ventana Propiedades suele estar en la parte inferior derecha de Visual Studio. En esta sección se controlan varias propiedades, como los colores de primer plano y de fondo, el texto del título que aparece en la parte superior del formulario y el tamaño del formulario.

    Si no ve la ventana Propiedades, seleccione Ver>Ventana Propiedades.

  4. Busque la propiedad Text en la ventana Propiedades. En función del orden de la lista, puede que deba desplazarse hacia abajo. Escriba el valor Visor de imágenes y elija Entrar.

    El formulario ahora tiene escrito el texto Visor de imágenes en la barra de título.

    Nota

    Puede mostrar las propiedades por categoría o por orden alfabético. Use los botones de la ventana Propiedades para alternar entre una opción y la otra.

  5. Vuelva a seleccionar el formulario. Seleccione el controlador de arrastre situado en la parte inferior derecha del formulario. El controlador es un pequeño cuadrado blanco situado en la esquina inferior derecha del formulario.

    Screenshot shows the Forms window with the Drag handle in the lower right.

    Arrastre el controlador para cambiar el tamaño del formulario de modo que resulte más ancho y un poco más alto. Si se fija en la ventana Propiedades, observará que la propiedad Size ha cambiado. También puede modificar el tamaño del formulario cambiando la propiedad Size.

  6. En el lado izquierdo del IDE de Visual Studio, seleccione la pestaña Cuadro de herramientas. Si no la ve, seleccione Ver>Cuadro de herramientas en la barra de menús o presione Ctrl+Alt+X.

  7. Seleccione el símbolo del triángulo pequeño situado junto a Contenedores para abrir el grupo.

    Screenshot shows the Containers group in the Toolbox tab.

  8. Haga doble clic en TableLayoutPanel del cuadro de herramientas. También puede arrastrar un control del cuadro de herramientas al formulario. El control TableLayoutPanel aparece en el formulario.

    Screenshot show the form with the TableLayoutPanel control added.

    Nota:

    Si, después de agregar el control TableLayoutPanel, aparece una ventana dentro del formulario con el título Tareas de TableLayoutPanel, haga clic en cualquier parte del formulario para cerrarla.

  9. Seleccione el control TableLayoutPanel. Para comprobar qué control está seleccionado, consulte la ventana Propiedades.

    Screenshot shows the Properties window showing the TableLayoutPanel control.

  10. Con el control TableLayoutPanel seleccionado, busque la propiedad Dock, que tiene el valor Ninguno. Seleccione la flecha desplegable y, después, Rellenar, que es el botón grande situado en el centro del menú desplegable.

    Screenshot shows the Properties window with Fill selected.

    El acoplamiento hace referencia a cómo se adjunta una ventana a otra ventana o área.

    El control TableLayoutPanel ahora rellena todo el formulario. Si vuelve a cambiar el tamaño del formulario, TableLayoutPanel permanecerá acoplado y cambiará de tamaño para ajustarse al formulario.

  11. En el formulario, seleccione el control TableLayoutPanel. En la esquina superior derecha, hay un pequeño botón en forma de triángulo negro.

    Seleccione el triángulo para mostrar la lista de tareas del control.

    Screenshot shows TableLayoutPanel tasks.

  12. Seleccione Editar filas y columnas para abrir el cuadro de diálogo Estilos de columna y fila.

  13. Seleccione Column1 y establezca su tamaño en el 15 por ciento. Asegúrese de que el botón Porcentaje esté seleccionado.

  14. Seleccione Column2 y establézcala en el 85 por ciento.

    Screenshot shows TableLayoutPanel column and row styles.

  15. En Mostrar, en la parte superior del cuadro de diálogo Estilos de columna y fila, seleccione Filas. Establezca Row1 en el 90 por ciento y Row2 en el 10 por ciento. Seleccione Aceptar para guardar los cambios.

    El control TableLayoutPanel ahora tiene una fila superior grande, una fila inferior pequeña, una columna izquierda pequeña y una columna derecha grande.

    Screenshot shows the form with resized TableLayoutPanel.

El diseño se ha completado.

Nota

Antes de ejecutar la aplicación, seleccione el botón Guardar todo de la barra de herramientas para guardarla. O bien, para guardar la aplicación, elija Archivo>Guardar todo en la barra de menús o presione Ctrl+Mayús+S. El procedimiento recomendado consiste en guardar desde el principio y a menudo.

Ejecutar la aplicación

Al crear un proyecto de aplicación de Windows Forms, se compila un programa que se ejecuta. En este punto, la aplicación de visor de imágenes no hace gran cosa. Por ahora, muestra una ventana vacía en la que se ve Visor de imágenes en la barra de título.

Para ejecutar la aplicación, siga estos pasos.

  1. Utilice uno de los métodos siguientes:

    • Presione la tecla F5.
    • En la barra de menús, seleccione Depurar>Iniciar depuración.
    • En la barra de herramientas, seleccione el botón Iniciar.

    Visual Studio ejecuta la aplicación. Aparece una ventana con el título Visor de imágenes.

    Screenshot shows the Windows Forms app running.

    Fíjese en la barra de herramientas del IDE de Visual Studio. Al ejecutar una aplicación, aparecen más botones en la barra de herramientas. Estos botones permiten hacer cosas como detener e iniciar la aplicación, y ayudan a realizar el seguimiento de los errores.

    Screenshot shows the Debugging toolbar where you can stop the app.

  2. Use uno de los métodos siguientes para detener la aplicación:

    • Haga clic en el botón Detener depuración de la barra de herramientas.
    • En la barra de menús, seleccione Depurar>Detener depuración.
    • En el teclado, presione Mayús+F5.
    • Seleccione X en la esquina superior de la ventana Visor de imágenes.

    Cuando se ejecuta la aplicación desde el IDE de Visual Studio, se denomina depuración. Ejecuta la aplicación para buscar y corregir errores. Siga el mismo procedimiento para ejecutar y depurar otros programas. Para más información sobre la depuración, vea Primer vistazo al depurador.

Pasos siguientes

Pase al siguiente tutorial para obtener información sobre cómo agregar controles al visor de imágenes.

Parte 2 del tutorial: Adición de controles al visor de imágenes