Tutorial 1: Crear un visor de imagenVisual Studio 2010 Otras versiones

Visual Studio 2013 Visual Studio 2012 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 tamao del formulario de manera fluida. Tambin empezar a escribir cdigo. Aprender a: Cree un nuevo proyecto. Probar (depurar) una aplicacin. Agregar controles bsicos, como casillas y botones, a un formulario. Colocar controles en un formulario mediante los diseos. Agregar los cuadros de dilogo Abrir archivo y Color a un formulario. Escribir cdigo mediante IntelliSense y fragmentos de cdigo. Escribir mtodos de control de eventos. Cuando termine, el programa se parecer al de la ilustracin siguiente. Imagen que crear en este tutorial

Nota

En este tutorial, se trata tanto Visual C# como Visual Basic, por lo que deber centrarse en la informacin especfica del lenguaje de programacin que use.

Temas relacionados

Ttulo Descripcin

Paso 1: Crear un proyecto de aplicacin de Windows Forms Empezar a crear un proyecto de aplicacin de Windows Forms.

Paso 2: Ejecutar el programa Ejecutar el programa de aplicacin 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: Disear 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 botn Cambiar el nombre de los botones por otros ms significativos.

Paso 7: Agregar componentes de dilogo al formulario Agregar un componente OpenFileDialog y un componente ColorDialog al formulario.

Paso 8: Escribir cdigo para el controlador de eventos del botn Mostrar una imagen Escribir cdigo mediante la herramienta IntelliSense.

Paso 9: Revisar, comentar y probar el cdigo Revisar y probar el cdigo. Agregar comentarios segn sea necesario.

Paso 10: Crear botones adicionales y una casilla Escribir cdigo para hacer que funcionen otros botones y una casilla mediante IntelliSense.

Paso 11: Ejecutar el programa y probar otras caractersticas Ejecutar el programa y establecer el color de fondo. Probar con otras caractersticas, como cambiar colores, fuentes y bordes.

Paso 1: Crear un proyecto de aplicacin de Windows Forms Visual Studio 2013 Visual Studio 2012 El primer paso para crear un visor de imagen es crear un proyecto de aplicacin de Windows Forms. Para crear un proyecto de aplicacin de Windows Forms1. En el men Archivo, haga clic en Nuevo proyecto. 2. Si no usa Visual Studio Express, primero debe seleccionar un lenguaje. De la lista Plantillas instaladas, seleccione C# o Visual Basic. 3. Haga clic en el icono Aplicacin de Windows Forms, especifique el nombre PictureViewer y haga clic en Aceptar. Visual Studio crea automticamente la solucin. 4. Haga clic en Guardar todo en el men Archivo, o bien haga clic en el botn Guardar todo de la barra de herramientas, que aparece como sigue. Botn de la barra de herramientas Guardar todo

Nota

Visual Studio guarda el proyecto en la carpeta de proyectos. El entorno de desarrollo integrado (IDE) rellena automticamente el nombre de la carpeta y del proyecto. Si utiliza Visual Studio Express, deber completar los pasos 5-7. Para las versiones de Visual Studio que no son Express, el proyecto se guarda al crearlo por primera vez, de modo que los pasos 5-7 no son necesarios.

5. Asegrese de que el proyecto se guarda en una carpeta que pertenezca a la carpeta Mis documentos. 6. Compruebe que est activada la casilla Crear directorio para la solucin. 7. Haga clic en Guardar. Nota

Al crear el proyecto, el IDE de Visual Studio crea automticamente varios archivos y los coloca en una carpeta. Puede explorar esos archivos en la ventana del Explorador de soluciones. Al crear el proyecto por primera vez, los archivos se guardan en una carpeta temporal. Cuando se hace clic en el botn Guardar todo se ordena al IDE que los copie en una carpeta permanente (que suele estar contenida en la capeta Mis documentos).

8. Seguramente habr notado que las palabras solucin y proyecto tienen significados diferentes, que se explicarn ms adelante en este tutorial. 9. La siguiente imagen muestra el aspecto que debe tener la ventana del IDE. 10. Ventana del IDE 11.

