Tutorial: Crear una aplicación de Windows Forms para ver imágenes (.NET Framework)

En esta serie de tres tutoriales, creará una aplicación de Windows Forms que carga una imagen y la muestra. El entorno de diseño integrado (IDE) de Visual Studio proporciona las herramientas que necesita para crear la aplicación.

En este primer tutorial, aprenderá a:

• Crear un proyecto de Visual Studio que use Windows Forms
• Agregar un elemento de diseño
• Ejecución de la aplicación

Para crear una aplicación de Windows Forms con .NET, siga el tutorial Creación de una aplicación de Windows Forms con .NET. Consulte la Guía de escritorio de en Windows Forms .NET para obtener más información.

Prerrequisitos

• Necesita Visual Studio para completar este tutorial. Visite la página de descargas de Visual Studio para obtener una versión gratuita.
• Carga de trabajo Desarrollo de escritorio de .NET. Para comprobar o instalar esta carga de trabajo en Visual Studio, seleccione Tools>Obtener herramientas y características. Para obtener más información, consulte Cambiar cargas de trabajo o componentes individuales.

Creación del proyecto de Windows Forms

Al crear un visor de imágenes, el primer paso es crear un proyecto de aplicación de Windows Forms.

1. Abra Visual Studio.

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

   

3. En la ventana Crear un proyecto, busque Windows Forms. A continuación, seleccione Desktop 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.

   

5. En la ventana Configurar tu nuevo proyecto, nombra tu proyecto PictureViewery luego selecciona Crear.

   

Visual Studio crea una solución para la aplicación. Una solución es un contenedor para 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.

Agregar un elemento de diseño

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

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

2. Seleccione cualquier parte de Form1.

3. La ventana Propiedades de ahora muestra las propiedades del formulario. La ventana Propiedades suele estar en la parte inferior derecha de Visual Studio. Esta sección controla varias propiedades, como el color 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 de cómo se ordene la lista, es posible que tenga que desplazarse hacia abajo. Escriba el valor Visor de imágenesy elija Escriba.

   El formulario ahora tiene el texto Visor de Imágenes en su barra de títulos.

   Nota

   Puede mostrar las propiedades por categoría o alfabéticamente. Usa los botones de la ventana de Propiedades para cambiar de un lado a otro.

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

   

   Arrastre el controlador para cambiar el tamaño del formulario para que el formulario sea más ancho y un poco más alto. Si se fija en la ventana Propiedades, observará que la propiedad Size es diferente. También puede cambiar 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.

   

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

   

   Nota

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

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

   

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.

    

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

    TableLayoutPanel ahora rellena todo el formulario. Si cambia el tamaño del formulario de nuevo, TableLayoutPanel permanece acoplado y cambia de tamaño para ajustarse.

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

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

    

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

13. Seleccione columna1 y establezca su tamaño en un 15 %. Asegúrese de que la opción Porcentaje está seleccionada.

14. Seleccione Column2 y establézcalo en un 85 %.

    

15. En Mostrar, en la parte superior del cuadro de diálogo Estilos de columna y fila, seleccione Filas. Establezca Fila1 al 90 % y Fila2 al 10 %. Seleccione Aceptar para guardar los cambios.

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

    

Tu diseño está completo.

Nota

Antes de ejecutar la aplicación, guarde la aplicación eligiendo el botón Guardar todo barra de herramientas. O bien, para guardar la aplicación, elija Archivo>Guardar todo en la barra de menús o presione Ctrl+Mayús+S. Es un procedimiento recomendado para ahorrar temprano y a menudo.

Ejecución de 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 que muestra Picture Viewer en la barra de título.

Para ejecutar la aplicación, siga estos pasos.

1. Use uno de los métodos siguientes:

   • Seleccione 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.

   

   Examine la barra de herramientas del IDE de Visual Studio. Aparecen más botones en la barra de herramientas cuando se ejecuta una aplicación. Estos botones te permiten hacer cosas como detener e iniciar la aplicación, y ayudarte a rastrear los errores.

   

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ú, seleccione Depurar>Detener depuración.
   • En el teclado, presione Mayús+F5.
   • Seleccione X en la esquina superior de la ventana del Visor de imágenes .

   Cuando se ejecuta la aplicación desde el IDE de Visual Studio, se denomina depuración. Ejecute 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.

Paso siguiente

Pase al siguiente tutorial para aprender a agregar controles al programa Visor de imágenes.

Tutorial, parte 2: Agregar controles al visor de imágenes