Sie sind auf Seite 1von 28

Tutorial 01: Crear un visor de imgenes 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 u nuevo proyecto. Probar (depurar) una aplicacin. Agregar controles bsicos, como casillas y botones, a un formulario. Colocar controles a 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

Tutorial Descripcin Paso 1: Crear un proyecto de aplicacin de Empezar a crear un proyecto de aplicacin de Windows Forms. Windows Forms Paso 2: Ejecutar el programa Ejecuta el programa de aplicacin de Windows Forms que se cre en el paso anterior. Paso 3: Establecer las propiedades del Cambiar el aspecto del formulario formulario mediante la ventana de Propiedades. Paso 4: Disear un formulario con un control Agregar un control TableLayout Panel al TableLayoutPanel formulario. Agregar controles, como PictureBox y Paso 5: Agregar controles al formulario CheckBox, al formulario. Agregar botones al formulario. Paso 6: Asignar un nombre a los controles Cambiar el nombre de los botones por de botn otros ms significativos. Paso 7: Agregar componentes de dilogo al Agregar un componente OpenFileDialog y un componente ColorDialog al formulario

formulario. Paso 8: Escribir cdigo para el controlador Escribir cdigo mediante la herramienta IntelliSense. de eventos del botn Mostrar una imagen 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 Escribir cdigo para hacer que funcione casilla otros botones y una casilla mediante IntelliSense. Paso 11. Ejecutar el programa y probar otras Ejecutar el programa y establecer el color caractersticas de fondo. Probar con otras caractersticas, como cambiar colores, fuentes y bordes.

Paso 1: Crear un proyecto de aplicacin de Windows Forms


El primer paso para crear un visor de imgenes es crear un proyecto de aplicacin de Windows Forms. Para crear un proyecto de aplicacin de Windows Forms. 1. En el men Archivo, haga en Nuevo proyecto. 2. Primero debe seleccionar un lenguaje. En 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 contenidos en la carpeta Mis documentos). Seguramente habr notado que las palabras solucin y proyecto tienen significados diferentes, que se explicar ms adelante en este tutorial. La siguiente imagen muestra el aspecto que debe tener la ventana del IDE. Ventana del IDE

8. Si la pantalla no se parece a 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 una ventana abierta de ms, haga clic en el botn Cerrar (X) de la parte superior derecha. 9. 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]. 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 clice n una archivo de cdigo (que finaliza en .cs para Visual C#), se abre el archivo de cdigo o un diseador para l. Ventana Propiedades: es donde se cambia las propiedades de los elementos seleccionados en las otras ventanas.

Nota: 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


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 programa 1. Presione la tecla F5 o haga clic en el botn de la barra de herramientas Iniciar depuracin, que aparece como sigue. 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 en 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


A continuacin, se utiliza la ventana Propiedades para cambiar la apariencia del formulario. Para establece las propiedades del formulario 1. Asegrese de que est en el Diseador de Windows Forms. En el IDE, haga clic en la pestaa Forms1.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 el 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 botn Detener depuracin cuadrado (o simplemente cierre la ventana). 3. Una vez seleccionado el formulario, desplcese hasta la parte inferior de la ventana de 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 alfabticas. Puede alterar entre estas dos vistas utilizando los botones de la ventana Propiedades. En este tutorial, resulta ms fcil encontrar las propiedades en la vista albabetica. 4. Vuelve 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 en 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. 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


En este paso, agregar un control TableLayoutPanel. Para disear el formulario con un control TableLayoutPanel 1. 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 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 que 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 en 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 TbleLayoutPanel est seleccionado, busque la propiedad Dock y haciendo 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, seleccin el botn Fill (el botn grande del control), como 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 fulas 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 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 TableLayouPanel es un contendor. 7. Aprenderemos ms cosas sobre ello ms adelante en este tutorial. Actualmente, TbleLayoutPanel 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 Windows Froms, 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 Estilo de columna y fila. Haga clic en Clumn1 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 todava clic en el botn Aceptar, porque la ventana se cerrar. (Si lo hace, 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 del as filas y columnas de TableLayoutPanel arrastrando sus bordes.

Paso 5: Agregar controles al formulario


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 formulario 1. Vaya al cuadro de herramientas y expanda el grupo Controles comunes. Se muestra los controles ms comunes que suelen aparecer en los formularios. 2. Haga doble clic en el control PictureBox. El IDE agregar un control PictureBox al formulario. Dado que el 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 se agrega accidentalmente un tipo equivocado de control a TableLayoutPanel, puede eliminarlo. Haga clic en 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 est establecida 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 en la celda inferior izquierda. Seleccione el nuevo CheckBox y establezca su propiedad Text en Stretch, como se muestra en la siguiente imagen. Control TextBox con la propiedad Estretch

7. Entre el 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 botones 1. 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 elproceso 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 nombre 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 selecciones Copiar en el men Edicin (o precione Ctrl + C). En el men Edicn, haga clic en Pegar (o presione Ctrl + V) para pegar una copia del botn. Vuelva apegarlo 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 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 Borra 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 nRightToLeft. 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 arrastrarlos 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 muestra 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 los botones y la casilla todava no sucede nada, pero funcionar pronto.

Paso 6: Asignar un nombre a los controles de botn


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 en cada control, entender lo que significa 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, CheckBox1n, ect. 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 botn 1. Haga clic en el botn Cerrar. (Si todava estn relacionados 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 figura. Ventana Propiedades con el nombre closeButton

Nota: Si intenta cambiar el nombre del botn por BotnCenter, con un espacio entre las palabras Botn y Cerrar, el IDE muestra el mensaje 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 de 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 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#


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 tiene 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 parntesis (). Siempre que esto sucede, se puede quitar el mismo cdigo. El programa funciona 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 trabaja con 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. A continuacin se muestra el nuevo cdigo en el editor de cdigo. 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) { }

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 usuario en el botn). Cuando se hace doble clic en una casilla, el IDE agrega un controlador para el evento CheckedChanged correspondiente (al que se llamara 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 Nota: Los nombres son importantes al compilar programas. Los mtodos (incluso los controladores de eventos) pueden tener cualquier nombre que desee. Al agregar un controlador de eventos con el IDE , este elige un nombre basado en el nombre del control y en el evento que se controla. Por ejemplo, el evento Click para un botn denominado showButton se denomina mtodo de control de eventos showButton_Click(). Adems, se suele agregar parntesis de apertura y cierre () despus del nombre del mtodo para dejar claro que se trata de un mtodo.

Paso 7: Agregar componentes de dilogo al formulario


En preparacin con 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. 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 propiedad Propiedades. Sin embargo, a diferencia de un control, al agregar un componente al formulario no se agrega un elemento visible que el usuario pueda 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 un componentes de cuadro de dilogo al formulario 1. Vaya al diseador de Windows Forms y abra el grupo Cuadros de dilogo en el Cuadro de Herramientas.

Nota: El grupo Cuadros de dilogo del Cuadro de herramientas tiene componentes que abre 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 del 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 clic en ColorDialog en el cuadro de herramientas. (Este se utiliza en el siguiente paso al tutorial). Debera aparecer un cuadro gris en la parte inferior del Diseador de Windows Forms, como un icono para cada uno de los dos componentes de cuadro de dilogo agregados, como se muestra en la siguiente imagen. Componente 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|Archivo PNG (*.png)|*.png|Archivo BMP (*.bmp)|*bmp|Todos los archivos (*.*)|*.* Establezca la propiedad Title en lo siguiente: Seleccionar un archivo de imagen Nota: 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 que tambin 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.

Poso 8: escribir cdigo para el controlador de eventos del botn Mostrar una imagen
En este paso, conseguiremos que botn Mostrar una imagen funciona as:

Cuando un usuario hace clic ene se 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 escribir cdigo. Cuando se escribe cdigo, el IDE abre un cuadro con sugerencias para completar las palabras parciales que se escriben. Intenta determina lo que se desea hacer a continuacin y salta automticamente el 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 imagen 1. Vaya al Diseador de Windows Forms y haga doble clic en el botn Mostrar 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 habre 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 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 retroceso y vuelve 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: a) 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). b) 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). c) Escriba un punto (.) (En ingls se denomina period o dot.) Dado que escribin 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 hace 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). Nota: 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.