12. Si la pantalla no se parece la imagen anterior, haga clic en Restablecer diseo de la ventana en el men Ventana. Si falta cualquiera de las ventanas, haga clic en Ventana Propiedades o Explorador de soluciones en el men Vista. Si hay abierta alguna ventana de ms, haga clic en el botn Cerrar (x) de la parte superior derecha. 13. Fjese en la imagen. Desde la esquina superior izquierda y en sentido contrario a las agujas del reloj, la imagen muestra: Ventana principal: es donde se realiza la mayora del trabajo. Esta ventana se utiliza para trabajar con formularios y editar el cdigo. En este momento, muestra un formulario en el Editor de formularios. En la parte superior de la ventana, hay dos pestaas: Pgina principal y Form1.cs [Design]. (En Visual Basic, es .vb en lugar de .cs.) Ventana del Explorador de soluciones: es donde aparecen todos los archivos de la solucin. Al hacer clic en un archivo, la informacin mostrada en la ventana Propiedades cambia. Si hace doble clic en un archivo de cdigo (que finaliza en .cs para Visual C# y en .vb para Visual Basic), se abre el archivo de cdigo o un diseador para l. Ventana Propiedades: es donde se cambian las propiedades de los elementos seleccionados en las otras ventanas.

Observe que la lnea superior de la ventana del Explorador de soluciones muestra Solucin 'PictureViewer' (1 proyecto). El IDE ha creado una solucin automticamente. Una solucin puede contener ms de un proyecto. De momento, vamos a trabajar con soluciones que contienen un solo proyecto.

Paso 2: Ejecutar el programa Visual Studio 2013 Visual Studio 2012 Al crear una solucin, en realidad compil un programa que se ejecuta. Todava no hace gran cosa; se limita a mostrar una ventana vaca que muestra Form1 en la barra de ttulo. Pero se ejecuta, como vamos a comprobar a continuacin. Para ejecutar el programa1. Presione la tecla F5 o haga clic el botn de la barra de herramientas Iniciar depuracin, que aparece como sigue. Botn de la barra de herramientas Iniciar depuracin

2. El IDE ejecuta el programa y aparece una ventana. En la siguiente imagen se muestra el programa que ha compilado. El programa se est ejecutando y pronto lo ampliaremos. Programa de aplicacin de Windows Forms en ejecucin

3. Regrese al IDE y examine la nueva barra de herramientas. Barra de herramientas de depuracin

4. Haga clic en el botn Detener depuracin cuadrado, o bien haga clic en Detener depuracin en el men Depuracin. El programa dejar de ejecutarse y se cerrar la ventana. Tambin puede cerrar simplemente la ventana abierta para detener la depuracin. Nota

Cuando se ejecuta un programa desde el IDE, se denomina depuracin porque se suele hacer para encontrar y corregir errores. Se trata de un programa autntico y se puede ejecutar exactamente igual que cualquier otro.

Paso 3: Establecer las propiedades del formulario Visual Studio 2013 Visual Studio 2012 A continuacin, se utiliza la ventana Propiedades para cambiar la apariencia del formulario. Para establecer las propiedades del formulario1. Asegrese de que est en el Diseador de Windows Forms. En el IDE, haga clic en la pestaa Form1.cs [Design] (o en la pestaa Form1.vb [Design] de Visual Basic). 2. Haga clic en cualquier parte del formulario para seleccionarlo. Examine la ventana Propiedades, que ahora debera 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 ttulo que aparece en la parte superior del formulario, el tamao del formulario y otras propiedades. Nota

Si la ventana Propiedades no aparece, detenga el programa haciendo clic en el cuadrado del botn Detener depuracin (o simplemente cierre la ventana).

3. Una vez seleccionado el formulario, desplcese hasta la parte inferior de la ventana Propiedades y busque la propiedad Text. Haga clic en Text, escriba Visor de imgenes y presione ENTRAR. Ahora, el formulario debera tener el texto Visor de imgenes en la barra de ttulo y la ventana Propiedades se debera parecer a la siguiente. Ventana Propiedades

Nota

Las propiedades se pueden ordenar en vistas por categoras o alfabtica. Puede alternar entre estas dos vistas utilizando los botones de la ventana Propiedades. En este tutorial, resulta ms fcil encontrar las propiedades en la vista alfabtica.

4. Vuelva al Diseador de Windows Forms. Haga clic en el controlador de arrastre inferior derecho del formulario, que es el cuadradito blanco que aparece en el vrtice inferior derecho del formulario y tiene el siguiente aspecto. Controlador de arrastre

Arrstrelo para cambiar el tamao del formulario de modo que resulte ms ancho y un poco ms alto. 5. Fjese en la ventana Propiedades y observe que la propiedad Size ha cambiado. La propiedad Size cambia cada vez que se cambia el tamao del formulario. Pruebe a arrastrar el formulario para cambiar su tamao a unas medidas aproximadas de 550, 350, que deberan funcionar bien para este proyecto. 6. Ejecute el programa de nuevo. Presione la tecla F5 o haga clic el botn de la barra de herramientas Iniciar depuracin, que aparece como sigue. Botn de la barra de herramientas Iniciar depuracin

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 ejecucin. Paso 4: Disear un formulario con un control TableLayoutPanel Visual Studio 2013 Visual Studio 2012 En este paso, agregar un control TableLayoutPanel al formulario. Para disear el formulario con un control TableLayoutPanel1. Vaya al Diseador de Windows Forms. Fjese en el lado izquierdo del formulario y busque la pestaa Cuadro de herramientas. Site el puntero del mouse en la pestaa Cuadro de herramientas. Aparecer el Cuadro de herramientas. (Si lo prefiere, en el men Ver, haga clic en Cuadro de herramientas.) 2. Haga clic en el signo ms situado junto al grupo Contenedores para abrirlo, 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. Al hacerlo, el IDE agrega un control TableLayoutPanel al formulario, como se muestra en la siguiente imagen. Control TableLayoutPanel

Nota

Si, despus de agregar el control TableLayoutPanel, aparece una ventana dentro del formulario con el ttulo Tareas de TableLayoutPanel, haga clic en cualquier parte del formulario para cerrarla. Aprenderemos ms cosas sobre esta ventana ms adelante en el tutorial.

Nota

Observe que el Cuadro de herramientas se expande para abarcar el formulario cuando se hace clic en su pestaa, y se cierra cuando se hace clic fuera de l. Se trata de la caracterstica Ocultar automticamente del IDE. Puede activarla o desactivarla para cualquiera de las ventanas, haciendo clic en el icono del pin de la esquina superior derecha de la ventana, para alternar entre ocultarla automticamente y bloquearla en su lugar. El icono del pin tiene este aspecto.

Icono del pin

4. Asegrese de que TableLayoutPanel est seleccionado, haciendo clic en l. 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 que muestra el control TableLayoutPanel

5. 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 haciendo clic en ellos en el Diseador de Windows Forms o eligindolos en el selector de control. Ahora que TableLayoutPanel est seleccionado, busque la propiedad Dock y haga clic en Dock, que debera estar establecida en None. Observe que aparece una flecha de lista desplegable al lado del valor. Haga clic en la flecha y, a continuacin, seleccione el botn Fill (el botn grande del centro), como se muestra en la siguiente imagen. Ventana Propiedades con Fill seleccionado

6. Despus de establecer la propiedad Dock de TableLayoutPanel en Fill, el panel rellena el formulario completo. Si vuelve a cambiar el tamao del formulario, TableLayoutPanel permanecer acoplado y cambiar de tamao 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 botn, 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.

Nota

Aunque hemos dicho que cada celda puede contener un solo control, la celda inferior derecha tiene cuatro controles Button. Esto es porque se puede colocar un control en una celda que contiene otros controles. Este tipo de control se denomina contenedor, y TableLayoutPanel es un contenedor. Aprenderemos ms cosas sobre ello ms adelante en este tutorial.

7. Actualmente, TableLayoutPanel tiene dos filas del mismo tamao y dos columnas del mismo tamao. Tenemos que cambiar su tamao de modo que la fila superior y la columna derecha sean mucho mayores. En el Diseador de Windows Forms, seleccione TableLayoutPanel. En la esquina superior derecha, hay un botoncito triangular de color negro, con el siguiente aspecto. Botn triangular

Este botn indica que el control tiene tareas que le ayudan a establecer sus propiedades automticamente. 8. Haga clic en el tringulo para mostrar la lista de tareas del control, como se muestra en la siguiente imagen. Tareas de TableLayoutPanel

9. Haga clic en la tarea Editar filas y columnas para abrir la ventana Estilos de columna y fila. Haga clic en Column1 y establezca su tamao en el 15 por ciento; para ello, asegrese de que el botn Porcentaje y escriba 15 en el cuadro Porcentaje. (Se trata de un control NumericUpDown, que utilizar en un tutorial posterior.) Haga clic en Column2 y establzcala en el 85 por ciento. No haga clic todava en el botn Aceptar, porque la ventana se cerrar. (Si lo hace, puede volver a abrirla mediante la lista de tareas.) 10. En la lista desplegable Mostrar de la parte superior de la ventana, haga clic en Filas. Establezca Row1 en el 90 por ciento y Row2 en el 10 por ciento. 11. Haga clic en Aceptar. TableLayoutPanel debera tener ahora una fila superior grande, una fila inferior pequea, una columna izquierda pequea y una columna derecha grande. Puede cambiar el tamao de las filas y columnas de TableLayoutPanel arrastrando sus bordes. Paso 5: Agregar controles al formulario Visual Studio 2013 Visual Studio 2012 En este paso, se agregan controles, como un control PictureBox y un control CheckBox, al formulario. A continuacin, se agregan botones al formulario. Para agregar controles al formulario1. Vaya al Cuadro de herramientas y expanda el grupo Controles comunes. Se muestran los controles ms comunes que suelen aparecer en los formularios. 2. Haga doble clic en el control PictureBox. El IDE agrega un control PictureBox al formulario. Dado que TableLayoutPanel est acoplado de modo que rellene el formulario, el IDE agrega el control PictureBox a la primera celda vaca. 3. Haga clic en el tringulo negro del nuevo control PictureBox para abrir su lista de tareas, como se muestra en la siguiente imagen. Tareas de PictureBox

Nota

Si agrega accidentalmente un tipo equivocado de control a TableLayoutPanel, puede eliminarlo. Haga clic con el botn secundario en el control y seleccione Eliminar en el men. Tambin puede seleccionar Deshacer en el men Edicin para quitar controles del formulario.

4. Haga clic en el vnculo Acoplar en contenedor principal. Se establece automticamente la propiedad Dock de PictureBox en Fill. Para verlo, haga clic en el control PictureBox para seleccionarlo, vaya a la ventana Propiedades y asegrese de que la propiedad Dock est establecida en Fill. 5. Haga que PictureBox abarque ambas columnas cambiando su propiedad ColumnSpan. Seleccione el control PictureBox y establezca su propiedad ColumnSpan en 2. Adems, cuando el PictureBox est vaco, se debe mostrar un marco vaco. Establezca su propiedad BorderStyle en Fixed3D. 6. Agregue el control CheckBox al formulario. Haga doble clic en el elemento CheckBox del Cuadro de herramientas para que el IDE agregue un nuevo control CheckBox a la siguiente celda libre de la tabla. Como el control PictureBox ocupa las dos primeras celdas, el control CheckBox se agrega a la celda inferior izquierda. Seleccione el nuevo control CheckBox y establezca su propiedad Text en Stretch, como se muestra en la siguiente imagen. Control TextBox con la propiedad Stretch

7. Entre 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 del control PictureBox. A continuacin, acplelo en el contenedor primario (bien eligiendo Acoplar en contenedor principal en la lista de tareas o bien estableciendo su propiedad Dock en Fill.) Nota

FlowLayoutPanel es un contenedor que organiza otros controles en filas ordenadas. Al cambiar el tamao de FlowLayoutPanel, coloca todos los controles que contiene en una sola fila, siempre que tenga espacio para ello. De lo contrario, los organiza en lneas, uno encima de otro. Vamos a utilizar un control FlowLayoutPanel para contener cuatro botones.

Para agregar botones1. Seleccione el control FlowLayoutPanel que acaba de agregar. Vaya a Controles comunes en el Cuadro de herramientas y haga doble clic en el icono Button para agregar un botn denominado button1 a FlowLayoutPanel. Repita el proceso para agregar otro botn. El IDE determina que ya hay un botn denominado button1, de modo que denomina button2 al siguiente botn. Nota

En Visual Basic, los nombres de los botones llevan mayscula inicial, as que button1 ser Button1, button2 ser Button2, etc.

2. Normalmente, se agregan los dems botones mediante el Cuadro de herramientas. Esta vez, haga clic en button2 y seleccione Copiar en el men Edicin (o presione Ctrl+C). En el men Edicin, haga clic en Pegar (o presione Ctrl+V) para pegar una copia del botn. Vuelva a pegarlo otra vez. El IDE ha agregado button3 y button4. Nota

Puede copiar y pegar cualquier control. El IDE da nombre y coloca los nuevos controles de una manera lgica. Si se pega un control en un contenedor, el IDE elige el siguiente espacio lgico para colocarlo.

3. Seleccione el primer botn y establezca su propiedad Text en Mostrar una imagen. Luego, 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 dimensionar los botones y organizarlos de modo que estn alineados a la izquierda del panel. Seleccione el control FlowLayoutPanel y fjese en su propiedad FlowDirection. Cmbiela de modo que quede establecida en RightToLeft. En cuanto lo haga, los botones deberan alinearse a la derecha de la celda, en orden inverso de modo que el botn 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 hacer clic en uno de los botones y arrastrarlo a la izquierda o la derecha.

5. Haga clic en el botn Cerrar para seleccionarlo. Mantenga presionada la tecla CTRL y haga clic en los otros tres botones, para que todos estn seleccionados. Mientras todos los botones estn seleccionados, vaya a la ventana Propiedades y desplcese hacia arriba hasta la propiedad AutoSize. Esta propiedad indica al botn que cambie el tamao automticamente para ajustarse al texto que contiene. Establzcala en true. Ahora, los botones deberan tener el tamao y orden correctos. (Si los cuatro botones estn seleccionados, puede cambiar las cuatro propiedades AutoSize al mismo tiempo.) En la siguiente imagen se muestran los cuatro botones. Visor de imgenes con cuatro botones

6. Ahora, ejecute de nuevo el programa para ver el formulario que acaba de disear. Al hacer clic en los botones y la casilla todava no sucede nada, pero funcionarn pronto. Paso 6: Asignar un nombre a los controles de botn Visual Studio 2013 Visual Studio 2012 Hay solo un control PictureBox en el formulario. Al agregarlo, el IDE lo denomin automticamente pictureBox1. Solamente hay una casilla, denominada checkBox1. Pronto, escribir cdigo, y ese cdigo har referencia a CheckBox y PictureBox. Como no hay ms que un ejemplar de cada control, entender lo que significan los trminos pictureBox1 o checkBox1 cuando los vea en su cdigo. Nota

En Visual Basic, la primera letra del nombre de un control se pone en mayscula 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 cul es el botn Cerrar ni cul es el botn Mostrar una imagen. Por ello, resulta til dar nombres a los controles de botn. Para dar un nombre a los controles de botn1. Haga clic en el botn Cerrar. (Si todava estn seleccionados todos los botones, presione la tecla ESC para cancelar la seleccin.) Desplcese en la ventana Propiedades hasta que vea la propiedad (Name). (La propiedad (Name) se encuentra cerca de la parte superior cuando las propiedades estn por orden alfabtico.) 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 botn por BotnCerrar, con un espacio entre las palabras Botn y Cerrar, el IDE muestra el mensaje de error: "El valor de la propiedad no es vlido". 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 haciendo clic en la lista desplegable de seleccin de controles en la ventana Propiedades. Aparecern los nuevos nombres de los botones. 3. Haga doble clic en el botn Mostrar una imagen en el Diseador de Windows Forms. Al hacerlo, el IDE abre una nueva pestaa en la ventana principal denominada pestaa Form1.cs, como se muestra en la siguiente imagen. Pestaa Form1.cs con cdigo de Visual C#

4. Cntrese en esta parte del cdigo. C#VBCopiar

private void showButton_Click(object sender, EventArgs e){}

Se trata de un mtodo denominado showButton_Click(). El IDE lo agreg al hacer clic en el botn showButton. Este mtodo contiene cdigo que se ejecuta cuando se hace clic en el botn Mostrar una imagen. Nota

En este tutorial, el cdigo de Visual Basic que se genera automticamente se ha simplificado quitando todo lo que hay entre los parntesis (). Siempre que esto sucede, se puede quitar el mismo cdigo. El programa funcionar en ambos casos. En el resto de los tutoriales, se simplifica el cdigo generado automticamente siempre que sea posible.

5. Vaya a la pestaa del diseador (pestaa Form1.cs [Design] en Visual C# o Form1.vb [Design] en Visual Basic) y haga doble clic en el botn Borrar la imagen. Repita el procedimiento para los dos ltimos botones. Cada vez, el IDE agrega un nuevo mtodo al cdigo del formulario. 6. Haga doble clic en el control CheckBox en el Diseador de Windows Forms, para que el IDE agregue un mtodo checkBox1_CheckedChanged() ms. Se llama a este mtodo cada vez que el usuario activa o desactiva la casilla. Nota

Cuando se trabaja en un programa, a menudo se utilizan alternativamente el editor de cdigo y el Diseador de Windows Forms. El IDE facilita la navegacin en el proyecto. El Explorador de soluciones se utiliza para abrir el Diseador de Windows Forms haciendo doble clic en Form1.cs en Visual C# o en Form1.vb en Visual Basic.

7. A continuacin se muestra el nuevo cdigo que aparece en el editor de cdigo. 8. C#9. VB10. Copiar11. 12. private void clearButton_Click(object sender, EventArgs e)13. {14. }15. 16. private void backgroundButton_Click(object sender, EventArgs e)17. {18. }19. 20. private void closeButton_Click(object sender, EventArgs e)21. {22. }23. 24. private void checkBox1_CheckedChanged(object sender, EventArgs e)25. {26. }27. 28. Nota

Los cinco mtodos 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 hace clic en un botn o activa una casilla). Al hacer doble clic en un control en el IDE, este agrega un mtodo de control de eventos para ese control. Por ejemplo, cuando se hace doble clic en un botn, el IDE agrega un controlador para este evento Click (al que se llamar cada vez que el usuario haga clic en el botn). 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). Despus de agregar un controlador de eventos para un control, puede volver en cualquier momento a l desde el Diseador de Windows Forms haciendo doble clic en el control.

