Tutorial 1: Crear un Visor de Imagen

En este tutorial, se compilar un programa que carga una imagen de un archivo y la muestra en una ventana. Se 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 se empezar a escribir cdigo. Se aprender a: Crear un nuevo proyecto. Probar (depurar) una aplicacin. Agregar controles bsicos, como casillas y botones. Colocar controles en un formulario mediante los diseos. Agregar los cuadros de dilogo Abrir archivo y Color. Escribir cdigo mediante IntelliSense y fragmentos de cdigo. Escribir mtodos de control de eventos. Cuando se termine, el programa se parecer al de la ilustracin siguiente: Imagen que se crear en este Tutorial:

Paso 1: Crear un Proyecto de Aplicacin de Windows Forms 1. En el men Archivo, hacer clic en Nuevo Proyecto. 2. Hacer clic en el icono Aplicacin de Windows Forms, especificar el nombre PictureViewer y hacer clic en Aceptar. Visual Studio crea automticamente la solucin. 3. Hacer clic en Guardar todo en el men Archivo, o en el botn Guardar todo de la barra de herramientas. 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. 4. Asegurarse que el proyecto se guarda en una carpeta que pertenezca a la carpeta Mis documentos. 5. Comprobar que est activada la casilla Crear directorio para la solucin. 6. Hacer clic en Guardar. 7. La siguiente imagen muestra el aspecto que debe tener la ventana del IDE:

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. Si la pantalla no se parece a la imagen anterior, hacer clic en Restablecer Diseo de la Ventana en el men Ventana. Si falta cualquiera de las ventanas, hacer clic en Ventana Propiedades o Explorador de soluciones en el men Vista. Si hay abierta alguna ventana de ms, hacer clic en el botn Cerrar (x) de la parte superior derecha. 9. 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 se hace doble clic en un archivo de cdigo (que finaliza en .cs), 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. NOTA: Observar 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. Paso 2: Ejecutar el Programa Al crear una solucin, en realidad se compil un programa que se ejecutar. Todava no hace gran cosa; se limita a mostrar una ventana vaca que muestra Form1 en la barra de ttulo. 1. Presionar la tecla F5 o hacer clic en el botn Iniciar depuracin de la barra de herramientas. 2. El IDE ejecuta el programa y aparece una ventana. En la siguiente imagen se muestra el programa que se ha compilado: Programa de aplicacin de Windows Forms en ejecucin

3. Regresar al IDE y examinar la nueva barra de herramientas: Barra de herramientas de depuracin

4. Hacer clic en el botn Detener depuracin cuadrado, o bien hacer clic en Detener depuracin en el men Depuracin. El programa dejar de ejecutarse y se cerrar la ventana. Tambin se 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 1. Asegurarse de que se est en el Diseador de Windows Forms. En el IDE, hacer clic en la pestaa Form1.cs [Design] 2. Hacer clic en cualquier parte del formulario para seleccionarlo. Examinar la ventana Propiedades, que ahora debera mostrar las propiedades del formulario: color del primero plano y del fondo, el texto de ttulo que aparece en la parte superior del formulario, el tamao del formulario y otras propiedades ms. NOTA: Si la ventana Propiedades no aparece, detener el programa haciendo clic en el botn Detener depuracin cuadrado (o simplemente cerrar la ventana). 3. Una vez seleccionado el formulario, desplazarse hasta la parte inferior de la ventana Propiedades y buscar la propiedad Text. Hacer clic en Text, escribir Visor de imgenes y presionar 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:

NOTA: Las propiedades se pueden ordenar en vistas por categoras o alfabtica. Se puede alternar entre estas dos vistas utilizando los botones de la ventana Propiedades. 4. Volver al Diseador de Windows Forms. Hacer 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 aspecto mostrado en la siguiente figura. Luego, arrastrarlo para cambiar el tamao del formulario de modo que resulte ms ancho y un poco ms alto.

5. En la ventana Propiedades, Size ha cambiado. La propiedad Size cambia cada vez que se cambia el tamao del formulario. Probar arrastrar el formulario para cambiar su tamao a unas medidas aproximadas de 550, 350, que deberan funcionar bien para este proyecto. 6. Ejecutar el programa de nuevo, presionando la tecla F5 o haciendo clic en el botn Iniciar depuracin de la barra de herramientas Exactamente igual que antes, el IDE compila y ejecuta el programa, y aparece una ventana. 7. Antes de ir al paso siguiente, detener el programa, porque el IDE no permitir cambiarlo mientras est en ejecucin. Paso 4: Disear un Formulario con un Control TableLayoutPanel 1. Ir al Diseador de Windows Forms. En el lado izquierdo del formulario, buscar la pestaa Cuadro de herramientas. Situar el puntero del mouse en la pestaa Cuadro de herramientas o tambin, en el men Ver, hacer clic en Cuadro de herramientas. 2. Hacer clic en el signo + situado junto al grupo Contenedores para abrirlo, como se muestra en la siguiente imagen:

3. Se puede agregar controles como botones, casillas y etiquetas al formulario. Hacer 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.

NOTA: Si despus de agregar el control TableLayoutPanel, aparece una ventana dentro del formulario con el ttulo Tareas de TableLayoutPanel, hacer clic en cualquier parte del formulario para cerrarla. Observar 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. Se puede activar o desactivar 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: 4. Asegurarse de que TableLayoutPanel est seleccionado, haciendo clic en l. Se 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:

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. Se pueden 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, buscar la propiedad Dock y hacer clic en l, que debera estar establecida en None. Observar que aparece una flecha de lista desplegable al lado del valor. Hacer clic en la flecha y, a continuacin, seleccionar el botn Fill (el botn grande del centro), como se muestra en la siguiente imagen:

6. Despus de establecer la propiedad Dock de TableLayoutPanel en Fill, el panel rellena el formulario completo. Si se 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. Aunque cada celda puede contener solo un 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. 7. Actualmente, TableLayoutPanel tiene dos filas del mismo tamao y dos columnas del mismo tamao. Se tiene que cambiar su tamao de modo que la fila superior y la columna derecha sean mucho mayores. En el Diseador de Windows Forms, seleccionar TableLayoutPanel. En la esquina superior derecha, hay un botoncito triangular de color negro que indica que el control tiene tareas que le ayudan a establecer sus propiedades automticamente. 8. Hacer clic en el tringulo para mostrar la lista de tareas del control, como se muestra en la siguiente imagen:

9. Hacer clic en la tarea Editar filas y columnas para abrir la ventana Estilos de columna y fila. Hacer clic en Column1 y establecer su tamao en el 15%; para ello, escribir 15 en el cuadro Porcentaje. Hacer clic en Column2 y establecerla en el 85%. No hacer clic an en el botn Aceptar, porque la ventana se cerrar. (Si se cierra, se puede volver a abrir mediante la lista de tareas.) 10. En la lista desplegable Mostrar de la parte superior de la ventana, hacer clic en Filas. Establecer Row1 en el 90% y Row2 en el 10%. 11. Hacer clic en Aceptar. TableLayoutPanel debera tener ahora una fila superior grande, una fila inferior pequea, una columna izquierda pequea y una columna derecha grande. Se puede cambiar el tamao de las filas y columnas de TableLayoutPanel arrastrando sus bordes. Paso 5: Agregar Controles PictureBox y CheckBox al Formulario. 1. Ir al Cuadro de herramientas y expandir el grupo Controles comunes. Se muestran los controles ms comunes que suelen aparecer en los formularios. 2. Hacer 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. Hacer clic en el tringulo negro del nuevo control PictureBox para abrir su lista de tareas, como se muestra en la siguiente imagen:

NOTA: Si se agrega accidentalmente un tipo equivocado de control a TableLayoutPanel, este puede ser eliminado, haciendo clic con el botn secundario en el control y seleccionando Eliminar en el men. Tambin se puede seleccionar Deshacer en el men Edicin para quitar controles del formulario. 4. Hacer clic en el vnculo Acoplar en contenedor principal. Se establece automticamente la propiedad Dock de PictureBox en Fill. Para verlo, hacer clic en el control PictureBox para seleccionarlo, ir a la ventana Propiedades y asegurarse de que la propiedad Dock est establecida en Fill. 5. Hacer que PictureBox abarque ambas columnas cambiando su propiedad ColumnSpan. Seleccionar el control PictureBox y establecer su propiedad ColumnSpan en 2. Adems, cuando el PictureBox est vaco, se debe mostrar un marco vaco. Establecer su propiedad BorderStyle en Fixed3D. 6. Agregar el control CheckBox al formulario. Hacer 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. Seleccionar el nuevo control CheckBox y establecer su propiedad Text en Stretch, como se muestra en la siguiente imagen:

7. Entrar al grupo Contenedores del Cuadro de herramientas (donde se obtuvo el control TableLayoutPanel) y hacer doble clic en el elemento FlowLayoutPanel para agregar un nuevo control a la ltima celda del control PictureBox. A continuacin, acoplarlo 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, colocar todos los controles que contiene en una sola fila, siempre que tenga espacio para ello. De lo contrario, organizarlos en lneas, uno encima de otro. Se va a utilizar un control FlowLayoutPanel para contener cuatro botones. 8. Seleccionar el control FlowLayoutPanel que se acaba de agregar. Ir a Controles comunes en el Cuadro de herramientas y hacer doble clic en el icono Button para agregar un botn denominado button1 a FlowLayoutPanel. Repetir el proceso para agregar otro botn. El IDE determina que ya hay un botn denominado button1, de modo que denomina button2 al siguiente botn. 9. Normalmente, se agregan los dems botones mediante el Cuadro de herramientas. Esta vez, hacer clic en button2 y seleccionar Copiar en el men Edicin (o presionar Ctrl+C). En el men Edicin, hacer clic en Pegar (o presionar Ctrl+V) para pegar una copia del botn. Volver a pegarlo otra vez. El IDE ha agregado button3 y button4.

NOTA: Se 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. 10. Seleccionar el primer botn y establecer su propiedad Text en Mostrar una imagen. Luego, establecer las propiedades Text de los otros tres botones siguientes en Borrar la imagen, Establecer el color de fondo y Cerrar. 11. El paso siguiente consiste en dimensionar los botones y organizarlos de modo que estn alineados a la izquierda del panel. Seleccionar el control FlowLayoutPanel y fjarse en su propiedad FlowDirection. Cambiarla de modo que quede establecida en RightToLeft. En cuanto est hecho, 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, pueden ser arrastrados alrededor de FlowLayoutPanel para reorganizarlos en cualquier orden. Se puede hacer clic en uno de los botones y arrastrarlo a la izquierda o la derecha. 12. Hacer clic en el botn Cerrar para seleccionarlo. Mantener presionada la tecla CTRL y hacer clic en los otros tres botones, para que todos estn seleccionados. Mientras todos los botones estn seleccionados, ir a la ventana Propiedades y desplazarse hacia arriba hasta la propiedad AutoSize. Esta propiedad indica al botn que cambie el tamao automticamente para ajustarse al texto que contiene. Establecerla en true. Ahora, los botones deberan tener el tamao y orden correctos. (Si los cuatro botones estn seleccionados, se puede cambiar las cuatro propiedades AutoSize al mismo tiempo.) En la siguiente imagen se muestran los cuatro botones:

13. Ahora, ejecutar 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. Paso 6: Asignar Nombres Significativos a los Controles de Botn Hay slo un control PictureBox en el formulario. Al agregarlo, el IDE lo denomin automticamente pictureBox1. Solamente hay una casilla, denominada checkBox1. Pronto se escribir cdigo, y ese cdigo har referencia a CheckBox y PictureBox. Como no hay ms que un ejemplar de cada control, se entender lo que significan los trminos pictureBox1 o checkBox1 cuando aparezcan en el cdigo. Hay cuatro botones en el formulario, que el IDE ha denominado button1, button2, button3 y button4. Slo con mirar los nombres actuales no se sabe cul es el botn Cerrar ni cul es el botn Mostrar una imagen. Por ello, resulta til dar nombres a los controles de botn. 1. Hacer clic en el botn Cerrar. (Si todava estn seleccionados todos los botones, presionar la tecla ESC para cancelar la seleccin.) Desplazarse en la ventana Propiedades hasta que aparezca la propiedad (Name). (La propiedad (Name) se encuentra cerca de la parte superior cuando las propiedades estn por orden alfabtico.) Cambiar el nombre a closeButton, como se muestra en la siguiente imagen:

NOTA: Si se 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. Cambiar el nombre de los otros tres botones a backgroundButton, clearButton y showButton. Se 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. Hacer 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:

3.

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. 4. Ir a la pestaa del diseador (pestaa Form1.cs [Design]) y hacer doble clic en el botn Borrar la imagen. Repetir el procedimiento para los dos ltimos botones. Cada vez, el IDE agrega un nuevo mtodo al cdigo del formulario. 5. Hacer 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 6. A continuacin se muestra el nuevo cdigo que aparece en el editor de cdigo: private private private private void void void void clearButton_Click(object sender, EventArgs e) { } backgroundButton_Click(object sender, EventArgs e) { } closeButton_Click(object sender, EventArgs e) { } checkBox1_CheckedChanged(object sender, EventArgs e) { }