Icono de mtodo

Icono de propiedad

Icono de evento

d) 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. e) 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: () Nota: 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. f) Para Visual C#, agregue un espacio y, a continuacin, agregue dos signos igual (==). Para Visual Basic, agregue un espacio y, a continuacin utilice 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 presione la tecla TAB para agregarlo. Nota: 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 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.

h) Escriba un punto para abrir la ventana IntelliSense del valor DIalogResutl. Escriba la letra O y presione la tecla TAB para insertar Ok. Nota: 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. i) Ahora, agregue otra lnea de cdigo ms. Puede escribirla o copiarla (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#
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 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 instruccin. C# pictureBox1.Load(openFileDialog1.FileName); pictureBox1.Load(openFileDialog1FileName)

Las instrucciones son los que permiten 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 puto y coma en Visual Basic). La instruccin anterior ordena al control PictureBox que cargue el archivo que el usuario seleccin 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 utiliza 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 comentarios 1. Agregue lo siguiente. 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 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. Nota: 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 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 administrado se puede utilizar para examinar los fragmentos de cdigo existentes o agregar los suyos propios. Para activar un fragmento de cdigo, escrbalo y presione la tecla TAB. Muchos fragmentos de cdigo aparecen en la ventana IntelliSense, motivo por el cual la tecla TAB se presionados 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 al fragmento de cdigo if, pero no el fragmento de cdigo ifelse). 2. Antes de ejecutar el programa, gurdelo haciendo clic en el bot 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 programa 1. 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 Tipos 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 distribuye 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 elcontrol PictureBox. A continuacin, intente cambiar el tamao del formulario. Como el control PictureBox est acoplado dentro de un control TableLayoutPanel y FlowLayoutPanel: mantienen el tamao del formulario correcto cuando el usuario lo modifica.

Paso 10: Crear botones adicionales y una casilla


Ahora, est listo para completar los otros cuatro mtodos. Podra copiar y pegar en este cdigo pero si desea aprender lo mximo con este tutorial, escriba el cdigo y utilice IntelliSense. Nota: El procedimiento recomendado es comentar siempre el cdigo. Loscomentarios son informacin que leern otras personas y merece la pena dedicar el 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 siguiente cdigo 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; }

Paso 11: Ejecutar el programa y probar otras caractersticas


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 fondo 1. 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 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.