Paso 7: Agregar componentes de dilogo al formulario

Visual Studio 2013 Visual Studio 2012 En preparacin para la configuracin de los cuadros de dilogo Abrir archivo y Color (para elegir un color de fondo), en este paso se agrega 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 cdigo. Un componente es lo que abre un cuadro de dilogo Abrir archivo. Para agregar componentes de cuadro de dilogo al formulario1. Vaya al Diseador de Windows Forms y abra el grupo Cuadros de dilogo en el Cuadro de herramientas.

El grupo Cuadros de dilogo del Cuadro de herramientas tiene componentes que abren automticamente muchos cuadros de dilogo 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 dilogo: 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.) Debera aparecer un cuadro gris en la parte inferior del Diseador de Windows Forms, con un icono para cada uno de los dos componentes de cuadro de dilogo agregados, como se muestra en la siguiente imagen. Componentes de cuadro de dilogo

3. Vaya al Diseador de Windows Forms y haga clic en el icono openFileDialog1 en el cuadro gris de la parte inferior del diseador. Establezca dos propiedades: Establezca la propiedad Filter en lo siguiente (puede copiarlo y pegarlo): Archivos JPEG (*.jpg)|*.jpg|Archivos PNG (*.png)|*.png|Archivos BMP (*.bmp)|*.bmp|Todos los archivos (*.*)|*.* Establezca la propiedad Title en lo siguiente: Seleccionar un archivo de imagen