NOTA: Los cinco mtodos que se han 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, se puede volver en cualquier momento a l desde el Diseador de Windows Forms haciendo doble clic en el control. Los nombres son importantes al compilar programas. Los mtodos (incluso los controladores de eventos) pueden tener cualquier nombre que se 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 suelen agregar parntesis de apertura y cierre () despus del nombre para dejar claro que se trata de un mtodo. Paso 7: Agregar Componentes de Dilogo al Formulario En preparacin para la configuracin de los cuadros de dilogo Abrir archivo y Color (para elegir un color de fondo), se debe 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 cdigo. Un componente es lo que abre un cuadro de dilogo Abrir archivo. 1. Ir al Diseador de Windows Forms y abrir el grupo Cuadros de dilogo en el Cuadro de herramientas. NOTA: 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 openFileDialog1 al formulario, hacer doble clic en OpenFileDialog. Para agregar un componente denominado colorDialog1 al formulario, hacer doble clic en ColorDialog en el Cuadro de herramientas. 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:

3. Ir al Diseador de Windows Forms y hacer clic en el icono openFileDialog1 en el cuadro gris de la parte inferior del diseador. Establecer dos propiedades: Filter (copiar y pegar): Archivos JPEG (*.jpg)|*.jpg|Archivos PNG (*.png)|*.png|Archivos BMP (*.bmp)|*.bmp|Todos los archivos (*.*)|*.* Title: Seleccionar un archivo de imagen NOTA: Para ver un ejemplo del cuadro de dilogo Abrir archivo en una aplicacin diferente, abrir el Bloc de notas o Paint y hacer clic en Abrir en el men Archivo. Observar que hay una lista desplegable de tipo de archivo en la parte inferior. Con ello, se acaba de utilizar la propiedad Filter del componente OpenFileDialog para configurarla. Observar tambin que las propiedades Title y Filter estn en negrita en la ventana Propiedades. El IDE lo hace para mostrar todas las propiedades que han cambiado respecto de sus valores predeterminados. Paso 8: Escribir Cdigo, con IntelliSense para el Controlador de Eventos del botn Mostrar una imagen En este paso, se conseguir que el botn Mostrar una imagen funcione as: Cuando un usuario hace clic en ese botn, el programa abrir un cuadro de dilogo Abrir archivo. Si un usuario elige un archivo de imagen, el programa mostrar 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. Se pueden utilizar las flechas arriba o abajo para moverse por la lista o bien continuar escribiendo letras para reducir las opciones propuestas. Cuando se encuentre la opcin deseada, presionar la tecla TAB para seleccionarla. Otra opcin es pasar por alto las sugerencias, si no las necesita. 1. Ir al Diseador de Windows Forms y hacer doble clic en el botn Mostrar una imagen. El IDE va inmediatamente al diseador de cdigo y mueve el cursor de modo de situarlo dentro del mtodo showButton_Click() que se agreg previamente. 2. Escribir una i en la lnea vaca entre las dos llaves { }. Se abre una ventana IntelliSense:

3. La ventana IntelliSense debe mostrar resaltada la palabra if. (De lo contrario, escribir una f minscula, y lo har.) Observar que la informacin sobre herramientas amarilla que se encuentra al lado de la ventana IntelliSense muestra Fragmento de cdigo para instruccin if. Este es el fragmento de cdigo que se va a utilizar. Presionar la tecla TAB para insertar if en el cdigo. A continuacin, presionar de nuevo la tecla TAB para utilizar el fragmento de cdigo if. (Si se ha hecho clic en alguna otra parte y ha desaparecido la ventana IntelliSense, borrar la i con la tecla de retroceso y volver a escribirla; se volver a abrir la ventana IntelliSense)

4. A continuacin, utilizar IntelliSense para escribir ms cdigo y abrir un cuadro de dilogo Abrir archivo. Si se 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. Comenzar con el texto seleccionado true del fragmento de cdigo. Escribir op b. Se abre la ventana IntelliSense y muestra openFileDialog1. Presionar TAB para seleccionarlo. c. Escribir un punto (.) Dado que se 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). NOTA: La ventana IntelliSense puede mostrar propiedades y mtodos. Para determinar lo que est mostrando, fjarse 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 . d. Empezar 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, presionar 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, especificar 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 se llama al mtodo ShowDialog() del componente OpenFileDialog. Se pueden crear mtodos propios para que los programas realicen acciones, como el mtodo showButton_Click(), que abre un cuadro de dilogo y una imagen cuando un usuario hace clic en un botn. f. Agregar un espacio y dos signos igual (==). g. Agregar otro espacio. Se abrir otra ventana IntelliSense. Empezar a escribir DialogResult y presionar 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. Escribir un punto para abrir la ventana IntelliSense del valor DialogResult. Escribir la letra O y presionar la tecla TAB para insertar OK. NOTA: Deber quedar completa la primera lnea de cdigo: if (openFileDialog1.ShowDialog() == DialogResult.OK) i. Agregar otra lnea de cdigo ms. Se puede escribir (o copiar y pegar), pero puede resultar interesante utilizar IntelliSense para agregarla. Cuanto ms se utilice IntelliSense, ms rpidamente se podr escribir cdigo propio. El mtodo showButton_Click() final tendr el siguiente aspecto: 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, se debe dedicar un tiempo a revisar los conceptos del cdigo, porque sern utilizados con frecuencia: Cuando se 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. Se puede 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: pictureBox1.Load(openFileDialog1.FileName); Las instrucciones son lo que permite que el programa haga cosas. En Visual C#, una instruccin finaliza siempre con un signo de punto y coma. 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. Despus de agregar el comentario, se debe probar el programa. Se acaba de compilar algo que funciona y, aunque todava no est terminado, ya es capaz de cargar una imagen. Agregar el siguiente comentario (escrito en verde): private void showButton_Click(object sender, EventArgs e) { // Muestra Open File dialog. // Si el usuario, di clic en OK, cargar la imagen seleccionada. if (openFileDialog1.ShowDialog() == DialogResult.OK) { pictureBox1.Load(openFileDialog1.FileName); } }

