Tutorial 1: Crear un visor de imagen

Visual Studio 2010

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 Agregar un control TableLayoutPanel al

control TableLayoutPanel
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 Revisar y probar el cdigo. Agregar comentarios

cdigo
segn sea necesario.

Paso 10: Crear botones adicionales y Escribir cdigo para hacer que funcionen otros
una casilla
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

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 Forms

1. 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:
o

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.)
o

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

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

A continuacin, se utiliza la ventana Propiedades para cambiar la apariencia del

formulario.
Para establecer las propiedades del formulario

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

En este paso, agregar un control TableLayoutPanel al formulario.

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

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

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

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 botn

1. 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#
VB
Copiar
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. VB
10.Copiar
11.
12.
13.
14.
15.
16.
17.
18.
19.
20.
21.
22.
23.
24.

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

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 formulario

1. 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:
o

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

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 imagen

1. 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#
VB
Copiar
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 una instruccin.
C#
Copiar
pictureBox1.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 comentarios

1. Agregue lo siguiente.
C#
VB
Copiar
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 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 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

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#
VB
Copiar
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 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.