Para ver un ejemplo del cuadro de dilogo Abrir archivo en una aplicacin diferente, abra el Bloc de notas o Paint y haga clic en Abrir en el men Archivo. 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 tambin que las propiedades Title y Filter estn en negrita en la ventana Propiedades. El IDE lo hace para mostrarle todas las propiedades que han cambiado respecto de sus valores predeterminados.

Paso 8: Escribir cdigo para el controlador de eventos del botn Mostrar una imagen Visual Studio 2013 Visual Studio 2012 En este paso, conseguiremos que botn Mostrar una imagen funciona as: Cuando un usuario hace clic en ese botn, el programa abre un cuadro de dilogo Abrir archivo. Si un usuario elige 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 cdigo. Cuando se escribe cdigo, el IDE abre un cuadro con sugerencias para completar las palabras parciales que se escriben. Intenta determinar lo que se desea hacer a continuacin y salta automticamente 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 opcin que desea, presione la tecla TAB para seleccionarla. Otra opcin es pasar por alto las sugerencias, si no las necesita. Para escribir cdigo para el controlador de eventos de botn Mostrar una imagen1. Vaya al Diseador de Windows Forms y haga doble clic en el botn Mostrar una imagen. El IDE va inmediatamente al diseador de cdigo y mueve su cursor de modo para situarlo dentro del mtodo showButton_Click() que agreg previamente. 2. Escriba una i en la lnea vaca entre las dos llaves { }. (En Visual Basic, escriba en la lnea vaca entre Private Sub y End Sub.) Se abre una ventana IntelliSense, como se muestra en la siguiente imagen. IntelliSense con cdigo de Visual C#

