Tutorial 1: Crear un visor de imágenesTutorial 1: Create a picture viewer

En este tutorial, compilará un programa que carga una imagen de un archivo y la muestra en una ventana.In this tutorial, you build a program that loads a picture from a file and displays it in a window. Aprenderá a usar el Diseñador de Windows Forms para arrastrar controles como botones y cuadros de imagen en el formulario, establecer sus propiedades y usar los contenedores para cambiar el tamaño del formulario de manera fluida.You learn how to use the Windows Forms Designer to drag controls like buttons and picture boxes on your form, set their properties, and use containers to smoothly resize the form. También empezará a escribir código.You also get started writing code. Aprenderá a:You learn how to:

  • Cree un nuevo proyecto.Create a new project.

  • Probar (depurar) una aplicación.Test (debug) an application.

  • Agregar controles básicos, como casillas y botones, a un formulario.Add basic controls like check boxes and buttons to a form.

  • Colocar controles en un formulario mediante los diseños.Position controls on a form using layouts.

  • Agregar los cuadros de diálogo Abrir archivo y Color a un formulario.Add Open File and Color dialog boxes to a form.

  • Escribir código mediante IntelliSense y fragmentos de código.Write code using IntelliSense and code snippets.

  • Escribir métodos de control de eventos.Write event handler methods.

Cuando termine, el programa se parecerá al de la ilustración siguiente:When you finish, your program will look like the following picture:

Imagen que creará en este tutorial

Para descargar una versión completa del ejemplo, vea Complete Picture Viewer tutorial sample (Ejemplo completo del tutorial de visor de imágenes).To download a completed version of the sample, see Complete picture viewer tutorial sample.

vínculo al vídeoPara obtener una versión en vídeo de este tema, vea Tutorial: Crear un visor de imágenes en Visual Basic o Tutorial: Crear un visor de imágenes en C#.link to videoFor a video version of this topic, see How do I: Create a picture viewer in Visual Basic? or How do I: Create a picture viewer in C#?.

Nota

En estos vídeos se utilizó una versión anterior de Visual Studio, por lo que hay ligeras diferencias en algunos comandos de menú y otros elementos de la interfaz de usuario.These videos use an earlier version of Visual Studio, so there are slight differences in some menu commands and other user interface elements. Sin embargo, los conceptos y procedimientos funcionan de forma similar en la versión actual de Visual Studio.However, the concepts and procedures work similarly in the current version of Visual Studio. En este tutorial, se trata tanto Visual C# como Visual Basic, por lo que deberá centrarse en la información específica del lenguaje de programación que use.Visual C# and Visual Basic are both covered in this tutorial, so focus on information specific to the programming language that you're using.

Para ver el código de Visual Basic, pulse la pestaña VB que se encuentra en la parte superior de los bloques de código; para ver el código de Visual C#, pulse la pestaña C#. Si quiere obtener más información sobre Visual C++, vea Introducción y el Tutorial del lenguaje C++.To see code for Visual Basic, choose the VB tab at the top of code blocks, and to see code for Visual C#, choose the C# tab. If you're interested in learning about Visual C++, see Get started and C++ language tutorial.

Si le interesa aprender a escribir aplicaciones para UWP de Visual C# o Visual Basic, vea Crear aplicaciones para UWP.If you're interested in learning how to write Visual C# or Visual Basic UWP apps, see Build UWP apps.

TitleTitle DescripciónDescription
Paso 1: Crear un proyecto de aplicación de Windows FormsStep 1: Create a Windows Forms application project Empezar a crear un proyecto de aplicación de Windows Forms.Begin by creating a Windows Forms application project.
Paso 2: Ejecutar el programaStep 2: Run your program Ejecutar el programa de aplicación de Windows Forms que se creó en el paso anterior.Run the Windows Forms application program that you created in the previous step.
Paso 3: Establecer las propiedades del formularioStep 3: Set your form properties Cambiar el aspecto del formulario mediante la ventana Propiedades.Change the way your form looks using the Properties window.
Paso 4: Diseñar un formulario con un control TableLayoutPanelStep 4: Lay out your form with a TableLayoutPanel control Agregue un control TableLayoutPanel al formulario.Add a TableLayoutPanel control to your form.
Paso 5: Agregar controles al formularioStep 5: Add controls to your form Agregar controles, como un control PictureBox y un control CheckBox, al formulario.Add controls, such as a PictureBox control and a CheckBox control, to your form. Agregar botones al formulario.Add buttons to your form.
Paso 6: Asignar un nombre a los controles de botónStep 6: Name your button controls Cambiar el nombre de los botones por otros más significativos.Rename your buttons to something more meaningful.
Paso 7: Agregar componentes de diálogo al formularioStep 7: Add dialog components to your form Agregue un componente OpenFileDialog y un componente ColorDialog al formulario.Add an OpenFileDialog component and a ColorDialog component to your form.
Paso 8: Escribir código para el controlador de eventos del botón Mostrar una imagenStep 8: Write code for the show a picture button event handler Escribir código mediante la herramienta IntelliSense.Write code using the IntelliSense tool.
Paso 9: Revisar, comentar y probar el códigoStep 9: Review, comment, and test your code Revisar y probar el código.Review and test your code. Agregar comentarios según sea necesario.Add comments as needed.
Paso 10: Escribir código para botones adicionales y una casillaStep 10: Write code for additional buttons and a check box Escribir código para hacer que funcionen otros botones y una casilla mediante IntelliSense.Write code to make other buttons and a check box work using IntelliSense.
Paso 11: Ejecutar el programa y probar otras característicasStep 11: Run your program and try other features Ejecutar el programa y establecer el color de fondo.Run your program and set the background color. Probar con otras características, como cambiar colores, fuentes y bordes.Try other features, such as changing colors, fonts, and borders.