Tutorial 1: Crear un visor de imagenVisual Studio 2010 Otras
versiones
Visual Studio 2013 Visual Studio 2012 En este tutorial, compilar
un programa que carga una imagen de un archivo y la muestra en una
ventana. Aprender a arrastrar controles como botones y cuadros de
imagen en el formulario, establecer sus propiedades y utilizar los
contenedores para cambiar el tamao del formulario de manera fluida.
Tambin empezar a escribir cdigo. Aprender a: Cree un nuevo
proyecto. Probar (depurar) una aplicacin. Agregar controles bsicos,
como casillas y botones, a un formulario. Colocar controles en un
formulario mediante los diseos. Agregar los cuadros de dilogo Abrir
archivo y Color a un formulario. Escribir cdigo mediante
IntelliSense y fragmentos de cdigo. Escribir mtodos de control de
eventos. Cuando termine, el programa se parecer al de la ilustracin
siguiente. Imagen que crear en este tutorial
Nota
En este tutorial, se trata tanto Visual C# como Visual Basic,
por lo que deber centrarse en la informacin especfica del lenguaje
de programacin que use.
Temas relacionados
Ttulo Descripcin
Paso 1: Crear un proyecto de aplicacin de Windows Forms Empezar
a crear un proyecto de aplicacin de Windows Forms.
Paso 2: Ejecutar el programa Ejecutar el programa de aplicacin
de Windows Forms que se cre en el paso anterior.
Paso 3: Establecer las propiedades del formulario Cambiar el
aspecto del formulario mediante la ventana Propiedades.
Paso 4: Disear un formulario con un control TableLayoutPanel
Agregar un control TableLayoutPanel al formulario.
Paso 5: Agregar controles al formulario Agregar controles, como
PictureBox y CheckBox, al formulario. Agregar botones al
formulario.
Paso 6: Asignar un nombre a los controles de botn Cambiar el
nombre de los botones por otros ms significativos.
Paso 7: Agregar componentes de dilogo al formulario Agregar un
componente OpenFileDialog y un componente ColorDialog al
formulario.
Paso 8: Escribir cdigo para el controlador de eventos del botn
Mostrar una imagen Escribir cdigo mediante la herramienta
IntelliSense.
Paso 9: Revisar, comentar y probar el cdigo Revisar y probar el
cdigo. Agregar comentarios segn sea necesario.
Paso 10: Crear botones adicionales y una casilla Escribir cdigo
para hacer que funcionen otros botones y una casilla mediante
IntelliSense.
Paso 11: Ejecutar el programa y probar otras caractersticas
Ejecutar el programa y establecer el color de fondo. Probar con
otras caractersticas, como cambiar colores, fuentes y bordes.
Paso 1: Crear un proyecto de aplicacin de Windows Forms Visual
Studio 2013 Visual Studio 2012 El primer paso para crear un visor
de imagen es crear un proyecto de aplicacin de Windows Forms. Para
crear un proyecto de aplicacin de Windows Forms1. En el men
Archivo, haga clic en Nuevo proyecto. 2. Si no usa Visual Studio
Express, primero debe seleccionar un lenguaje. De la lista
Plantillas instaladas, seleccione C# o Visual Basic. 3. Haga clic
en el icono Aplicacin de Windows Forms, especifique el nombre
PictureViewer y haga clic en Aceptar. Visual Studio crea
automticamente la solucin. 4. Haga clic en Guardar todo en el men
Archivo, o bien haga clic en el botn Guardar todo de la barra de
herramientas, que aparece como sigue. Botn de la barra de
herramientas Guardar todo
Nota
Visual Studio guarda el proyecto en la carpeta de proyectos. El
entorno de desarrollo integrado (IDE) rellena automticamente el
nombre de la carpeta y del proyecto. Si utiliza Visual Studio
Express, deber completar los pasos 5-7. Para las versiones de
Visual Studio que no son Express, el proyecto se guarda al crearlo
por primera vez, de modo que los pasos 5-7 no son necesarios.
5. Asegrese de que el proyecto se guarda en una carpeta que
pertenezca a la carpeta Mis documentos. 6. Compruebe que est
activada la casilla Crear directorio para la solucin. 7. Haga clic
en Guardar. Nota
Al crear el proyecto, el IDE de Visual Studio crea
automticamente varios archivos y los coloca en una carpeta. Puede
explorar esos archivos en la ventana del Explorador de soluciones.
Al crear el proyecto por primera vez, los archivos se guardan en
una carpeta temporal. Cuando se hace clic en el botn Guardar todo
se ordena al IDE que los copie en una carpeta permanente (que suele
estar contenida en la capeta Mis documentos).
8. Seguramente habr notado que las palabras solucin y proyecto
tienen significados diferentes, que se explicarn ms adelante en
este tutorial. 9. La siguiente imagen muestra el aspecto que debe
tener la ventana del IDE. 10. Ventana del IDE 11.
12. Si la pantalla no se parece la imagen anterior, haga clic en
Restablecer diseo de la ventana en el men Ventana. Si falta
cualquiera de las ventanas, haga clic en Ventana Propiedades o
Explorador de soluciones en el men Vista. Si hay abierta alguna
ventana de ms, haga clic en el botn Cerrar (x) de la parte superior
derecha. 13. Fjese en la imagen. Desde la esquina superior
izquierda y en sentido contrario a las agujas del reloj, la imagen
muestra: Ventana principal: es donde se realiza la mayora del
trabajo. Esta ventana se utiliza para trabajar con formularios y
editar el cdigo. En este momento, muestra un formulario en el
Editor de formularios. En la parte superior de la ventana, hay dos
pestaas: Pgina principal y Form1.cs [Design]. (En Visual Basic, es
.vb en lugar de .cs.) Ventana del Explorador de soluciones: es
donde aparecen todos los archivos de la solucin. Al hacer clic en
un archivo, la informacin mostrada en la ventana Propiedades
cambia. Si hace doble clic en un archivo de cdigo (que finaliza en
.cs para Visual C# y en .vb para Visual Basic), se abre el archivo
de cdigo o un diseador para l. Ventana Propiedades: es donde se
cambian las propiedades de los elementos seleccionados en las otras
ventanas.
Observe que la lnea superior de la ventana del Explorador de
soluciones muestra Solucin 'PictureViewer' (1 proyecto). El IDE ha
creado una solucin automticamente. Una solucin puede contener ms de
un proyecto. De momento, vamos a trabajar con soluciones que
contienen un solo proyecto.
Paso 2: Ejecutar el programa Visual Studio 2013 Visual Studio
2012 Al crear una solucin, en realidad compil un programa que se
ejecuta. Todava no hace gran cosa; se limita a mostrar una ventana
vaca que muestra Form1 en la barra de ttulo. Pero se ejecuta, como
vamos a comprobar a continuacin. Para ejecutar el programa1.
Presione la tecla F5 o haga clic el botn de la barra de
herramientas Iniciar depuracin, que aparece como sigue. Botn de la
barra de herramientas Iniciar depuracin
2. El IDE ejecuta el programa y aparece una ventana. En la
siguiente imagen se muestra el programa que ha compilado. El
programa se est ejecutando y pronto lo ampliaremos. Programa de
aplicacin de Windows Forms en ejecucin
3. Regrese al IDE y examine la nueva barra de herramientas.
Barra de herramientas de depuracin
4. Haga clic en el botn Detener depuracin cuadrado, o bien haga
clic en Detener depuracin en el men Depuracin. El programa dejar de
ejecutarse y se cerrar la ventana. Tambin puede cerrar simplemente
la ventana abierta para detener la depuracin. Nota
Cuando se ejecuta un programa desde el IDE, se denomina
depuracin porque se suele hacer para encontrar y corregir errores.
Se trata de un programa autntico y se puede ejecutar exactamente
igual que cualquier otro.
Paso 3: Establecer las propiedades del formulario Visual Studio
2013 Visual Studio 2012 A continuacin, se utiliza la ventana
Propiedades para cambiar la apariencia del formulario. Para
establecer las propiedades del formulario1. Asegrese de que est en
el Diseador de Windows Forms. En el IDE, haga clic en la pestaa
Form1.cs [Design] (o en la pestaa Form1.vb [Design] de Visual
Basic). 2. Haga clic en cualquier parte del formulario para
seleccionarlo. Examine la ventana Propiedades, que ahora debera
mostrar las propiedades del formulario. Los formularios tienen
varias propiedades. Por ejemplo, puede establecer el color del
primer plano y del fondo, el texto del ttulo que aparece en la
parte superior del formulario, el tamao del formulario y otras
propiedades. Nota
Si la ventana Propiedades no aparece, detenga el programa
haciendo clic en el cuadrado del botn Detener depuracin (o
simplemente cierre la ventana).
3. Una vez seleccionado el formulario, desplcese hasta la parte
inferior de la ventana Propiedades y busque la propiedad Text. Haga
clic en Text, escriba Visor de imgenes y presione ENTRAR. Ahora, el
formulario debera tener el texto Visor de imgenes en la barra de
ttulo y la ventana Propiedades se debera parecer a la siguiente.
Ventana Propiedades
Nota
Las propiedades se pueden ordenar en vistas por categoras o
alfabtica. Puede alternar entre estas dos vistas utilizando los
botones de la ventana Propiedades. En este tutorial, resulta ms
fcil encontrar las propiedades en la vista alfabtica.
4. Vuelva al Diseador de Windows Forms. Haga clic en el
controlador de arrastre inferior derecho del formulario, que es el
cuadradito blanco que aparece en el vrtice inferior derecho del
formulario y tiene el siguiente aspecto. Controlador de
arrastre
Arrstrelo para cambiar el tamao del formulario de modo que
resulte ms ancho y un poco ms alto. 5. Fjese en la ventana
Propiedades y observe que la propiedad Size ha cambiado. La
propiedad Size cambia cada vez que se cambia el tamao del
formulario. Pruebe a arrastrar el formulario para cambiar su tamao
a unas medidas aproximadas de 550, 350, que deberan funcionar bien
para este proyecto. 6. Ejecute el programa de nuevo. Presione la
tecla F5 o haga clic el botn de la barra de herramientas Iniciar
depuracin, que aparece como sigue. Botn de la barra de herramientas
Iniciar depuracin
Exactamente igual que antes, el IDE compila y ejecuta el
programa, y aparece una ventana. 7. Antes de ir al paso siguiente,
detenga el programa, porque el IDE no le permitir cambiarlo
mientras est en ejecucin. Paso 4: Disear un formulario con un
control TableLayoutPanel Visual Studio 2013 Visual Studio 2012 En
este paso, agregar un control TableLayoutPanel al formulario. Para
disear el formulario con un control TableLayoutPanel1. Vaya al
Diseador de Windows Forms. Fjese en el lado izquierdo del
formulario y busque la pestaa Cuadro de herramientas. Site el
puntero del mouse en la pestaa Cuadro de herramientas. Aparecer el
Cuadro de herramientas. (Si lo prefiere, en el men Ver, haga clic
en Cuadro de herramientas.) 2. Haga clic en el signo ms situado
junto al grupo Contenedores para abrirlo, como se muestra en la
siguiente imagen. Grupo Contenedores
3. Puede agregar controles como botones, casillas y etiquetas al
formulario. Haga doble clic en el control TableLayoutPanel del
Cuadro de herramientas. Al hacerlo, el IDE agrega un control
TableLayoutPanel al formulario, como se muestra en la siguiente
imagen. Control TableLayoutPanel
Nota
Si, despus de agregar el control TableLayoutPanel, aparece una
ventana dentro del formulario con el ttulo Tareas de
TableLayoutPanel, haga clic en cualquier parte del formulario para
cerrarla. Aprenderemos ms cosas sobre esta ventana ms adelante en
el tutorial.
Nota
Observe que el Cuadro de herramientas se expande para abarcar el
formulario cuando se hace clic en su pestaa, y se cierra cuando se
hace clic fuera de l. Se trata de la caracterstica Ocultar
automticamente del IDE. Puede activarla o desactivarla para
cualquiera de las ventanas, haciendo clic en el icono del pin de la
esquina superior derecha de la ventana, para alternar entre
ocultarla automticamente y bloquearla en su lugar. El icono del pin
tiene este aspecto.
Icono del pin
4. Asegrese de que TableLayoutPanel est seleccionado, haciendo
clic en l. Puede comprobar qu control est seleccionado examinando
la lista desplegable de la parte superior de la ventana
Propiedades, como se muestra en la siguiente imagen. Ventana
Propiedades que muestra el control TableLayoutPanel
5. El selector de controles es una lista desplegable que figura
en la parte superior de la ventana Propiedades. En este ejemplo,
muestra que un control denominado tableLayoutPanel1 est
seleccionado. Puede seleccionar los controles haciendo clic en
ellos en el Diseador de Windows Forms o eligindolos en el selector
de control. Ahora que TableLayoutPanel est seleccionado, busque la
propiedad Dock y haga clic en Dock, que debera estar establecida en
None. Observe que aparece una flecha de lista desplegable al lado
del valor. Haga clic en la flecha y, a continuacin, seleccione el
botn Fill (el botn grande del centro), como se muestra en la
siguiente imagen. Ventana Propiedades con Fill seleccionado
6. Despus de establecer la propiedad Dock de TableLayoutPanel en
Fill, el panel rellena el formulario completo. Si vuelve a cambiar
el tamao del formulario, TableLayoutPanel permanecer acoplado y
cambiar de tamao para ajustarse al formulario. Nota
TableLayoutPanel funciona exactamente igual que una tabla de
Microsoft Office Word: tiene filas y columnas, y una celda
individual puede abarcar varias filas y columnas. Cada celda puede
contener un control (como un botn, una casilla o una etiqueta).
Este control TableLayoutPanel va a contener un control PictureBox
que abarcar completamente su fila superior, un control CheckBox en
la celda inferior izquierda, y cuatro controles Button en la celda
inferior derecha.
Nota
Aunque hemos dicho que cada celda puede contener un solo
control, la celda inferior derecha tiene cuatro controles Button.
Esto es porque se puede colocar un control en una celda que
contiene otros controles. Este tipo de control se denomina
contenedor, y TableLayoutPanel es un contenedor. Aprenderemos ms
cosas sobre ello ms adelante en este tutorial.
7. Actualmente, TableLayoutPanel tiene dos filas del mismo tamao
y dos columnas del mismo tamao. Tenemos que cambiar su tamao de
modo que la fila superior y la columna derecha sean mucho mayores.
En el Diseador de Windows Forms, seleccione TableLayoutPanel. En la
esquina superior derecha, hay un botoncito triangular de color
negro, con el siguiente aspecto. Botn triangular
Este botn indica que el control tiene tareas que le ayudan a
establecer sus propiedades automticamente. 8. Haga clic en el
tringulo para mostrar la lista de tareas del control, como se
muestra en la siguiente imagen. Tareas de TableLayoutPanel
9. Haga clic en la tarea Editar filas y columnas para abrir la
ventana Estilos de columna y fila. Haga clic en Column1 y
establezca su tamao en el 15 por ciento; para ello, asegrese de que
el botn Porcentaje y escriba 15 en el cuadro Porcentaje. (Se trata
de un control NumericUpDown, que utilizar en un tutorial
posterior.) Haga clic en Column2 y establzcala en el 85 por ciento.
No haga clic todava en el botn Aceptar, porque la ventana se
cerrar. (Si lo hace, puede volver a abrirla mediante la lista de
tareas.) 10. En la lista desplegable Mostrar de la parte superior
de la ventana, haga clic en Filas. Establezca Row1 en el 90 por
ciento y Row2 en el 10 por ciento. 11. Haga clic en Aceptar.
TableLayoutPanel debera tener ahora una fila superior grande, una
fila inferior pequea, una columna izquierda pequea y una columna
derecha grande. Puede cambiar el tamao de las filas y columnas de
TableLayoutPanel arrastrando sus bordes. Paso 5: Agregar controles
al formulario Visual Studio 2013 Visual Studio 2012 En este paso,
se agregan controles, como un control PictureBox y un control
CheckBox, al formulario. A continuacin, se agregan botones al
formulario. Para agregar controles al formulario1. Vaya al Cuadro
de herramientas y expanda el grupo Controles comunes. Se muestran
los controles ms comunes que suelen aparecer en los formularios. 2.
Haga doble clic en el control PictureBox. El IDE agrega un control
PictureBox al formulario. Dado que TableLayoutPanel est acoplado de
modo que rellene el formulario, el IDE agrega el control PictureBox
a la primera celda vaca. 3. Haga clic en el tringulo negro del
nuevo control PictureBox para abrir su lista de tareas, como se
muestra en la siguiente imagen. Tareas de PictureBox
Nota
Si agrega accidentalmente un tipo equivocado de control a
TableLayoutPanel, puede eliminarlo. Haga clic con el botn
secundario en el control y seleccione Eliminar en el men. Tambin
puede seleccionar Deshacer en el men Edicin para quitar controles
del formulario.
4. Haga clic en el vnculo Acoplar en contenedor principal. Se
establece automticamente la propiedad Dock de PictureBox en Fill.
Para verlo, haga clic en el control PictureBox para seleccionarlo,
vaya a la ventana Propiedades y asegrese de que la propiedad Dock
est establecida en Fill. 5. Haga que PictureBox abarque ambas
columnas cambiando su propiedad ColumnSpan. Seleccione el control
PictureBox y establezca su propiedad ColumnSpan en 2. Adems, cuando
el PictureBox est vaco, se debe mostrar un marco vaco. Establezca
su propiedad BorderStyle en Fixed3D. 6. Agregue el control CheckBox
al formulario. Haga doble clic en el elemento CheckBox del Cuadro
de herramientas para que el IDE agregue un nuevo control CheckBox a
la siguiente celda libre de la tabla. Como el control PictureBox
ocupa las dos primeras celdas, el control CheckBox se agrega a la
celda inferior izquierda. Seleccione el nuevo control CheckBox y
establezca su propiedad Text en Stretch, como se muestra en la
siguiente imagen. Control TextBox con la propiedad Stretch
7. Entre al grupo Contenedores del Cuadro de herramientas (donde
obtuvo el control TableLayoutPanel) y haga doble clic en el
elemento FlowLayoutPanel para agregar un nuevo control a la ltima
celda del control PictureBox. A continuacin, acplelo en el
contenedor primario (bien eligiendo Acoplar en contenedor principal
en la lista de tareas o bien estableciendo su propiedad Dock en
Fill.) Nota
FlowLayoutPanel es un contenedor que organiza otros controles en
filas ordenadas. Al cambiar el tamao de FlowLayoutPanel, coloca
todos los controles que contiene en una sola fila, siempre que
tenga espacio para ello. De lo contrario, los organiza en lneas,
uno encima de otro. Vamos a utilizar un control FlowLayoutPanel
para contener cuatro botones.
Para agregar botones1. Seleccione el control FlowLayoutPanel que
acaba de agregar. Vaya a Controles comunes en el Cuadro de
herramientas y haga doble clic en el icono Button para agregar un
botn denominado button1 a FlowLayoutPanel. Repita el proceso para
agregar otro botn. El IDE determina que ya hay un botn denominado
button1, de modo que denomina button2 al siguiente botn. Nota
En Visual Basic, los nombres de los botones llevan mayscula
inicial, as que button1 ser Button1, button2 ser Button2, etc.
2. Normalmente, se agregan los dems botones mediante el Cuadro
de herramientas. Esta vez, haga clic en button2 y seleccione Copiar
en el men Edicin (o presione Ctrl+C). En el men Edicin, haga clic
en Pegar (o presione Ctrl+V) para pegar una copia del botn. Vuelva
a pegarlo otra vez. El IDE ha agregado button3 y button4. Nota
Puede copiar y pegar cualquier control. El IDE da nombre y
coloca los nuevos controles de una manera lgica. Si se pega un
control en un contenedor, el IDE elige el siguiente espacio lgico
para colocarlo.
3. Seleccione el primer botn y establezca su propiedad Text en
Mostrar una imagen. Luego, establezca las propiedades Text de los
otros tres botones siguientes en Borrar la imagen, Establecer el
color de fondo y Cerrar. 4. El paso siguiente consiste en
dimensionar los botones y organizarlos de modo que estn alineados a
la izquierda del panel. Seleccione el control FlowLayoutPanel y
fjese en su propiedad FlowDirection. Cmbiela de modo que quede
establecida en RightToLeft. En cuanto lo haga, los botones deberan
alinearse a la derecha de la celda, en orden inverso de modo que el
botn Mostrar una imagen quede a la derecha. Nota
Si los botones siguen en orden incorrecto, puede arrastrarlos
alrededor de FlowLayoutPanel para reorganizarlos en cualquier
orden. Puede hacer clic en uno de los botones y arrastrarlo a la
izquierda o la derecha.
5. Haga clic en el botn Cerrar para seleccionarlo. Mantenga
presionada la tecla CTRL y haga clic en los otros tres botones,
para que todos estn seleccionados. Mientras todos los botones estn
seleccionados, vaya a la ventana Propiedades y desplcese hacia
arriba hasta la propiedad AutoSize. Esta propiedad indica al botn
que cambie el tamao automticamente para ajustarse al texto que
contiene. Establzcala en true. Ahora, los botones deberan tener el
tamao y orden correctos. (Si los cuatro botones estn seleccionados,
puede cambiar las cuatro propiedades AutoSize al mismo tiempo.) En
la siguiente imagen se muestran los cuatro botones. Visor de
imgenes con cuatro botones
6. Ahora, ejecute de nuevo el programa para ver el formulario
que acaba de disear. Al hacer clic en los botones y la casilla
todava no sucede nada, pero funcionarn pronto. Paso 6: Asignar un
nombre a los controles de botn Visual Studio 2013 Visual Studio
2012 Hay solo un control PictureBox en el formulario. Al agregarlo,
el IDE lo denomin automticamente pictureBox1. Solamente hay una
casilla, denominada checkBox1. Pronto, escribir cdigo, y ese cdigo
har referencia a CheckBox y PictureBox. Como no hay ms que un
ejemplar de cada control, entender lo que significan los trminos
pictureBox1 o checkBox1 cuando los vea en su cdigo. Nota
En Visual Basic, la primera letra del nombre de un control se
pone en mayscula de forma predeterminada, de modo que los nombres
son PictureBox1, CheckBox1, etc.
Hay cuatro botones en el formulario, que el IDE ha denominado
button1, button2, button3 y button4. Solo con mirar los nombres
actuales no sabemos cul es el botn Cerrar ni cul es el botn Mostrar
una imagen. Por ello, resulta til dar nombres a los controles de
botn. Para dar un nombre a los controles de botn1. Haga clic en el
botn Cerrar. (Si todava estn seleccionados todos los botones,
presione la tecla ESC para cancelar la seleccin.) Desplcese en la
ventana Propiedades hasta que vea la propiedad (Name). (La
propiedad (Name) se encuentra cerca de la parte superior cuando las
propiedades estn por orden alfabtico.) Cambie el nombre a
closeButton, como se muestra en la siguiente imagen. Ventana
Propiedades con el nombre closeButton
Nota
Si intenta cambiar el nombre del botn por BotnCerrar, con un
espacio entre las palabras Botn y Cerrar, el IDE muestra el mensaje
de error: "El valor de la propiedad no es vlido". En los nombres de
los controles no se permiten espacios (ni algunos otros
caracteres).
2. Cambie el nombre de los otros tres botones a
backgroundButton, clearButton y showButton. Puede comprobar los
nombres haciendo clic en la lista desplegable de seleccin de
controles en la ventana Propiedades. Aparecern los nuevos nombres
de los botones. 3. Haga doble clic en el botn Mostrar una imagen en
el Diseador de Windows Forms. Al hacerlo, el IDE abre una nueva
pestaa en la ventana principal denominada pestaa Form1.cs, como se
muestra en la siguiente imagen. Pestaa Form1.cs con cdigo de Visual
C#
4. Cntrese en esta parte del cdigo. C#VBCopiar
private void showButton_Click(object sender, EventArgs e){}
Se trata de un mtodo denominado showButton_Click(). El IDE lo
agreg al hacer clic en el botn showButton. Este mtodo contiene
cdigo que se ejecuta cuando se hace clic en el botn Mostrar una
imagen. Nota
En este tutorial, el cdigo de Visual Basic que se genera
automticamente se ha simplificado quitando todo lo que hay entre
los parntesis (). Siempre que esto sucede, se puede quitar el mismo
cdigo. El programa funcionar en ambos casos. En el resto de los
tutoriales, se simplifica el cdigo generado automticamente siempre
que sea posible.
5. Vaya a la pestaa del diseador (pestaa Form1.cs [Design] en
Visual C# o Form1.vb [Design] en Visual Basic) y haga doble clic en
el botn Borrar la imagen. Repita el procedimiento para los dos
ltimos botones. Cada vez, el IDE agrega un nuevo mtodo al cdigo del
formulario. 6. Haga doble clic en el control CheckBox en el
Diseador de Windows Forms, para que el IDE agregue un mtodo
checkBox1_CheckedChanged() ms. Se llama a este mtodo cada vez que
el usuario activa o desactiva la casilla. Nota
Cuando se trabaja en un programa, a menudo se utilizan
alternativamente el editor de cdigo y el Diseador de Windows Forms.
El IDE facilita la navegacin en el proyecto. El Explorador de
soluciones se utiliza para abrir el Diseador de Windows Forms
haciendo doble clic en Form1.cs en Visual C# o en Form1.vb en
Visual Basic.
7. A continuacin se muestra el nuevo cdigo que aparece en el
editor de cdigo. 8. C#9. VB10. Copiar11. 12. private void
clearButton_Click(object sender, EventArgs e)13. {14. }15. 16.
private void backgroundButton_Click(object sender, EventArgs e)17.
{18. }19. 20. private void closeButton_Click(object sender,
EventArgs e)21. {22. }23. 24. private void
checkBox1_CheckedChanged(object sender, EventArgs e)25. {26. }27.
28. Nota
Los cinco mtodos que ha agregado se denominan controladores de
eventos, porque el programa los llama cada vez que se produce un
evento (por ejemplo, cuando un usuario hace clic en un botn o
activa una casilla). Al hacer doble clic en un control en el IDE,
este agrega un mtodo de control de eventos para ese control. Por
ejemplo, cuando se hace doble clic en un botn, el IDE agrega un
controlador para este evento Click (al que se llamar cada vez que
el usuario haga clic en el botn). Cuando se hace doble clic en una
casilla, el IDE agrega un controlador para el evento CheckedChanged
correspondiente (al que se llamar cada vez que el usuario active o
desactive la casilla). Despus de agregar un controlador de eventos
para un control, puede volver en cualquier momento a l desde el
Diseador de Windows Forms haciendo doble clic en el control.
Paso 7: Agregar componentes de dilogo al formulario
Visual Studio 2013 Visual Studio 2012 En preparacin para la
configuracin de los cuadros de dilogo Abrir archivo y Color (para
elegir un color de fondo), en este paso se agrega un componente
OpenFileDialog y un componente ColorDialog al formulario. En
algunos sentidos, un componente es como un control. Se utiliza el
Cuadro de herramientas para agregar un componente al formulario y
se establecen sus propiedades mediante la ventana Propiedades. Sin
embargo, a diferencia de un control, al agregar un componente al
formulario no se agrega un elemento visible que el usuario puede
ver. En cambio, se proporcionan determinados comportamientos que se
pueden desencadenar mediante cdigo. Un componente es lo que abre un
cuadro de dilogo Abrir archivo. Para agregar componentes de cuadro
de dilogo al formulario1. Vaya al Diseador de Windows Forms y abra
el grupo Cuadros de dilogo en el Cuadro de herramientas.
El grupo Cuadros de dilogo del Cuadro de herramientas tiene
componentes que abren automticamente muchos cuadros de dilogo de
gran utilidad y que se pueden utilizar para abrir y guardar
archivos, examinar carpetas y elegir fuentes o colores. En este
proyecto se utilizan dos componentes de cuadro de dilogo:
OpenFileDialog y ColorDialog.
2. Para agregar un componente denominado a openFileDialog1 al
formulario, haga doble clic en OpenFileDialog. Para agregar un
componente denominado colorDialog1 al formulario, haga doble clic
en ColorDialog en el Cuadro de herramientas. (Este se utiliza en el
siguiente paso del tutorial.) Debera aparecer un cuadro gris en la
parte inferior del Diseador de Windows Forms, con un icono para
cada uno de los dos componentes de cuadro de dilogo agregados, como
se muestra en la siguiente imagen. Componentes de cuadro de
dilogo
3. Vaya al Diseador de Windows Forms y haga clic en el icono
openFileDialog1 en el cuadro gris de la parte inferior del
diseador. Establezca dos propiedades: Establezca la propiedad
Filter en lo siguiente (puede copiarlo y pegarlo): Archivos JPEG
(*.jpg)|*.jpg|Archivos PNG (*.png)|*.png|Archivos BMP
(*.bmp)|*.bmp|Todos los archivos (*.*)|*.* Establezca la propiedad
Title en lo siguiente: Seleccionar un archivo de imagen
Para ver un ejemplo del cuadro de dilogo Abrir archivo en una
aplicacin diferente, abra el Bloc de notas o Paint y haga clic en
Abrir en el men Archivo. Observe que hay una lista desplegable de
tipo de archivo en la parte inferior. Acabamos de utilizar la
propiedad Filter del componente OpenFileDialog para configurarla.
Observe tambin que las propiedades Title y Filter estn en negrita
en la ventana Propiedades. El IDE lo hace para mostrarle todas las
propiedades que han cambiado respecto de sus valores
predeterminados.
Paso 8: Escribir cdigo para el controlador de eventos del botn
Mostrar una imagen Visual Studio 2013 Visual Studio 2012 En este
paso, conseguiremos que botn Mostrar una imagen funciona as: Cuando
un usuario hace clic en ese botn, el programa abre un cuadro de
dilogo Abrir archivo. Si un usuario elige un archivo de imagen, el
programa muestra esa imagen en el control PictureBox. El IDE
incluye una eficaz herramienta denominada IntelliSense que ayuda a
escribir cdigo. Cuando se escribe cdigo, el IDE abre un cuadro con
sugerencias para completar las palabras parciales que se escriben.
Intenta determinar lo que se desea hacer a continuacin y salta
automticamente al ltimo elemento que se elige en la lista. Puede
utilizar las flechas arriba o abajo para moverse por la lista o
bien continuar escribiendo letras para reducir las opciones
propuestas. Cuando vea la opcin que desea, presione la tecla TAB
para seleccionarla. Otra opcin es pasar por alto las sugerencias,
si no las necesita. Para escribir cdigo para el controlador de
eventos de botn Mostrar una imagen1. Vaya al Diseador de Windows
Forms y haga doble clic en el botn Mostrar una imagen. El IDE va
inmediatamente al diseador de cdigo y mueve su cursor de modo para
situarlo dentro del mtodo showButton_Click() que agreg previamente.
2. Escriba una i en la lnea vaca entre las dos llaves { }. (En
Visual Basic, escriba en la lnea vaca entre Private Sub y End Sub.)
Se abre una ventana IntelliSense, como se muestra en la siguiente
imagen. IntelliSense con cdigo de Visual C#
3. La ventana IntelliSense debe mostrar resaltada la palabra if.
(De lo contrario, escriba una f minscula, y lo har.) Observe que la
informacin sobre herramientas amarilla que se encuentra al lado de
la ventana IntelliSense muestra Fragmento de cdigo para instruccin
if. (En Visual Basic, la informacin sobre herramientas dice tambin
que se trata de un fragmento de cdigo, pero con una redaccin
ligeramente diferente.) Este es el fragmento de cdigo que vamos a
utilizar. Presione la tecla TAB para insertar if en el cdigo. A
continuacin, presione de nuevo la tecla TAB para utilizar el
fragmento de cdigo if. (Si ha hecho clic en alguna otra parte y ha
desaparecido la ventana IntelliSense, borre la i con la tecla de
retroceso y vuelva a escribirla; se volver a abrir la ventana
IntelliSense.) Cdigo en Visual C#
4. A continuacin, utilice IntelliSense para escribir ms cdigo y
abrir un cuadro de dilogo Abrir archivo. Si el usuario ha hecho
clic en el botn Aceptar, el control PictureBox cargar el archivo
seleccionado por el usuario. En los siguientes pasos se muestra cmo
escribir el cdigo. Aunque los pasos son muchos, solamente habr que
presionar unas cuantas teclas: 1. Comience con el texto
seleccionado true del fragmento de cdigo. Escriba op para
sobrescribirlo. (En Visual Basic, empieza con mayscula inicial, de
modo que deber escribir Op.) 2. Se abre la ventana IntelliSense y
muestra openFileDialog1. Presione TAB para seleccionarlo. (En
Visual Basic, empieza con mayscula inicial, de modo que aparecer
OpenFileDialog1. Asegrese de que OpenFileDialog1 est seleccionado.)
3. Escriba un punto (.) (En ingls se denomina period o dot.) Dado
que escribi un punto justo despus de openFileDialog1, se abre una
ventana IntelliSense, que contiene todas las propiedades y los
mtodos de componente de OpenFileDialog. Se trata de las mismas
propiedades que aparecen en la ventana Propiedades al hacer clic en
este componente en el Diseador de Windows Forms. Hay tambin mtodos
que pueden ordenar al componente que realice acciones (como abrir
un cuadro de dilogo).
La ventana IntelliSense puede mostrar propiedades y mtodos. Para
determinar lo que est mostrando, fjese en el icono de la izquierda.
Se muestra una imagen de un bloque junto a cada mtodo y una imagen
de una mano junto a cada propiedad. Adems, aparece un icono de rayo
junto a cada evento. Estas imgenes se muestran como sigue.
4. Icono de mtodo 5.
6. Icono de propiedad 7.
8. Icono de evento 9.
10. Empiece a escribir ShowDialog (el uso de maysculas o
minsculas no es significativo en IntelliSense). El mtodo
ShowDialog() mostrar el cuadro de dilogo Abrir archivo. Cuando la
ventana haya resaltado ShowDialog, presione la tecla TAB. 11.
Cuando se utiliza un mtodo con un control o un componente (lo que
se denomina llamar a un mtodo), es preciso agregar parntesis. As
pues, especifique los parntesis de apertura y cierre: ()
Los mtodos constituyen una parte importante de cualquier
programa. En este tutorial se han mostrado varias maneras de
utilizarlos. Se puede llamar al mtodo de un componente para
ordenarle que haga algo, por ejemplo, como cuando llam al mtodo
ShowDialog() del componente OpenFileDialog. Puede crear sus propios
mtodos para que los programas realicen acciones, como el que
estamos construyendo ahora que se denomina mtodo
showButton_Click(), que abre un cuadro de dilogo y una imagen
cuando un usuario hace clic en un botn.
12. Para Visual C#, agregue un espacio y, a continuacin, agregue
dos signos igual (==). Para Visual Basic, agregue un espacio y, a
continuacin, utilice un solo signo igual (=). (Visual C# y Visual
Basic utilizan distintos operadores de igualdad.) 13. Agregue otro
espacio. En cuanto haga, se abrir otra ventana IntelliSense.
Empiece a escribir DialogResult y presione la tecla TAB para
agregarlo.
Cuando se escribe cdigo para llamar a un mtodo, a veces devuelve
un valor. En este caso, el mtodo ShowDialog() del componente
OpenFileDialog devuelve un valor DialogResult. DialogResult es un
valor especial que le indica lo que ha sucedido en un cuadro de
dilogo. Un componente OpenFileDialog puede dar lugar a que el
usuario haga clic en Aceptar o en Cancelar, de modo que el mtodo
ShowDialog() devuelva DialogResult.OK o DialogResult.Cancel.
14. Escriba un punto para abrir la ventana IntelliSense del
valor DialogResult. Escriba la letra O y presione la tecla TAB para
insertar OK.
Deber quedar completa la primera lnea de cdigo. Para Visual C#,
debera ser la siguiente. if (openFileDialog1.ShowDialog() ==
DialogResult.OK) Para Visual Basic, debera ser la siguiente. If
OpenFileDialog1.ShowDialog() = DialogResult.OK Then
15. Ahora, agregue otra lnea de cdigo ms. Puede escribirla (o
copiar y pegar), pero puede resultar interesante utilizar
IntelliSense para agregarla. Cuanto ms se familiarice con
IntelliSense, ms rpidamente podr escribir su propio cdigo. El mtodo
showButton_Click() final tendr el siguiente aspecto. C#VBCopiar
private void showButton_Click(object sender, EventArgs e){ if
(openFileDialog1.ShowDialog() == DialogResult.OK) {
pictureBox1.Load(openFileDialog1.FileName); }}
Paso 9: Revisar, comentar y probar el cdigo Visual Studio 2013
Visual Studio 2012 Antes de agregar un comentario al cdigo y
probarlo, dedique un tiempo a revisar los conceptos del cdigo,
porque los utilizar con frecuencia: Cuando hizo doble clic en el
botn Mostrar una imagen en el Diseador de Windows Forms, el IDE
agreg automticamente un mtodo al cdigo del programa. Los mtodos
permiten organizar el cdigo: son la manera de agrupar las partes
del cdigo. Casi siempre, un mtodo realiza una cantidad reducida de
acciones en un orden concreto; por ejemplo, el mtodo
showButton_Click() muestra un cuadro de dilogo y, a continuacin,
carga una imagen. Un mtodo se compone de instrucciones. Podemos
considerar que un mtodo es una manera de empaquetar instrucciones
juntas. Cuando se ejecuta un mtodo, o se le llama, se ejecutan las
instrucciones que contiene en orden, una tras otra, empezando por
la primera. A continuacin, se muestra un ejemplo de una instruccin.
C#CopiarpictureBox1.Load(openFileDialog1.FileName);pictureBox1.Load(openFileDialog1.FileName)Las
instrucciones son lo que permite que el programa haga cosas.En
Visual C#, una instruccin finaliza siempre en un signo de punto y
coma.En Visual Basic, el final de una lnea es el final de una
instruccin.(No se necesita indicar el signo de punto y coma en
Visual Basic.) La instruccin anterior ordena al control PictureBox
que cargue el archivo que el usuario seleccion con el componente
OpenFileDialog.A continuacin, se agrega un comentario al cdigo. Un
comentario es una nota que no cambia la forma de comportarse del
programa. Hace que resulte ms fcil entender qu hace el cdigo. En
Visual C#, se utilizan dos barras diagonales (//) para marcar una
lnea como comentario. En Visual Basic, se utiliza una comilla
sencilla (') para marcar una lnea como comentario. Despus de
agregar un comentario, se prueba el programa. Acaba de compilar
algo que funciona y, aunque todava no est terminado, ya es capaz de
cargar una imagen. Para agregar comentarios1. Agregue lo siguiente.
C#VBCopiar
private void showButton_Click(object sender, EventArgs e){ //
Show the Open File dialog. If the user clicks OK, load the //
picture that the user chose. if (openFileDialog1.ShowDialog() ==
DialogResult.OK) { pictureBox1.Load(openFileDialog1.FileName);
}}
El controlador de eventos Click del botn showButton ya est
completado y funciona. Ha empezado a escribir cdigo, comenzando por
una instruccin if. Una instruccin if es la manera de ordenar al
programa: "Compruebe esto y, si se cumple, realice estas acciones".
En este caso, se ordena al programa que abra el cuadro de dilogo
Abrir archivo y, si el usuario selecciona un archivo y hace clic en
el botn Aceptar, ese archivo se carga en PictureBox.
El IDE se ha creado para facilitar la tarea de escribir cdigo.
Los fragmentos de cdigo constituyen una manera de conseguirlo. Un
fragmento de cdigo es un acceso directo que se expande para crear
un bloque pequeo de cdigo. Puede ver todos los fragmentos de cdigo
seleccionando Administrador de fragmentos de cdigo en el men
Herramientas. El fragmento de cdigo if se encuentra en Modelos de
cdigo, en la subcarpeta Condicionales y bucles. Este administrador
se puede utilizar para examinar los fragmentos de cdigo existentes
o agregar los suyos propios. Para activar un fragmento de cdigo al
escribir cdigo, escrbalo y presione la tecla TAB. Muchos fragmentos
de cdigo aparecen en la ventana IntelliSense, motivo por el cual la
tecla TAB se presiona dos veces: la primera, para seleccionar el
fragmento de cdigo en la ventana IntelliSense y, la segunda, para
ordenar al IDE que lo utilice. (IntelliSense admite el fragmento de
cdigo if, pero no el fragmento de cdigo ifelse.)
2. Antes de ejecutar el programa, gurdelo haciendo clic en el
botn de la barra de herramientas Guardar todo, que se muestra a
continuacin. Botn Guardar todo
Como alternativa, puede hacer clic en Guardar todo en el men
Archivo. El procedimiento recomendado consiste en guardar desde el
principio y a menudo. Mientras se ejecuta, el programa debera
parecerse a la siguiente imagen. Visor de imgenes
Para probar el programa1. Presione la tecla F5 o haga clic en el
botn Iniciar depuracin de la barra de herramientas. 2. Haga clic en
el botn Mostrar una imagen para ejecutar el cdigo que acaba de
escribir. Primero, el programa abre un cuadro de dilogo Abrir
archivo. Compruebe que los filtros aparecen en la lista desplegable
Tipo de archivo en la parte inferior del cuadro de dilogo. A
continuacin, navegue hasta una imagen y brala. Normalmente,
encontrar imgenes de ejemplo que se distribuyen con el sistema
operativo Windows en la carpeta Mis documentos, dentro de la
carpeta Mis imgenes\Sample Pictures. 3. Cargue una imagen y esta
aparecer en el control PictureBox. A continuacin, intente cambiar
el tamao del formulario. Como el control PictureBox est acoplado
dentro de un control TableLayoutPanel, que a su vez est acoplado en
el formulario, el ancho del rea de imagen se ajustar al ancho del
formulario y el alto ocupar el 90 por ciento superior del
formulario. Por este motivo hemos utilizado los contenedores
TableLayoutPanel y FlowLayoutPanel: mantienen el tamao del
formulario correcto cuando el usuario lo modifica. Paso 10: Crear
botones adicionales y una casilla Visual Studio 2013 Visual Studio
2012 Ahora, est listo para completar los otros cuatro mtodos. Podra
copiar y pegar este cdigo, pero si desea aprender lo mximo con este
tutorial, escriba el cdigo y utilice IntelliSense.
El procedimiento recomendado es comentar siempre el cdigo. Los
comentarios son informacin que leern otras personas y merece la
pena dedicar tiempo a hacer que el cdigo resulte fcil de entender.
El programa pasa por alto todo lo que hay en una lnea de
comentario. En Visual C#, para marcar una lnea como comentario se
escriben dos barras diagonales (//) al principio. En Visual Basic,
se utiliza para ello una comilla sencilla (').
Para crear botones adicionales y una casilla Agregue el cdigo
siguiente: C#VBCopiar
private void clearButton_Click(object sender, EventArgs e){ //
Clear the picture. pictureBox1.Image = null;}
private void backgroundButton_Click(object sender, EventArgs e){
// Show the color dialog box. If the user clicks OK, change the //
PictureBox control's background to the color the user chose. if
(colorDialog1.ShowDialog() == DialogResult.OK)
pictureBox1.BackColor = colorDialog1.Color;}
private void closeButton_Click(object sender, EventArgs e){ //
Close the form. this.Close();}
private void checkBox1_CheckedChanged(object sender, EventArgs
e){ // If the user selects the Stretch check box, // change the
PictureBox's // SizeMode property to "Stretch". If the user clears
// the check box, change it to "Normal". if (checkBox1.Checked)
pictureBox1.SizeMode = PictureBoxSizeMode.StretchImage; else
pictureBox1.SizeMode = PictureBoxSizeMode.Normal;}Paso 11: Ejecutar
el programa y probar otras caractersticas Visual Studio 2013 Visual
Studio 2012 El programa est finalizado y listo para ejecutarse.
Puede ejecutarlo y establecer el color de fondo. Para aprender ms,
intente mejorar el programa cambiando el color del formulario,
personalizando los botones y la casilla, y cambiando las
propiedades del formulario. Para ejecutar el programa y establecer
el color de fondo1. Presione F5 o haga clic en el botn Iniciar
depuracin de la barra de herramientas. 2. Antes de abrir una
imagen, haga clic en el botn Establecer el color de fondo. Se abrir
el cuadro de dilogo Color. Cuadro de dilogo Color
3. Seleccione un color para establecer el color de fondo de
PictureBox. Fjese con atencin en el mtodo backgroundButton_Click()
para entender cmo funciona. Nota
Puede cargar una imagen de Internet pegando su direccin URL en
el cuadro de dilogo Abrir archivo. Intente encontrar una imagen con
un fondo transparente, para que se vea el color de fondo.
4. Haga clic en el botn Borrar la imagen para asegurarse de que
se borra. A continuacin, salga del programa haciendo clic en el
botn Cerrar. Para probar otras caractersticas Cambie el color del
formulario y de los botones mediante la propiedad BackColor.
Personalice sus botones y la casilla mediante las propiedades Font
y ForeColor. Cambie las propiedades FormBorderStyle y ControlBox
del formulario. Utilice las propiedades AcceptButton y CancelButton
del formulario para que se haga clic automticamente en los botones
cuando el usuario presione las teclas ENTRAR o ESC. Haga que el
programa abra el cuadro de dilogo Abrir archivo cuando el usuario
presione ENTRAR y lo cierre cuando el usuario presione ESC.