3. La ventana IntelliSense debe mostrar resaltada la palabra if. (De lo contrario, escriba una f minscula, y lo har.) Observe que la informacin sobre herramientas amarilla que se encuentra al lado de la ventana IntelliSense muestra Fragmento de cdigo para instruccin if. (En Visual Basic, la informacin sobre herramientas dice tambin que se trata de un fragmento de cdigo, pero con una redaccin ligeramente diferente.) Este es el fragmento de cdigo que vamos a utilizar. Presione la tecla TAB para insertar if en el cdigo. A continuacin, presione de nuevo la tecla TAB para utilizar el fragmento de cdigo if. (Si ha hecho clic en alguna otra parte y ha desaparecido la ventana IntelliSense, borre la i con la tecla de retroceso y vuelva a escribirla; se volver a abrir la ventana IntelliSense.) Cdigo en Visual C#

4. A continuacin, utilice IntelliSense para escribir ms cdigo y abrir un cuadro de dilogo Abrir archivo. Si el usuario ha hecho clic en el botn Aceptar, el control PictureBox cargar el archivo seleccionado por el usuario. En los siguientes pasos se muestra cmo escribir el cdigo. Aunque los pasos son muchos, solamente habr que presionar unas cuantas teclas: 1. Comience con el texto seleccionado true del fragmento de cdigo. Escriba op para sobrescribirlo. (En Visual Basic, empieza con mayscula inicial, de modo que deber escribir Op.) 2. Se abre la ventana IntelliSense y muestra openFileDialog1. Presione TAB para seleccionarlo. (En Visual Basic, empieza con mayscula inicial, de modo que aparecer OpenFileDialog1. Asegrese de que OpenFileDialog1 est seleccionado.) 3. Escriba un punto (.) (En ingls se denomina period o dot.) Dado que escribi un punto justo despus de openFileDialog1, se abre una ventana IntelliSense, que contiene todas las propiedades y los mtodos de componente de OpenFileDialog. Se trata de las mismas propiedades que aparecen en la ventana Propiedades al hacer clic en este componente en el Diseador de Windows Forms. Hay tambin mtodos que pueden ordenar al componente que realice acciones (como abrir un cuadro de dilogo).