NOTA: El controlador de eventos Click del botn showButton ya est completado y funciona. Se ha empezado a escribir cdigo, comenzando por una instruccin if. 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. Se pueden 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, se debe escribir y presionar 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. Antes de ejecutar el programa, guardarlo haciendo clic en el botn de la barra de herramientas Guardar todo Como alternativa, se puede hacer clic en Guardar todo del 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:

Para Probar el Programa

1. Presionar la tecla F5 o hacer clic en el botn Iniciar depuracin de la barra de herramientas. 2. Hacer clic en el botn Mostrar una imagen para ejecutar el cdigo escrito. Primero, el programa abre un cuadro de dilogo Abrir archivo. Comprobar que los filtros aparecen en la lista desplegable Tipo de archivo en la parte inferior del cuadro de dilogo. A continuacin, navegar hasta una imagen y abrirla. Normalmente, se encontrarn 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. Cargar una imagen y esta aparecer en el control PictureBox. A continuacin, intentar 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% superior del formulario. Por este motivo, se han utilizado los contenedores TableLayoutPanel y FlowLayoutPanel que mantienen el tamao del formulario correcto cuando el usuario lo modifica. Paso 10: Crear Botones Adicionales y una Casilla Ahora, ya se pueden completar los otros cuatro mtodos. Se podra copiar y pegar 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. 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.

private void clearButton_Click(object sender, EventArgs e) { // Limpia la imagen pictureBox1.Image = null; } private void backgroundButton_Click(object sender, EventArgs e) { // Muestra el cuadro de dilogo de color. // Si el usuario hace clic en OK, cambia el color del fondo por el seleccionado if (colorDialog1.ShowDialog() == DialogResult.OK) pictureBox1.BackColor = colorDialog1.Color; } private void closeButton_Click(object sender, EventArgs e) { // Cierra el formulario this.Close(); } private void checkBox1_CheckedChanged(object sender, EventArgs e) { // Si el usuario hace clic en Stretch check box, cambia el tamao // Si el usuario limpia check box, vuelve al tamao 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. Se puede ejecutar y establecer el color de fondo. Para aprender ms, intentar mejorar el programa cambiando el color del formulario, personalizando los botones y la casilla, y cambiando las propiedades del formulario. 1. Presionar F5 o hacer clic en el botn Iniciar depuracin de la barra de herramientas. 2. Antes de abrir una imagen, hacer clic en el botn Establecer el color de fondo. Se abrir el cuadro de dilogo Color:

3. Seleccionar un color para establecer el color de fondo de PictureBox. Observar el mtodo backgroundButton_Click() para entender cmo funciona. NOTA: Se puede cargar una imagen de Internet pegando su direccin URL en el cuadro de dilogo Abrir archivo. Intentar encontrar una imagen con un fondo transparente, para que se vea el color de fondo. 4. Hacer clic en el botn Borrar la imagen para asegurarse de que se borra. A continuacin, salir del programa haciendo clic en el botn Cerrar. Para Probar Otras Caractersticas: Cambiar el color del formulario y de los botones mediante la propiedad BackColor. Personalizar los botones y la casilla mediante las propiedades Font y ForeColor. Cambiar las propiedades FormBorderStyle y ControlBox del formulario. Utilizar 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. Hacer que el programa abra el cuadro de dilogo Abrir archivo cuando el usuario presione ENTRAR y lo cierre cuando el usuario presione ESC.