Mi colección

Visual Studio 2015
En este tutorial, compilará un programa que carga una imagen de un archivo y la muestra en una ventana. Aprenderá
a arrastrar controles como botones y cuadros de imagen en el formulario, establecer sus propiedades y utilizar los
contenedores para cambiar el tamaño del formulario de manera fluida. También empezará a escribir código.
Aprenderá a:
Crear un nuevo proyecto.
Probar (depurar) una aplicación.
Agregar controles básicos, como casillas y botones, a un formulario.
Colocar controles en un formulario mediante los diseños.
Agregar los cuadros de diálogo Abrir archivo y Color a un formulario.
Escribir código mediante IntelliSense y fragmentos de código.
Escribir métodos de control de eventos.
Cuando termine, el programa se parecerá al de la ilustración siguiente.
Imagen que creará en este tutorial
Para descargar una versión completa del ejemplo, vea el ejemplo completo del tutorial de visor de imágenes.
Para obtener una versión en vídeo de este tema, vea el Tutorial: Crear un visor de imágenes en Visual Basic o el
Tutorial 1: Crear un visor de imágenes en 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. Sin embargo, los conceptos y procedimientos
funcionan de forma similar en la versión actual de 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.
Para ver el código de Visual Basic, elija 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#, elija la pestaña C#. Si le interesa obtener más información sobre Visual
C++, vea Introducción a Visual C++ en Visual Studio 2013 y Tutorial del lenguaje C++.
Si desea obtener más información acerca de cómo escribir aplicaciones en Visual C# o Visual Basic para la Tienda
Windows, vea Crear la primera aplicación de la Tienda Windows con C# o Visual Basic. Para obtener información
sobre cómo crear aplicaciones JavaScript para la Tienda Windows, vea Crear la primera aplicación de la Tienda
Windows con JavaScript.
Título
Descripción
Paso 1: Crear un proyecto de aplicación de
Windows Forms
Empezar a crear un proyecto de aplicación de Windows Forms.
Paso 2: Ejecutar el programa
Ejecutar el programa de aplicación de Windows Forms que se
creó en el paso anterior.
Paso 3: Establecer las propiedades del
formulario
Cambiar el aspecto del formulario mediante la ventana
Propiedades.
Paso 4: Diseñar un formulario con un control
TableLayoutPanel
Agregar un control TableLayoutPanel al formulario.
Paso 5: Agregar controles al formulario
Agregar controles, como PictureBox y CheckBox, al
formulario. Agregar botones al formulario.
Paso 6: Asignar un nombre a los controles de
botón
Cambiar el nombre de los botones por otros más
significativos.
Paso 7: Agregar componentes de diálogo al
formulario
Agregar un componente OpenFileDialog y un componente
ColorDialog al formulario.
Paso 8: Escribir código para el controlador de
eventos del botón Mostrar una imagen
Escribir código mediante la herramienta IntelliSense.
Paso 9: Revisar, comentar y probar el código
Revisar y probar el código. Agregar comentarios según sea
necesario.
Paso 10: Escribir código para botones
adicionales y una casilla
Escribir código para hacer que funcionen otros botones y una
casilla mediante IntelliSense.
Paso 11: Ejecutar el programa y probar otras
características
Ejecutar el programa y establecer el color de fondo. Probar
con otras características, como cambiar colores, fuentes y
bordes.
© 2016 Microsoft
Visual Studio 2015
Cuando se crea un visor de imagen, el primer paso consiste en crear un proyecto de aplicación de Windows Forms.
Para obtener una versión en vídeo de este tema, vea el Tutorial 1: Crear un visor de imágenes en Visual Basic
(vídeo 1) o el Tutorial 1: Crear un visor de imágenes en C# (vídeo 1). 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. Sin embargo, los conceptos y procedimientos funcionan de forma similar en la versión actual de Visual
Studio.
Para crear un proyecto de Aplicación de Windows Forms
1. En la barra de menús, elija Archivo, Nuevo, Proyecto. El cuadro de diálogo debe tener un aspecto similar al
que se muestra a continuación.
Cuadro de diálogo Nuevo proyecto
2. Elija Visual C# o Visual Basic en la lista Plantillas instaladas.
3. En la lista de plantillas, elija el icono Aplicación de Windows Forms. Asigne un nombre al nuevo formulario
PictureViewer y, a continuación, elija el botón Aceptar.
Visual Studio crea una solución para el programa. Una solución actúa como un contenedor de todos los
proyectos y archivos necesarios para el programa. Estos términos se explicarán con más detalle en secciones
posteriores de este tutorial.
4. En la ilustración siguiente se muestra lo que debería aparecer ahora en la interfaz de Visual Studio.
Nota
El diseño de la ventana puede no ser exactamente igual que el de la ilustración. El diseño exacto de la
ventana depende de la versión de Visual Studio, el lenguaje de programación utilizado y otros factores. No
obstante, debe comprobar que aparezcan las tres ventanas.
Ventana del IDE
La interfaz contiene tres ventanas: una ventana principal, el Explorador de soluciones y la ventana
Propiedades.
Si falta alguna de estas ventanas, restaure el diseño de ventana predeterminado; para ello, en la barra de
menús, elija Ventana, Restablecer diseño de la ventana. También puede mostrar ventanas mediante
comandos de menú. En la barra de menús, elija Ver, Ventana Propiedades o Explorador de soluciones. Si
hay otras ventanas abiertas, ciérrelas eligiendo el botón Cerrar (x) de la esquina superior derecha.
5. En la ilustración se muestran las ventanas siguientes (en el sentido de las agujas del reloj desde la esquina
superior izquierda):
Ventana principal En esta ventana, realizará la mayor parte del trabajo, como ejecutar formularios y
editar código. En la ilustración, la ventana muestra un formulario en el Editor de formularios. En la
parte superior de la ventana, aparecerán las pestañas Página principal y Form1.cs [Diseño]. (En Visual
Basic, el nombre de la pestaña termina con .vb en lugar de .cs).
Ventana Explorador de soluciones En esta ventana, puede ver todos los elementos de la solución y
navegar por ellos. Al elegir un archivo, cambia el contenido de la ventana Propiedades. Si abre un
archivo de código (que finaliza en .cs para Visual C# y en .vb para Visual Basic), aparece el archivo de
código o un diseñador para él. Un diseñador es una superficie visual en la que se pueden agregar
controles, como botones y listas. En los formularios de Visual Studio, el diseñador se llama Diseñador
de Windows Forms.
Ventana Propiedades En esta ventana, puede cambiar las propiedades de los elementos elegidos en
las otras ventanas. Por ejemplo, si elige Form1, puede cambiar el título estableciendo la propiedad
Text y el color de fondo estableciendo la propiedad Backcolor.
Nota
En la línea superior del Explorador de soluciones se muestra Solución “PictureViewer” (1 proyecto), lo
que significa que Visual Studio ha creado una solución automáticamente. Una solución puede contener
varios proyectos, pero, por ahora, trabajará con soluciones que contengan un solo proyecto.
6. En la barra de menús, elija Archivo, Guardar todo.
Si lo desea, también puede elegir el botón Guardar todo de la barra de herramientas que se muestra en la
ilustración siguiente.
Botón de la barra de herramientas Guardar todo
Visual Studio rellena automáticamente el nombre de la carpeta y el nombre del proyecto, y después guarda el
proyecto en la carpeta de proyectos.
Para continuar o revisar
Para ir al siguiente paso del tutorial, vea Paso 2: Ejecutar el programa.
Para volver al tema de la información general, vea Tutorial 1: Crear un visor de imagen.
© 2016 Microsoft
Visual Studio 2015
Al crear una solución, en realidad compiló un programa que se ejecuta. Todavía no hace gran cosa; se limita a
mostrar una ventana vacía que muestra Form1 en la barra de título. Pero se ejecuta, como vamos a comprobar a
continuación.
Para obtener una versión en vídeo de este tema, vea el Tutorial 1: Crear un visor de imágenes en Visual Basic
(vídeo 1) o el Tutorial 1: Crear un visor de imágenes en C# (vídeo 1). 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. Sin embargo, los conceptos y procedimientos funcionan de forma similar en la versión actual de Visual
Studio.
Para ejecutar el programa
1. Utilice uno de los métodos siguientes para ejecutar el programa.
Elija la tecla F5.
En la barra de menús, elija Depurar, Iniciar depuración.
En la barra de herramientas, elija el botón Iniciar depuración, que es similar al siguiente.
Botón de la barra de herramientas Iniciar depuración
2. Visual Studio ejecuta el programa y aparece una ventana denominada Form1. En el siguiente diagrama se
muestra el programa que acaba de compilar. El programa se está ejecutando y pronto lo ampliaremos.
Programa de aplicación de Windows Forms en ejecución
3. Regrese al entorno de desarrollo integrado (IDE) de Visual Studio y examine la nueva barra de herramientas.
Al ejecutar un programa, aparecen botones adicionales en la barra de herramientas. Estos botones permiten
hacer cosas, como detener e iniciar el programa, y ayudan a hacer un seguimiento de los errores que pueda
haber. En este ejemplo, solo utilizaremos los botones para iniciar y detener el programa.
Barra de herramientas de depuración
4. Utilice uno de los métodos siguientes para detener el programa.
En la barra de herramientas, elija el botón Detener depuración.
En la barra de menús, seleccione Depurar, Detener depuración.
Elija el botón X de la esquina superior derecha de la ventana Form1.
Nota
Cuando se ejecuta un programa desde el IDE, se denomina depuración, ya que normalmente se hace para
buscar y corregir errores del programa. Aunque este programa es pequeño y en realidad no hace nada
todavía, es un programa real. Siga el mismo procedimiento para ejecutar y depurar otros programas. Para
obtener más información sobre la depuración, vea Conceptos básicos del depurador.
Para continuar o revisar
Para ir al siguiente paso del tutorial, vea Paso 3: Establecer las propiedades del formulario.
Para volver al paso anterior del tutorial, vea Paso 1: Crear un proyecto de aplicación de Windows Forms.
© 2016 Microsoft
Visual Studio 2015
A continuación, se utiliza la ventana Propiedades para cambiar la apariencia del formulario.
Para obtener una versión en vídeo de este tema, vea el Tutorial 1: Crear un visor de imágenes en Visual Basic
(vídeo 1) o el Tutorial 1: Crear un visor de imágenes en C# (vídeo 1). 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. Sin embargo, los conceptos y procedimientos funcionan de forma similar en la versión actual de Visual
Studio.
Para establecer las propiedades del formulario
1. Asegúrese de que está en el Diseñador de Windows Forms. En el entorno de desarrollo integrado (IDE) de
Visual Studio, elija la pestaña Form1.cs [Diseño] (o la pestaña Form1.vb [Diseño] en Visual Basic).
2. Elija cualquier parte del formulario Form1 para seleccionarlo. Examine la ventana Propiedades, que ahora
debería mostrar las propiedades del formulario. Los formularios tienen varias propiedades. Por ejemplo,
puede establecer el color del primer plano y del fondo, el texto del título que aparece en la parte superior del
formulario, el tamaño del formulario y otras propiedades.
Nota
Si la ventana Propiedades no aparece, detenga el programa eligiendo el botón cuadrado de la barra de
herramientas, Detener depuración, o simplemente cierre la ventana. Si se detiene el programa y aún no ve
la ventana Propiedades, en la barra de menús, elija Ver, Ventana Propiedades.
3. Una vez seleccionado el formulario, busque la propiedad Texto en la ventana Propiedades. En función del
orden de la lista, puede que deba desplazarse hacia abajo. Elija Texto, escriba Visor de imágenes y elija
ENTRAR. Ahora, el formulario debería tener el texto Visor de imágenes en la barra de título y la ventana
Propiedades debería parecerse a la siguiente.
Ventana Propiedades
Nota
Las propiedades se pueden ordenar en vistas por categorías o alfabética. Puede alternar entre estas dos
vistas utilizando los botones de la ventana Propiedades. En este tutorial, resulta más fácil encontrar las
propiedades en la vista alfabética.
4. Vuelva al Diseñador de Windows Forms. Elija el controlador de arrastre inferior derecho del formulario, que es
el cuadradito blanco que aparece en el vértice inferior derecho del formulario y tiene el siguiente aspecto.
Controlador de arrastre
Arrastre el controlador para cambiar el tamaño del formulario de modo que resulte más ancho y un poco más
alto.
5. Fíjese en la ventana Propiedades y observe que la propiedad Size ha cambiado. La propiedad Size cambia
cada vez que se cambia el tamaño del formulario. Pruebe a arrastrar el controlador del formulario para
cambiar su tamaño a unas medidas aproximadas (no es necesario que sean exactas) de 550, 350, que son las
que deberían funcionar bien para este proyecto. Si lo desea, también puede escribir valores directamente en
la propiedad Tamaño y elegir la tecla ENTRAR.
6. Ejecute el programa de nuevo. Recuerde que puede utilizar cualquiera de los métodos siguientes para
ejecutar el programa.
Elija la tecla F5.
En la barra de menús, elija Depurar, Iniciar depuración.
En la barra de herramientas, elija el botón Iniciar depuración, que es similar al siguiente.
Botón de la barra de herramientas Iniciar depuración
Exactamente igual que antes, el IDE compila y ejecuta el programa, y aparece una ventana.
7. Antes de ir al paso siguiente, detenga el programa, porque el IDE no le permitirá cambiarlo mientras está en
ejecución. Recuerde que puede utilizar cualquiera de los métodos siguientes para detener el programa.
En la barra de herramientas, elija el botón Detener depuración.
En la barra de menús, seleccione Depurar, Detener depuración.
Elija el botón X de la esquina superior derecha de la ventana Form1.
Para continuar o revisar
Para ir al siguiente paso del tutorial, vea Paso 4: Diseñar un formulario con un control TableLayoutPanel.
Para volver al paso anterior del tutorial, vea Paso 2: Ejecutar el programa.
© 2016 Microsoft
Visual Studio 2015
En este paso, agregará un control TableLayoutPanel al formulario. El control TableLayoutPanel ayuda a alinear
correctamente los controles del formulario que se agregarán posteriormente.
Para obtener una versión en vídeo de este tema, vea el Tutorial 1: Crear un visor de imágenes en Visual Basic
(vídeo 2) o el Tutorial 1: Crear un visor de imágenes en C# (vídeo 2). 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. Sin embargo, los conceptos y procedimientos funcionan de forma similar en la versión actual de Visual
Studio.
Para diseñar el formulario con un control TableLayoutPanel
1. En el lado izquierdo del IDE de Visual Studio, busque la pestaña Cuadro de herramientas. Elija la pestaña
Cuadro de herramientas y aparecerá el cuadro de herramientas. (O bien, en la barra de menús, elija Ver,
Cuadro de herramientas).
2. Elija el símbolo del triángulo pequeño que se encuentra junto al grupo Contenedores para abrirlo, tal y como
se muestra en la siguiente imagen.
Grupo Contenedores
3. Puede agregar controles como botones, casillas y etiquetas al formulario. Haga doble clic en el control
TableLayoutPanel del Cuadro de herramientas. (También puede arrastrar el control desde el Cuadro de
herramientas hasta el formulario). Al hacerlo, el IDE agrega un control TableLayoutPanel al formulario, como
se muestra en la siguiente imagen.
Control TableLayoutPanel
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.
Aprenderemos más cosas sobre esta ventana más adelante en el tutorial.
Observe que el Cuadro de herramientas se expande para abarcar el formulario cuando se elige su pestaña, y
se cierra cuando se hace clic fuera de él. Se trata de la característica Ocultar automáticamente del IDE. Puede
activarlo o desactivarlo en cualquiera de las ventanas eligiendo el marcador de la esquina superior derecha de
la ventana para hacer que se oculte automáticamente y que quede bloqueado en su lugar. El icono del pin
tiene este aspecto.
Icono de marcador
4. Elija TableLayoutPanel para asegurarse de que está seleccionado. Puede comprobar qué control está
seleccionado examinando la lista desplegable de la parte superior de la ventana Propiedades, como se
muestra en la siguiente imagen.
Ventana Propiedades en la que se muestra el control TableLayoutPanel
5. Elija el botón Alfabético en la barra de herramientas de la ventana Propiedades. Esto hace que la lista de
propiedades de la ventana Propiedades aparezca en orden alfabético, lo que facilitará la localización de
propiedades en este tutorial.
6. El selector de controles es una lista desplegable que figura en la parte superior de la ventana Propiedades. En
este ejemplo, muestra que un control denominado tableLayoutPanel1 está seleccionado. Puede seleccionar
los controles eligiendo un área en el Diseñador de Windows Forms o eligiéndolos en el selector de controles.
Ahora que TableLayoutPanel está seleccionado, busque la propiedad Dock y elija Dock, que debería estar
establecida en None. Observe que aparece una flecha de lista desplegable al lado del valor. Elija la flecha y, a
continuación, seleccione el botón Fill (el botón grande del centro), tal y como se muestra en la siguiente
imagen.
Ventana Propiedades con Fill seleccionado
El término acoplar en Visual Studio hace referencia a cuando una ventana está asociada a otra ventana o área
en el IDE. Por ejemplo, la ventana Propiedades puede estar desacoplada, es decir, estar desasociada y flotar
libremente en Visual Studio, o puede estar acoplada en el Explorador de soluciones.
7. Después de establecer la propiedad Dock de TableLayoutPanel en Fill, el panel rellena el formulario
completo. Si vuelve a cambiar el tamaño del formulario, TableLayoutPanel permanecerá acoplado y cambiará
de tamaño para ajustarse al formulario.
Nota
TableLayoutPanel funciona exactamente igual que una tabla de Microsoft Office Word: tiene filas y
columnas, y una celda individual puede abarcar varias filas y columnas. Cada celda puede contener un
control (como un botón, una casilla o una etiqueta). Este control TableLayoutPanel va a contener un
control PictureBox que abarcará completamente su fila superior, un control CheckBox en la celda inferior
izquierda, y cuatro controles Button en la celda inferior derecha.
8. Actualmente, TableLayoutPanel tiene dos filas del mismo tamaño y dos columnas del mismo tamaño.
Tenemos que cambiar su tamaño de modo que la fila superior y la columna derecha sean mucho mayores. En
el Diseñador de Windows Forms, seleccione TableLayoutPanel. En la esquina superior derecha, hay un
botoncito triangular de color negro, con el siguiente aspecto.
Botón triangular
Este botón indica que el control tiene tareas que le ayudan a establecer sus propiedades automáticamente.
9. Elija el triángulo para mostrar la lista de tareas del control, tal y como se muestra en la siguiente imagen.
Tareas de TableLayoutPanel
10. Elija la tarea Editar filas y columnas para abrir la ventana Estilos de columna y fila. Elija Column1 y
establezca su tamaño en el 15 por ciento; para ello, asegúrese de que el botón Porcentaje está seleccionado
y escriba 15 en el cuadro Porcentaje. (Se trata de un control NumericUpDown, que utilizará en un tutorial
posterior.) Elija Column2 y establézcala en el 85 por ciento. No elija todavía el botón Aceptar, ya que se
cerraría la ventana. (Si lo hace, puede volver a abrirla mediante la lista de tareas.)
Estilos de fila y columna de TableLayoutPanel
11. En la lista desplegable Mostrar de la parte superior de la ventana, elija Filas. Establezca Row1 en el 90 por
ciento y Row2 en el 10 por ciento.
12. Elija el botón Aceptar. TableLayoutPanel debería tener ahora una fila superior grande, una fila inferior
pequeña, una columna izquierda pequeña y una columna derecha grande. Puede cambiar el tamaño de las
filas y columnas de TableLayoutPanel eligiendo tableLayoutPanel1 en el formulario y arrastrando sus bordes
de fila y columna.
Form1 con un control TableLayoutPanel que ha cambiado de tamaño
Para continuar o revisar
Para ir al siguiente paso del tutorial, vea Paso 5: Agregar controles al formulario.
Para volver al paso anterior del tutorial, vea Paso 3: Establecer las propiedades del formulario.
© 2016 Microsoft
Visual Studio 2015
En este paso, se agregan controles, como un control PictureBox y un control CheckBox, al formulario. A
continuación, se agregan botones al formulario.
Para obtener una versión en vídeo de este tema, vea el Tutorial 1: Crear un visor de imágenes en Visual Basic
(vídeo 2) o el Tutorial 1: Crear un visor de imágenes en C# (vídeo 2). 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. Sin embargo, los conceptos y procedimientos funcionan de forma similar en la versión actual de Visual
Studio.
Para agregar controles al formulario
1. Vaya a la pestaña Cuadro de herramientas (situada a la izquierda del IDE de Visual Studio) y expanda el grupo
Controles comunes. Se muestran los controles más comunes que suelen aparecer en los formularios.
2. Elija el control TableLayoutPanel del formulario. Para comprobar que TableLayoutPanel está activado,
asegúrese de que su nombre aparezca en el cuadro de lista desplegable situado en la parte superior de la
ventana Propiedades. También puede elegir controles de formulario mediante el cuadro de lista desplegable
que se encuentra en la parte superior de la ventana Propiedades. Suele resultar más fácil hacerlo de esta
manera que elegir un control minúsculo con el mouse.
3. Haga doble clic en el elemento PictureBox para agregar un control PictureBox al formulario. Dado que
TableLayoutPanel está acoplado de forma que ocupa el formulario, el IDE agrega el control PictureBox en la
primera celda vacía (la esquina superior izquierda).
4. Elija el nuevo control PictureBox para seleccionarlo y, a continuación, elija el triángulo negro de este control
para mostrar la lista de tareas, tal y como se muestra en la imagen siguiente.
Tareas de PictureBox
Nota
Si agrega accidentalmente un tipo equivocado de control a TableLayoutPanel, puede eliminarlo. Haga clic
con el botón secundario en el control y, a continuación, elija Eliminar en el menú contextual. También
puede quitar controles del formulario mediante la barra de menús. En la barra de menús, elija Editar,
Deshacer o Editar, Eliminar.
5. Elija el vínculo Acoplar en contenedor primario. Se establece automáticamente la propiedad Dock de
PictureBox en Fill. Para verlo, seleccione el control PictureBox, vaya a la ventana Propiedades y asegúrese de
que la propiedad Dock está establecida en Fill.
6. Haga que PictureBox abarque ambas columnas cambiando su propiedad ColumnSpan. Elija el control
PictureBox y establezca su propiedad ColumnSpan en 2. Además, cuando el PictureBox está vacío, se debe
mostrar un marco vacío. Establezca su propiedad BorderStyle en Fixed3D.
Nota
Si no se muestra ninguna propiedad ColumnSpan en el control PictureBox, es probable que se haya
agregado PictureBox al formulario en lugar de TableLayoutPanel. Para corregir esto, elija el control
PictureBox, elimínelo, elija el control TableLayoutPanel y, a continuación, agregue un nuevo control
PictureBox.
7. Elija el control TableLayoutPanel del formulario y, a continuación, agregue un control CheckBox al formulario.
Haga doble clic en el elemento CheckBox del Cuadro de herramientas para agregar un nuevo control
CheckBox a la siguiente celda libre de la tabla. Como el control PictureBox ocupa las dos primeras celdas del
control TableLayoutPanel, el control CheckBox se agrega en la celda inferior izquierda. Elija la propiedad Text
y escriba la palabra Stretch, como se muestra en la imagen siguiente.
Control TextBox con la propiedad Stretch
8. Elija el control TableLayoutPanel del formulario, vaya al grupo Contenedores del Cuadro de herramientas
(donde obtuvo el control TableLayoutPanel) y haga doble clic en el elemento FlowLayoutPanel para agregar
un nuevo control a la última celda de PictureBox (en la parte inferior derecha). A continuación acople el
control FlowLayoutPanel en TableLayoutPanel (para ello, elija Acoplar en contenedor primario en la lista de
tareas del triángulo negro de FlowLayoutPanel o establezca la propiedad Dock de FlowLayoutPanel en Fill).
Nota
FlowLayoutPanel es un contenedor que organiza otros controles en filas ordenadas. Al cambiar el tamaño
de FlowLayoutPanel, coloca todos los controles que contiene en una sola fila, siempre que tenga espacio
para ello. De lo contrario, los organiza en líneas, uno encima de otro. Vamos a utilizar un control
FlowLayoutPanel para contener cuatro botones. Si al agregar los botones se organizan uno encima de otro,
asegúrese de que el control FlowLayoutPanel está seleccionado antes de agregarlos. Aunque hemos dicho
anteriormente que cada celda puede contener un solo control, la celda inferior derecha del control
TableLayoutPanel tiene cuatro controles de botón. Esto es porque se puede colocar un control en una
celda que contiene otros controles. Este tipo de control se denomina contenedor y FlowLayoutPanel es un
contenedor.
Para agregar botones
1. Elija el nuevo control FlowLayoutPanel que acaba de agregar. Vaya a Controles comunes en el Cuadro de
herramientas y haga doble clic en el elemento Button para agregar un control de botón denominado
button1 al control FlowLayoutPanel. Repita el proceso para agregar otro botón. El IDE determina que ya hay
un botón denominado button1, de modo que denomina button2 al siguiente botón.
2. Normalmente, se agregan los demás botones mediante el Cuadro de herramientas. Esta vez, elija button2 y, a
continuación, en la barra de menús, elija Edición, Copiar (o presione Ctrl+C). En la barra de menús, elija
Edición, Pegar (o presione Ctrl+V) para pegar una copia del botón. Vuelva a pegarlo otra vez. Ahora el IDE ha
agregado button3 y button4 al control FlowLayoutPanel.
Nota
Puede copiar y pegar cualquier control. El IDE da nombre y coloca los nuevos controles de una manera
lógica. Si se pega un control en un contenedor, el IDE elige el siguiente espacio lógico para colocarlo.
3. Elija el primer botón y establezca su propiedad Text en Mostrar una imagen. Después establezca las
propiedades Text de los otros tres botones siguientes en Borrar la imagen, Establecer el color de fondo y
Cerrar.
4. El paso siguiente consiste en cambiar el tamaño de los botones y organizarlos de modo que estén alineados a
la derecha del panel. Elija el control FlowLayoutPanel y fíjese en su propiedad FlowDirection. Cámbiela de
modo que quede establecida en RightToLeft. En cuanto lo haga, los botones deberían alinearse a la derecha
de la celda, en orden inverso de modo que el botón Mostrar una imagen quede a la derecha.
Nota
Si los botones siguen en orden incorrecto, puede arrastrarlos alrededor de FlowLayoutPanel para
reorganizarlos en cualquier orden. Puede elegir un botón y arrastrarlo a la izquierda o a la derecha.
5. Elija el botón Cerrar para seleccionarlo. Mantenga presionada la tecla CTRL y elija los otros tres botones para
que todos estén seleccionados. Mientras todos los botones están seleccionados, vaya a la ventana
Propiedades y desplácese hacia arriba hasta la propiedad AutoSize. Esta propiedad indica al botón que
cambie el tamaño automáticamente para ajustarse al texto que contiene. Establézcala en true. Ahora, los
botones deberían tener el tamaño y orden correctos. (Si los cuatro botones están seleccionados, puede
cambiar las cuatro propiedades AutoSize al mismo tiempo.) En la siguiente imagen se muestran los cuatro
botones.
Visor de imágenes con cuatro botones
6. Ahora, ejecute de nuevo el programa para ver el formulario que acaba de diseñar. Al elegir los botones y la
casilla todavía no sucede nada, pero funcionarán pronto.
Para continuar o revisar
Para ir al siguiente paso del tutorial, vea Paso 6: Asignar un nombre a los controles de botón.
Para volver al paso anterior del tutorial, vea Paso 4: Diseñar un formulario con un control TableLayoutPanel.
© 2016 Microsoft
Visual Studio 2015
Hay solo un control PictureBox en el formulario.Al agregarlo, el IDE lo denominó automáticamente
pictureBox1.Solamente hay una casilla, denominada checkBox1.Pronto, escribirá código, y ese código hará
referencia a CheckBox y PictureBox.Como no hay más que un ejemplar de cada control, entenderá lo que significan
los términos pictureBox1 o checkBox1 cuando los vea en su código.
Nota
En Visual Basic, la primera letra del nombre de un control se pone en mayúscula de forma predeterminada, de
modo que los nombres son PictureBox1, CheckBox1, etc.
Hay cuatro botones en el formulario, que el IDE ha denominado button1, button2, button3 y button4.Solo con
mirar los nombres actuales no sabemos cuál es el botón Cerrar ni cuál es el botón Mostrar una imagen.Por eso
resulta útil asignar a los controles de botón nombres más descriptivos.
Para obtener una versión en vídeo de este tema, vea el Tutorial 1: Crear un visor de imágenes en Visual Basic
(vídeo 3) o el Tutorial 1: Crear un visor de imágenes en C# (vídeo 3).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.Sin embargo, los conceptos y procedimientos funcionan de forma similar en la versión actual de Visual
Studio.
1. En el formulario, elija el botón Cerrar. (Si todavía están seleccionados todos los botones, elija la tecla ESC para
cancelar la selección). Desplácese en la ventana Propiedades hasta que vea la propiedad (Name). (La
propiedad (Name) se encuentra cerca de la parte superior cuando las propiedades están por orden
alfabético.) Cambie el nombre a closeButton, como se muestra en la siguiente imagen.
Ventana Propiedades con el nombre closeButton
Nota
Si intenta cambiar el nombre del botón por BotónCerrar, con un espacio entre las palabras Botón y Cerrar,
el IDE muestra el mensaje de error: "El valor de propiedad no es válido". En los nombres de los controles
no se permiten espacios (ni algunos otros caracteres).
2. Cambie el nombre de los otros tres botones a backgroundButton, clearButton y showButton.Puede
comprobar los nombres eligiendo la lista desplegable de selección de controles de la ventana
Propiedades.Aparecerán los nuevos nombres de los botones.
3. Haga doble clic en el botón Mostrar una imagen del formulario.Si lo desea, también puede elegir el botón
Mostrar una imagen del formulario y, a continuación, la tecla ENTRAR.Al hacerlo, el IDE abre una pestaña
adicional en la ventana principal denominada Form1.cs (Form1.vb si utiliza Visual Basic).En esta pestaña se
muestra el archivo de código subyacente del formulario, tal y como se muestra en la siguiente imagen.
Pestaña Form1.cs con código de Visual C#
4. Céntrese en esta parte del código. (Si utiliza Visual Basic, elija la pestaña VB que se muestra a continuación
para ver la versión de Visual Basic del código).
C#
private void showButton_Click(object sender, EventArgs e)
{
}
Se trata de código denominado showButton_Click().El IDE lo agregó al código del formulario cuando abrió el
archivo de código del botón showButton.En tiempo de diseño, cuando abra el archivo de código de un
control de un formulario, se generará el código del control si este aún no existe.Este código, conocido como
método, se ejecuta a la vez que el programa y elige el control (en este caso, el botón Mostrar una imagen).
Nota
En este tutorial, el código de Visual Basic que se genera automáticamente se ha simplificado quitando todo
lo que hay entre los paréntesis ().Siempre que esto sucede, se puede quitar el mismo código.El programa
funcionará en ambos casos.En el resto de los tutoriales, se simplifica el código generado automáticamente
siempre que sea posible.
5. Vuelva a elegir la pestaña del Diseñador de Windows Forms (Form1.cs [Diseño] en Visual C#, Form1.vb
[Diseño] en Visual Basic) y luego abra el archivo de código para que el botón Borrar la imagen cree un
método para él en el código del formulario.Repita el procedimiento con los dos botones restantes.El IDE
agrega cada vez un nuevo método al archivo de código del formulario.
6. Si desea agregar varios métodos, abra el archivo de código del control CheckBox en el Diseñador de Windows
Forms para hacer que el IDE agregue un método checkBox1_CheckedChanged().Cada vez que el usuario
activa o desactiva la casilla, se llama a este método.
Nota
Cuando se trabaja en un programa, a menudo se utilizan alternativamente el editor de código y el
Diseñador de Windows Forms.El IDE facilita la navegación en el proyecto.Use el Explorador de soluciones
para abrir el Diseñador de Windows Forms haciendo doble clic en Form1.cs en Visual C# o en Form1.vb
en Visual Basic o, en la barra de menús, elija Ver, Diseñador.
A continuación se muestra el nuevo código que aparece en el editor de código.
C#
private void clearButton_Click(object sender, EventArgs e)
{
}
private void backgroundButton_Click(object sender, EventArgs e)
{
}
private void closeButton_Click(object sender, EventArgs e)
{
}
private void checkBox1_CheckedChanged(object sender, EventArgs e)
{
}
Los cinco métodos que ha agregado se denominan controladores de eventos, porque el programa los llama
cada vez que se produce un evento (por ejemplo, cuando un usuario elige un botón o activa una casilla).
Cuando ve el código de un control del IDE en tiempo de diseño, Visual Studio agrega un método de control
de eventos para el control si aún no está ahí.Por ejemplo, cuando se hace doble clic en un botón, el IDE
agrega un controlador para este evento Click (al que se llamará cada vez que el usuario elija el botón).Cuando
se hace doble clic en una casilla, el IDE agrega un controlador para el evento CheckedChanged
correspondiente (al que se llamará cada vez que el usuario active o desactive la casilla).
Después de agregar un controlador de eventos para un control, puede volver en cualquier momento a él
desde el Diseñador de Windows Forms haciendo doble clic en el control o eligiendo Ver, Código en la barra
de menús.
Los nombres son importantes al compilar programas. Los métodos (incluso los controladores de eventos)
pueden tener cualquier nombre que se desee.Cuando agregue un controlador de eventos con el IDE, se
creará un nombre basado en el nombre del control y en el evento que se controla.Por ejemplo, el evento Click
para un botón denominado showButton se denomina método de control de eventos
showButton_Click().Además, se suelen agregar paréntesis de apertura y cierre () después del nombre de
método para indicar que se trata de un método.Si decide que desea cambiar un nombre de variable de
código, haga clic con el botón secundario en la variable del código y elija Refactorizar, Cambiar
nombre.Todas las instancias de esa variable del código cambiarán de nombre.Vea Cambiar el nombre de
refactorización (C#) o Refactorización y Cambiar nombre (Cuadro de diálogo) (Visual Basic) para obtener más
información.
Para ir al siguiente paso del tutorial, vea Paso 7: Agregar componentes de diálogo al formulario.
Para volver al paso anterior del tutorial, vea Paso 5: Agregar controles al formulario.
© 2016 Microsoft
Visual Studio 2015
Para que el programa abra archivos de imagen y para elegir un color de fondo, en este paso agregará un
componente OpenFileDialog y un componente ColorDialog al formulario.
En algunos sentidos, un componente es como un control. Se utiliza el Cuadro de herramientas para agregar un
componente al formulario y se establecen sus propiedades mediante la ventana Propiedades. Sin embargo, a
diferencia de un control, al agregar un componente al formulario no se agrega un elemento visible que el usuario
puede ver. En cambio, se proporcionan determinados comportamientos que se pueden desencadenar mediante
código. Un componente es lo que abre un cuadro de diálogo Abrir archivo.
Para obtener una versión en vídeo de este tema, vea el Tutorial 1: Crear un visor de imágenes en Visual Basic
(vídeo 3) o el Tutorial 1: Crear un visor de imágenes en C# (vídeo 3). 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. Sin embargo, los conceptos y procedimientos funcionan de forma similar en la versión actual de Visual
Studio.
Para agregar componentes de cuadro de diálogo al formulario
1. Elija el Diseñador de Windows Forms (Form1.cs [Diseño] o Form1.vb [Diseño]) y después abra el grupo
Cuadros de diálogo del cuadro de herramientas.
Nota
El grupo Cuadros de diálogo del Cuadro de herramientas tiene componentes que abren automáticamente
muchos cuadros de diálogo de gran utilidad y que se pueden utilizar para abrir y guardar archivos,
examinar carpetas y elegir fuentes o colores. En este proyecto se utilizan dos componentes de cuadro de
diálogo: OpenFileDialog y ColorDialog.
2. Para agregar un componente denominado a openFileDialog1 al formulario, haga doble clic en
OpenFileDialog. Para agregar un componente denominado colorDialog1 al formulario, haga doble clic en
ColorDialog en el Cuadro de herramientas. (Este se utiliza en el siguiente paso del tutorial.) Debería aparecer
un área en la parte inferior del Diseñador de Windows Forms (bajo el formulario del Visor de imágenes), con
un icono para cada uno de los dos componentes de cuadro de diálogo agregados, tal y como se muestra en
la siguiente imagen.
Componentes de cuadro de diálogo
3. Elija el icono openFileDialog1 del área de la parte inferior del Diseñador de Windows Forms. Establezca dos
propiedades:
Establezca la propiedad Filter tal y como se indica a continuación (puede copiarlo y pegarlo):
JPEG Files (*.jpg)|*.jpg|PNG Files (*.png)|*.png|BMP Files (*.bmp)|*.bmp|All
Establezca la propiedad Title en lo siguiente: Seleccionar un archivo de imagen
Los valores de la propiedad Filter especifican las clases de tipos de archivo que se mostrarán en el
cuadro de diálogo Seleccionar un archivo de imagen.
Nota
Para ver un ejemplo del cuadro de diálogo Abrir archivo en una aplicación diferente, abra el Bloc de notas
o Paint y, en la barra de herramientas, elija Archivo, Abrir. Observe que hay una lista desplegable de tipo
de archivo en la parte inferior. Acabamos de utilizar la propiedad Filter del componente OpenFileDialog
para configurarla. Observe también que las propiedades Title y Filter están en negrita en la ventana
Propiedades. El IDE lo hace para mostrarle todas las propiedades que han cambiado respecto de sus
valores predeterminados.
Para continuar o revisar
Para ir al siguiente paso del tutorial, vea Paso 8: Escribir código para el controlador de eventos del botón
Mostrar una imagen.
Para volver al paso anterior del tutorial, vea Paso 6: Asignar un nombre a los controles de botón.
© 2016 Microsoft
Visual Studio 2015
En este paso, conseguiremos que botón Mostrar una imagen funciona así:
Cuando un usuario elige ese botón, el programa abre un cuadro de diálogo Abrir archivo.
Si un usuario abre un archivo de imagen, el programa muestra esa imagen en el control PictureBox.
El IDE incluye una eficaz herramienta denominada IntelliSense que ayuda a escribir código. Cuando se escribe
código, el IDE abre un cuadro con sugerencias para completar las palabras parciales que se escriben. Intenta
determinar lo que se desea hacer a continuación y salta automáticamente al último elemento que se elige en la lista.
Puede utilizar las flechas arriba o abajo para moverse por la lista o bien continuar escribiendo letras para reducir las
opciones propuestas. Cuando vea la opción que busca, elija la tecla TAB para seleccionarla. Otra opción es pasar por
alto las sugerencias, si no las necesita.
Para obtener una versión en vídeo de este tema, vea el Tutorial 1: Crear un visor de imágenes en Visual Basic
(vídeo 4) o el Tutorial 1: Crear un visor de imágenes en C# (vídeo 4). 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. Sin embargo, los conceptos y procedimientos funcionan de forma similar en la versión actual de Visual
Studio.
Para escribir código para el controlador de eventos de botón Mostrar una imagen
1. Vaya al Diseñador de Windows Forms y haga doble clic en el botón Mostrar una imagen. El IDE va
inmediatamente al diseñador de código y mueve su cursor de modo para situarlo dentro del método
showButton_Click() que agregó previamente.
2. Escriba una i en la línea vacía entre las dos llaves { }. (En Visual Basic, escriba en la línea vacía entre Private
Sub… y End Sub.) Se abre una ventana IntelliSense, como se muestra en la siguiente imagen.
IntelliSense con código de Visual C#
3. La ventana IntelliSense debe mostrar resaltada la palabra if. (De lo contrario, escriba una f minúscula, y lo
hará.) Observe cómo un pequeño cuadro de información sobre herramientas situado junto a la ventana
IntelliSense aparece con la descripción, Fragmento de código para la instrucción if. (En Visual Basic, la
información sobre herramientas dice también que se trata de un fragmento de código, pero con una
redacción ligeramente diferente.) Como desea usar ese fragmento, elija la tecla TAB para insertar if en el
código. Elija de nuevo la tecla TAB para utilizar el fragmento de código if. (Si hizo clic en alguna otra parte y
desapareció la ventana IntelliSense, borre la i con la tecla de retroceso y vuelva a escribirla; se volverá a abrir
la ventana IntelliSense.)
Código de Visual C#
4. A continuación, utilice IntelliSense para escribir más código y abrir un cuadro de diálogo Abrir archivo. Si el
usuario elige el botón Aceptar, el control PictureBox cargará el archivo seleccionado por el usuario. En los
siguientes pasos se muestra cómo escribir el código. Aunque los pasos son muchos, solamente habrá que
presionar unas cuantas teclas:
a. Comience con el texto seleccionado true del fragmento de código. Escriba op para sobrescribirlo. (En
Visual Basic, empieza con mayúscula inicial, de modo que deberá escribir Op.)
b. Se abre la ventana IntelliSense y muestra openFileDialog1. Elija la tecla TAB para seleccionarlo. (En
Visual Basic, empieza con mayúscula inicial, de modo que aparecerá OpenFileDialog1. Asegúrese de
que OpenFileDialog1 está seleccionado.)
Para obtener más información sobre OpenFileDialog, vea OpenFileDialog.
c. Escriba un punto (.) (En inglés se denomina period o dot). Dado que escribió un punto justo después
de openFileDialog1, se abre una ventana IntelliSense, que contiene todas las propiedades y los
métodos de componente de OpenFileDialog. Se trata de las mismas propiedades que aparecen en la
ventana Propiedades cuando elige este componente en el Diseñador de Windows Forms. También
puede elegir métodos que indiquen al componente que realice acciones (como abrir un cuadro de
diálogo).
Nota
La ventana IntelliSense puede mostrar propiedades y métodos. Para determinar qué se está
mostrando, fíjese en el icono del lado izquierdo de cada elemento de la ventana IntelliSense. Se
muestra una imagen de un bloque junto a cada método y una imagen de una llave inglesa (o fija)
junto a cada propiedad. Además, aparece un icono de rayo junto a cada evento. Estas imágenes se
muestran como sigue.
Icono de método
Icono de propiedad
Icono de evento
d. Empiece a escribir ShowDialog (el uso de mayúsculas o minúsculas no es significativo en IntelliSense).
El método ShowDialog() mostrará el cuadro de diálogo Abrir archivo. Cuando la ventana haya
resaltado ShowDialog, elija la tecla TAB. También puede resaltar “ShowDialog” y elegir la tecla F1 para
obtener ayuda sobre ella.
Para obtener más información sobre el método ShowDialog(), consulte Método ShowDialog.
e. Cuando se utiliza un método con un control o un componente (lo que se denomina llamar a un
método), es preciso agregar paréntesis. Así pues, especifique los paréntesis de apertura y cierre
inmediatamente después de la “g” en ShowDialog: () Debe tener la apariencia siguiente:
"openFileDialog1.ShowDialog()".
Nota
Los métodos constituyen una parte importante de cualquier programa. En este tutorial se han
mostrado varias maneras de utilizarlos. Se puede llamar al método de un componente para
ordenarle que haga algo, por ejemplo, como cuando llamó al método ShowDialog() del
componente OpenFileDialog. Puede crear sus propios métodos para que los programas realicen
acciones, como el que estamos construyendo ahora, que se denomina método showButton_Click()
y que abre un cuadro de diálogo y una imagen cuando un usuario elige en un botón.
f. Para Visual C#, agregue un espacio y, a continuación, agregue dos signos igual (==). Para Visual Basic,
agregue un espacio y, a continuación, utilice un solo signo igual (=). (Visual C# y Visual Basic utilizan
distintos operadores de igualdad.)
g. Agregue otro espacio. En cuanto haga, se abrirá otra ventana IntelliSense. Empiece a escribir
DialogResult y elija la tecla TAB para agregarlo.
Nota
Cuando se escribe código para llamar a un método, a veces devuelve un valor. En este caso, el
método ShowDialog() del componente OpenFileDialog devuelve un valor DialogResult.
DialogResult es un valor especial que le indica lo que ha sucedido en un cuadro de diálogo. Un
componente OpenFileDialog puede dar lugar a que el usuario elija Aceptar o Cancelar, de modo
que el método ShowDialog() devuelva DialogResult.OK o DialogResult.Cancel.
h. Escriba un punto para abrir la ventana IntelliSense del valor DialogResult. Escriba la letra O y elija la
tecla TAB para insertar OK.
Para obtener más información sobre DialogResult, vea DialogResult.
Nota
Deberá quedar completa la primera línea de código. Para Visual C#, debería ser la siguiente.
if (openFileDialog1.ShowDialog() == DialogResult.OK)
Para Visual Basic, debería ser la siguiente.
If OpenFileDialog1.ShowDialog() = DialogResult.OK Then
i. Ahora, agregue otra línea de código más. Puede escribirla (o copiar y pegar), pero puede resultar
interesante utilizar IntelliSense para agregarla. Cuanto más se familiarice con IntelliSense, más
rápidamente podrá escribir su propio código. El método showButton_Click() final tendrá el siguiente
aspecto. (Elija la pestaña VB para ver la versión de Visual Basic del código).
C#
private void showButton_Click(object sender, EventArgs e)
{
if (openFileDialog1.ShowDialog() == DialogResult.OK)
{
pictureBox1.Load(openFileDialog1.FileName); }
}
Para continuar o revisar
Para ir al siguiente paso del tutorial, vea Paso 9: Revisar, comentar y probar el código.
Para volver al paso anterior del tutorial, vea Paso 7: Agregar componentes de diálogo al formulario.
© 2016 Microsoft
Visual Studio 2015
A continuación, se agrega un comentario al código. Un comentario es una nota que no cambia la forma de
comportarse del programa. Hace que resulte más fácil entender el código a la persona que lo lee. Agregar
comentarios al código es un hábito recomendable. En Visual C#, se utilizan dos barras diagonales (//) para marcar
una línea como comentario. En Visual Basic, se utiliza una comilla sencilla (') para marcar una línea como comentario.
Después de agregar un comentario, se prueba el programa. Es recomendable ejecutar y probar el código con
frecuencia mientras trabaja en sus proyectos para que pueda detectar y corregir pronto cualquier problema, antes de
que la complejidad del código aumente. Esto se denomina prueba iterativa.
Acaba de compilar algo que funciona y, aunque todavía no está terminado, ya es capaz de cargar una imagen. Antes
de agregar un comentario al código y probarlo, dedique un tiempo a revisar los conceptos del código, porque los
utilizará con frecuencia:
Cuando hizo doble clic en el botón Mostrar una imagen en el Diseñador de Windows Forms, el IDE agregó
automáticamente un método al código del programa.
Los métodos permiten organizar el código: son la manera de agrupar las partes del código.
Casi siempre, un método realiza una cantidad reducida de acciones en un orden concreto; por ejemplo, el
método showButton_Click() muestra un cuadro de diálogo y, a continuación, carga una imagen.
Un método se compone de instrucciones o líneas de código. Podemos considerar que un método es una
manera de empaquetar instrucciones de código juntas.
Cuando se ejecuta un método, o se le llama, se ejecutan las instrucciones que contiene en orden, una tras
otra, empezando por la primera.
A continuación, se muestra un ejemplo de una instrucción.
C#
pictureBox1.Load(openFileDialog1.FileName);
VB
pictureBox1.Load(openFileDialog1.FileName)
Las instrucciones son lo que permite que el programa haga cosas. En Visual C#, una instrucción finaliza
siempre en un signo de punto y coma. En Visual Basic, el final de una línea es el final de una instrucción. (No
se necesita indicar el signo de punto y coma en Visual Basic.) La instrucción anterior ordena al control
PictureBox que cargue el archivo que el usuario seleccionó con el componente OpenFileDialog.
Para obtener una versión en vídeo de este tema, vea el Tutorial 1: Crear un visor de imágenes en Visual Basic
(vídeo 5) o el Tutorial 1: Crear un visor de imágenes en C# (vídeo 5). 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. Sin embargo, los conceptos y procedimientos funcionan de forma similar en la versión actual de Visual
Studio.
Para agregar comentarios
1. Agregue el siguiente comentario al código.
C#
private void showButton_Click(object sender, EventArgs e)
{
// Show the Open File dialog. If the user clicks OK, load the
// picture that the user chose.
if (openFileDialog1.ShowDialog() == DialogResult.OK)
{
pictureBox1.Load(openFileDialog1.FileName);
}
}
Nota
El controlador de eventos Click del botón showButton ya está completado y funciona. Ha empezado a
escribir código, comenzando por una instrucción if. Una instrucción if es la manera de ordenar al
programa: "Compruebe esto y, si se cumple, realice estas acciones". En este caso, le está diciendo al
programa que abra el cuadro de diálogo Abrir archivo y que, si el usuario selecciona un archivo y elige el
botón Aceptar, cargue ese archivo en PictureBox.
Sugerencia
El IDE se ha creado para facilitar la tarea de escribir código. Los fragmentos de código constituyen una
manera de conseguirlo. Un fragmento de código es un acceso directo que se expande para crear un
bloque pequeño de código.
Puede ver todos los fragmentos de código disponibles. En la barra de menús, elija Herramientas,
Administrador de fragmentos de código. En Visual C#, el fragmento de código if está en Visual C#. En
Visual Basic, los fragmentos de código if están en Condicionales y bucles, Patrones de código. Este
administrador se puede utilizar para examinar los fragmentos de código existentes o agregar los suyos
propios.
Para activar un fragmento de código mientras está especificando el código, escríbalo y elija la tecla TAB.
Muchos fragmentos de código aparecen en la ventana IntelliSense, motivo por el cual la tecla TAB se elige
dos veces: la primera para seleccionar el fragmento de código en la ventana IntelliSense y la segunda para
indicarle al IDE que lo utilice. (IntelliSense admite el fragmento de código if, pero no el fragmento de
código ifelse.)
2. Antes de ejecutar el programa, guárdelo utilizando el botón de la barra de herramientas Guardar todo, que
se muestra a continuación.
Botón Guardar todo
Si lo desea, también puede elegir en la barra de menús Archivo, Guardar todo para guardar su programa. El
procedimiento recomendado consiste en guardar desde el principio y a menudo.
Mientras se ejecuta, el programa debería parecerse a la siguiente imagen.
Visor de imágenes
Para probar el programa
1. Elija la tecla F5 o el botón Iniciar depuración de la barra de herramientas.
2. Elija el botón Mostrar una imagen para ejecutar el código que acaba de escribir. Primero, el programa abre
un cuadro de diálogo Abrir archivo. Compruebe que los filtros aparecen en la lista desplegable Tipo de
archivo en la parte inferior del cuadro de diálogo. A continuación, navegue hasta una imagen y ábrala.
Normalmente, encontrará imágenes de ejemplo que se distribuyen con el sistema operativo Windows en la
carpeta Mis documentos, dentro de la carpeta Mis imágenes\Sample Pictures.
Nota
Si no ve ninguna imagen en el cuadro de diálogo Seleccionar un archivo de imagen, asegúrese de que el
filtro "Todos los archivos (*.*)" esté seleccionado en la lista desplegable situada en la parte derecha inferior
del cuadro de diálogo.
3. Cargue una imagen y esta aparecerá en el control PictureBox. A continuación intente cambiar el tamaño del
formulario arrastrando los bordes. Como el control PictureBox está acoplado dentro de un control
TableLayoutPanel, que a su vez está acoplado en el formulario, el ancho del área de imagen se ajustará al
ancho del formulario y el alto ocupará el 90 por ciento superior del formulario. Por este motivo hemos
utilizado los contenedores TableLayoutPanel y FlowLayoutPanel: mantienen el tamaño del formulario correcto
cuando el usuario lo modifica.
En este momento, las imágenes más grandes sobrepasan los bordes del visor de imágenes. En el paso
siguiente, agregará código para que las imágenes se ajusten a la ventana.
Para continuar o revisar
Para ir al siguiente paso del tutorial, vea Paso 10: Escribir código para botones adicionales y una casilla.
Para volver al paso anterior del tutorial, vea Paso 8: Escribir código para el controlador de eventos del botón
Mostrar una imagen.
© 2016 Microsoft
Visual Studio 2015
Ahora, está listo para completar los otros cuatro métodos. Podría copiar y pegar este código, pero si desea aprender
lo máximo con este tutorial, escriba el código y utilice IntelliSense.
Este código agrega funcionalidad a los botones que agregó anteriormente. Sin este código, los botones no hacen
nada. Los botones utilizan el código de sus eventos Click (y la casilla utiliza el evento CheckChanged) para realizar
diferentes operaciones cuando se activan los controles. Por ejemplo, el evento clearButton_Click, que se activa al
elegir el botón Borrar la imagen, borra la imagen actual y establece su propiedad Image en null (o nothing). Cada
evento del código incluye comentarios que explican lo que hace el código.
Para obtener una versión en vídeo de este tema, vea el Tutorial 1: Crear un visor de imágenes en Visual Basic
(vídeo 5) o el Tutorial 1: Crear un visor de imágenes en C# (vídeo 5). 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. Sin embargo, los conceptos y procedimientos funcionan de forma similar en la versión actual de Visual
Studio.
Nota
El procedimiento recomendado es comentar siempre el código. Los comentarios son información que leerán otras
personas y merece la pena dedicar tiempo a hacer que el código resulte fácil de entender. El programa pasa por
alto todo lo que hay en una línea de comentario. En Visual C#, para marcar una línea como comentario se
escriben dos barras diagonales (//) al principio. En Visual Basic, se utiliza para ello una comilla sencilla (').
Si desea escribir código para otros adicionales y una casilla
Agregue el código siguiente al archivo de código Form1 (Form1.cs o Form1.vb). Elija la pestaña VB para ver el
código de Visual Basic.
C#
private void clearButton_Click(object sender, EventArgs e)
{
// Clear the picture.
pictureBox1.Image = null;
}
private void backgroundButton_Click(object sender, EventArgs e)
{
// Show the color dialog box. If the user clicks OK, change the
// PictureBox control's background to the color the user chose.
if (colorDialog1.ShowDialog() == DialogResult.OK)
pictureBox1.BackColor = colorDialog1.Color;
}
private void closeButton_Click(object sender, EventArgs e)
{
// Close the form.
this.Close();
}
private void checkBox1_CheckedChanged(object sender, EventArgs e)
{
// If the user selects the Stretch check box, // change the PictureBox's
// SizeMode property to "Stretch". If the user clears // the check box, change it to "Normal".
if (checkBox1.Checked)
pictureBox1.SizeMode = PictureBoxSizeMode.StretchImage;
else
pictureBox1.SizeMode = PictureBoxSizeMode.Normal;
}
Para continuar o revisar
Para ir al siguiente paso del tutorial, vea Paso 11: Ejecutar el programa y probar otras características.
Para volver al paso anterior del tutorial, vea Paso 9: Revisar, comentar y probar el código.
© 2016 Microsoft
Visual Studio 2015
El programa está finalizado y listo para ejecutarse. Puede ejecutar el programa y establecer el color de fondo del
control PictureBox. Para aprender más, intente mejorar el programa cambiando el color del formulario,
personalizando los botones y la casilla, y cambiando las propiedades del formulario.
Para descargar una versión completa del ejemplo, vea Ejemplo completo del tutorial de visor de imágenes.
Para obtener una versión en vídeo de este tema, vea el Tutorial 1: Crear un visor de imágenes en Visual Basic
(vídeo 5) o el Tutorial 1: Crear un visor de imágenes en C# (vídeo 5). 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. Sin embargo, los conceptos y procedimientos funcionan de forma similar en la versión actual de Visual
Studio.
Para ejecutar el programa y establecer el color de fondo
1. Elija F5 o, en la barra de menús, elija Depurar, Iniciar depuración.
2. Antes de abrir una imagen, elija el botón Establecer el color de fondo. Se abrirá el cuadro de diálogo Color.
Cuadro de diálogo Color
3. Elija un color para establecer el color de fondo de PictureBox. Fíjese con atención en el método
backgroundButton_Click() para entender cómo funciona.
Nota
Puede cargar una imagen de Internet pegando su dirección URL en el cuadro de diálogo Abrir archivo.
Intente encontrar una imagen con un fondo transparente, para que se vea el color de fondo.
4. Elija el botón Borrar la imagen para asegurarse de que se borra. A continuación, salga del programa
eligiendo el botón Cerrar.
Para probar otras características
Cambie el color del formulario y de los botones mediante la propiedad BackColor.
Personalice sus botones y la casilla mediante las propiedades Font y ForeColor.
Cambie las propiedades FormBorderStyle y ControlBox del formulario.
Use las propiedades AcceptButton y CancelButton del formulario para que, cuando el usuario elija la tecla
ENTRAR o ESC, los botones se selecciones automáticamente. Haga que el programa abra el cuadro de diálogo
Abrir archivo cuando el usuario elija ENTRAR y que lo cierre cuando el usuario elija ESC.
Para continuar o revisar
Para obtener más información acerca de la programación en Visual Studio, vea Programar los conceptos.
Para obtener más información sobre Visual Basic, vea Desarrollo de aplicaciones con Visual Basic.
Para obtener más información acerca de Visual C#, vea Introducción al lenguaje C# y .NET Framework.
Para ir al siguiente tutorial, vea Tutorial 2: Crear una prueba matemática cronometrada.
Para volver al paso anterior del tutorial, vea Paso 10: Escribir código para botones adicionales y una casilla.
© 2016 Microsoft