La ventana IntelliSense puede mostrar propiedades y mtodos. Para determinar lo que est mostrando, fjese en el icono de la izquierda. Se muestra una imagen de un bloque junto a cada mtodo y una imagen de una mano junto a cada propiedad. Adems, aparece un icono de rayo junto a cada evento. Estas imgenes se muestran como sigue.

4. Icono de mtodo 5.

6. Icono de propiedad 7.

8. Icono de evento 9.

10. Empiece a escribir ShowDialog (el uso de maysculas o minsculas no es significativo en IntelliSense). El mtodo ShowDialog() mostrar el cuadro de dilogo Abrir archivo. Cuando la ventana haya resaltado ShowDialog, presione la tecla TAB. 11. Cuando se utiliza un mtodo con un control o un componente (lo que se denomina llamar a un mtodo), es preciso agregar parntesis. As pues, especifique los parntesis de apertura y cierre: ()

Los mtodos constituyen una parte importante de cualquier programa. En este tutorial se han mostrado varias maneras de utilizarlos. Se puede llamar al mtodo de un componente para ordenarle que haga algo, por ejemplo, como cuando llam al mtodo ShowDialog() del componente OpenFileDialog. Puede crear sus propios mtodos para que los programas realicen acciones, como el que estamos construyendo ahora que se denomina mtodo showButton_Click(), que abre un cuadro de dilogo y una imagen cuando un usuario hace clic en un botn.

12. Para Visual C#, agregue un espacio y, a continuacin, agregue dos signos igual (==). Para Visual Basic, agregue un espacio y, a continuacin, utilice un solo signo igual (=). (Visual C# y Visual Basic utilizan distintos operadores de igualdad.) 13. Agregue otro espacio. En cuanto haga, se abrir otra ventana IntelliSense. Empiece a escribir DialogResult y presione la tecla TAB para agregarlo.

Cuando se escribe cdigo para llamar a un mtodo, a veces devuelve un valor. En este caso, el mtodo ShowDialog() del componente OpenFileDialog devuelve un valor DialogResult. DialogResult es un valor especial que le indica lo que ha sucedido en un cuadro de dilogo. Un componente OpenFileDialog puede dar lugar a que el usuario haga clic en Aceptar o en Cancelar, de modo que el mtodo ShowDialog() devuelva DialogResult.OK o DialogResult.Cancel.

14. Escriba un punto para abrir la ventana IntelliSense del valor DialogResult. Escriba la letra O y presione la tecla TAB para insertar OK.

Deber quedar completa la primera lnea de cdigo. Para Visual C#, debera ser la siguiente. if (openFileDialog1.ShowDialog() == DialogResult.OK) Para Visual Basic, debera ser la siguiente. If OpenFileDialog1.ShowDialog() = DialogResult.OK Then

15. Ahora, agregue otra lnea de cdigo ms. Puede escribirla (o copiar y pegar), pero puede resultar interesante utilizar IntelliSense para agregarla. Cuanto ms se familiarice con IntelliSense, ms rpidamente podr escribir su propio cdigo. El mtodo showButton_Click() final tendr el siguiente aspecto. C#VBCopiar

private void showButton_Click(object sender, EventArgs e){ if (openFileDialog1.ShowDialog() == DialogResult.OK) { pictureBox1.Load(openFileDialog1.FileName); }}

Paso 9: Revisar, comentar y probar el cdigo Visual Studio 2013 Visual Studio 2012 Antes de agregar un comentario al cdigo y probarlo, dedique un tiempo a revisar los conceptos del cdigo, porque los utilizar con frecuencia: Cuando hizo doble clic en el botn Mostrar una imagen en el Diseador de Windows Forms, el IDE agreg automticamente un mtodo al cdigo del programa. Los mtodos permiten organizar el cdigo: son la manera de agrupar las partes del cdigo. Casi siempre, un mtodo realiza una cantidad reducida de acciones en un orden concreto; por ejemplo, el mtodo showButton_Click() muestra un cuadro de dilogo y, a continuacin, carga una imagen. Un mtodo se compone de instrucciones. Podemos considerar que un mtodo es una manera de empaquetar instrucciones juntas. Cuando se ejecuta un mtodo, o se le llama, se ejecutan las instrucciones que contiene en orden, una tras otra, empezando por la primera. A continuacin, se muestra un ejemplo de una instruccin. C#CopiarpictureBox1.Load(openFileDialog1.FileName);pictureBox1.Load(openFileDialog1.FileName)Las instrucciones son lo que permite que el programa haga cosas.En Visual C#, una instruccin finaliza siempre en un signo de punto y coma.En Visual Basic, el final de una lnea es el final de una instruccin.(No se necesita indicar el signo de punto y coma en Visual Basic.) La instruccin anterior ordena al control PictureBox que cargue el archivo que el usuario seleccion con el componente OpenFileDialog.A continuacin, se agrega un comentario al cdigo. Un comentario es una nota que no cambia la forma de comportarse del programa. Hace que resulte ms fcil entender qu hace el cdigo. En Visual C#, se utilizan dos barras diagonales (//) para marcar una lnea como comentario. En Visual Basic, se utiliza una comilla sencilla (') para marcar una lnea como comentario. Despus de agregar un comentario, se prueba el programa. Acaba de compilar algo que funciona y, aunque todava no est terminado, ya es capaz de cargar una imagen. Para agregar comentarios1. Agregue lo siguiente. C#VBCopiar

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); }}

El controlador de eventos Click del botn showButton ya est completado y funciona. Ha empezado a escribir cdigo, comenzando por una instruccin if. Una instruccin if es la manera de ordenar al programa: "Compruebe esto y, si se cumple, realice estas acciones". En este caso, se ordena al programa que abra el cuadro de dilogo Abrir archivo y, si el usuario selecciona un archivo y hace clic en el botn Aceptar, ese archivo se carga en PictureBox.

El IDE se ha creado para facilitar la tarea de escribir cdigo. Los fragmentos de cdigo constituyen una manera de conseguirlo. Un fragmento de cdigo es un acceso directo que se expande para crear un bloque pequeo de cdigo. Puede ver todos los fragmentos de cdigo seleccionando Administrador de fragmentos de cdigo en el men Herramientas. El fragmento de cdigo if se encuentra en Modelos de cdigo, en la subcarpeta Condicionales y bucles. Este administrador se puede utilizar para examinar los fragmentos de cdigo existentes o agregar los suyos propios. Para activar un fragmento de cdigo al escribir cdigo, escrbalo y presione la tecla TAB. Muchos fragmentos de cdigo aparecen en la ventana IntelliSense, motivo por el cual la tecla TAB se presiona dos veces: la primera, para seleccionar el fragmento de cdigo en la ventana IntelliSense y, la segunda, para ordenar al IDE que lo utilice. (IntelliSense admite el fragmento de cdigo if, pero no el fragmento de cdigo ifelse.)

2. Antes de ejecutar el programa, gurdelo haciendo clic en el botn de la barra de herramientas Guardar todo, que se muestra a continuacin. Botn Guardar todo

Como alternativa, puede hacer clic en Guardar todo en el men Archivo. El procedimiento recomendado consiste en guardar desde el principio y a menudo. Mientras se ejecuta, el programa debera parecerse a la siguiente imagen. Visor de imgenes

Para probar el programa1. Presione la tecla F5 o haga clic en el botn Iniciar depuracin de la barra de herramientas. 2. Haga clic en el botn Mostrar una imagen para ejecutar el cdigo que acaba de escribir. Primero, el programa abre un cuadro de dilogo Abrir archivo. Compruebe que los filtros aparecen en la lista desplegable Tipo de archivo en la parte inferior del cuadro de dilogo. A continuacin, navegue hasta una imagen y brala. Normalmente, encontrar imgenes de ejemplo que se distribuyen con el sistema operativo Windows en la carpeta Mis documentos, dentro de la carpeta Mis imgenes\Sample Pictures. 3. Cargue una imagen y esta aparecer en el control PictureBox. A continuacin, intente cambiar el tamao del formulario. 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 tamao del formulario correcto cuando el usuario lo modifica. Paso 10: Crear botones adicionales y una casilla Visual Studio 2013 Visual Studio 2012 Ahora, est listo para completar los otros cuatro mtodos. Podra copiar y pegar este cdigo, pero si desea aprender lo mximo con este tutorial, escriba el cdigo y utilice IntelliSense.

El procedimiento recomendado es comentar siempre el cdigo. Los comentarios son informacin que leern otras personas y merece la pena dedicar tiempo a hacer que el cdigo resulte fcil de entender. El programa pasa por alto todo lo que hay en una lnea de comentario. En Visual C#, para marcar una lnea como comentario se escriben dos barras diagonales (//) al principio. En Visual Basic, se utiliza para ello una comilla sencilla (').

Para crear botones adicionales y una casilla Agregue el cdigo siguiente: C#VBCopiar

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;}Paso 11: Ejecutar el programa y probar otras caractersticas Visual Studio 2013 Visual Studio 2012 El programa est finalizado y listo para ejecutarse. Puede ejecutarlo y establecer el color de fondo. Para aprender ms, intente mejorar el programa cambiando el color del formulario, personalizando los botones y la casilla, y cambiando las propiedades del formulario. Para ejecutar el programa y establecer el color de fondo1. Presione F5 o haga clic en el botn Iniciar depuracin de la barra de herramientas. 2. Antes de abrir una imagen, haga clic en el botn Establecer el color de fondo. Se abrir el cuadro de dilogo Color. Cuadro de dilogo Color

3. Seleccione un color para establecer el color de fondo de PictureBox. Fjese con atencin en el mtodo backgroundButton_Click() para entender cmo funciona. Nota

Puede cargar una imagen de Internet pegando su direccin URL en el cuadro de dilogo Abrir archivo. Intente encontrar una imagen con un fondo transparente, para que se vea el color de fondo.

4. Haga clic en el botn Borrar la imagen para asegurarse de que se borra. A continuacin, salga del programa haciendo clic en el botn Cerrar. Para probar otras caractersticas 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. Utilice las propiedades AcceptButton y CancelButton del formulario para que se haga clic automticamente en los botones cuando el usuario presione las teclas ENTRAR o ESC. Haga que el programa abra el cuadro de dilogo Abrir archivo cuando el usuario presione ENTRAR y lo cierre cuando el usuario presione ESC.