Introduccin al lenguaje de programacin Visual

Basic
Visual Studio 2008
Otras versiones

Actualizacin: noviembre 2007

Visual Basic Express es una manera rpida y sencilla de crear programas para Microsoft Windows.
Aunque no tenga experiencia de programacin en Windows, con Visual Basic dispone de un
completo conjunto de herramientas para simplificar las tareas de desarrollo.
Y qu es Visual Basic? "Visual" hace referencia al mtodo utilizado para crear lo que ve el usuario, la
interfaz grfica de usuario o GUI. "Basic" hace referencia al lenguaje de programacin BASIC, de
Beginners All-Purpose Symbolic Instruction Code (Cdigo de Instruccin Simblico Todo Propsito
para Principiantes), un lenguaje utilizado por ms programadores que cualquier otro lenguaje en la
historia de la informtica. Puede crear programas tiles slo con aprender algunas de sus
caractersticas. Los vnculos siguientes le servirn para empezar a programar en Visual Basic; cada
vnculo incluye ejemplos, as como acceso a informacin adicional.

Programar los conceptos

Qu es exactamente un lenguaje de programacin? Los vnculos siguientes le darn cierta
informacin general sobre lo que es un lenguaje y cmo almacena diferentes tipos de informacin.
Conceptos bsicos: funcionamiento de la programacin
Cmo funciona un lenguaje de programacin y terminologa bsica.
Representacin de palabras, nmeros y valores con variables
Cmo las variables almacenan valores y representan informacin, as como la manera de
utilizarlas.
Palabras y texto: utilizar variables de cadena para organizar palabras
Cmo utilizar una variable String para representar palabras y texto.
Matrices: variables que representan ms de un valor
Cmo utilizar una variable Array para representar varios valores del mismo tipo.
Aritmtica: crear expresiones con variables y operadores
Cmo escribir cdigo que realiza operaciones aritmticas.

Comparaciones: Utilizar expresiones para comparar valores

Cmo escribir cdigo que compara valores numricos.

Su primer programa
Preparado para un poco de programacin real? Los vnculos siguientes le guiarn por el proceso de
creacin de un programa simple y le mostrarn cmo buscar los errores del programa.
Hacer que el equipo haga algo: escribir el primer procedimiento
Cmo escribir cdigo que indica a su programa que realice una accin determinada.
Hacer que un programa repita acciones: establecer bucles For...Next
Cmo escribir cdigo que repite acciones en su programa y cuenta las veces que stas se
han realizado.
Hacer que un programa elija entre dos posibilidades: la instruccin If...Then
Cmo escribir cdigo que hace cosas diferentes en respuesta a condiciones diferentes.
Qu hacer cuando algo sale mal: control de errores
Cmo escribir cdigo que controla los errores de sus programas. Tambin obtendr
informacin sobre los diferentes tipos de errores.

Ms sobre Visual Basic

Los vnculos siguientes le ayudarn a ampliar sus conocimientos de programacin y del lenguaje
Visual Basic.
Informacin detallada: comprender propiedades, mtodos y eventos
Cmo funcionan las propiedades, los mtodos y los eventos.
Informacin detallada: tipos de datos
Cmo se almacenan los datos utilizando los diferentes tipos de variables.
Informacin detallada: convertir un tipo de variable en otro
Cmo convertir datos de un tipo en otro, junto con algunos errores comunes de este
proceso.
Informacin detallada: utilizar Do...While y Do...Until para repetir hasta cumplir una condicin
Cmo utilizar las instrucciones Do...While y Do...Until para repetir cdigo basndose en
ciertas condiciones.
Informacin detallada: utilizar Select Case para decidir entre varias opciones

Cmo ejecutar cdigo basndose en varias condiciones donde hay muchas elecciones.
Paseo con gua por Visual Basic
Ms tareas que puede realizar con el lenguaje de programacin Visual Basic.

Conceptos bsicos: funcionamiento de la

programacin
Visual Studio 2008
Otras versiones

Actualizacin: noviembre 2007

Antes de comenzar el aprendizaje del lenguaje de programacinVisual Basic, puede resultarle til
entender qu es un lenguaje de programacin y cmo funciona. Tambin puede resultarle til
familiarizarse con algunos trminos que se utilizan en programacin. El mejor punto de partida es
comenzar con los conceptos bsicos.

Cmo funciona la programacin

Por s solo, un equipo no es muy inteligente.
Un equipo est constituido, bsicamente, por un gran nmero de conmutadores electrnicos de
pequeo tamao que puede estar activados o desactivados. Al establecer diferentes combinaciones
de estos modificadores, se logra que el equipo realice alguna accin, por ejemplo, que muestre algo
en la pantalla o que emita un sonido. Eso es la programacin en su concepto ms bsico: decirle a un
equipo qu hacer.
Claro est que comprender qu combinacin de modificadores lograr que el equipo realice lo que
se desea ser una difcil tarea; aqu es donde entran en juego los lenguajes de programacin.

Qu es un lenguaje de programacin?
Las personas se expresan utilizando un lenguaje compuesto de muchas palabras. Los equipos utilizan
un lenguaje simple, que slo consta de ceros y unos; el 1 significa "activado" y el 0 significa
"desactivado". Tratar de hablar con un equipo en su propio lenguaje sera como tratar de hablar con
sus amigos utilizando el cdigo Morse; se puede hacer, pero no es necesario.
Un lenguaje de programacin acta como un traductor entre el usuario y el equipo. En lugar de
aprender el lenguaje nativo del equipo (conocido como lenguaje mquina), se puede utilizar un

lenguaje de programacin para dar instrucciones al equipo de un modo que sea ms fcil de
aprender y entender.
Un programa especializado conocido como compilador toma las instrucciones escritas en el lenguaje
de programacin y las convierte en lenguaje mquina. Esto significa que, como programador de
Visual Basic, no necesita entender lo que el equipo hace o cmo lo hace. Basta con que entienda
cmo funciona el lenguaje de programacin de Visual Basic.

Descripcin general del lenguaje Visual Basic

El lenguaje hablado y escrito tambin posee su propia estructura: por ejemplo, un libro consta de
captulos con prrafos que, a su vez, contienen frases que estn formadas por palabras. Los
programas escritos en Visual Basic tambin tiene una estructura: los mdulos son como los captulos,
los procedimientos como los prrafos y las lneas de cdigo como las frases.
Al hablar o escribir, se utilizan distintas categoras de palabras, como nombres o verbos. Cada
categora se usa segn un conjunto definido de reglas. En muchos sentidos, el lenguaje Visual Basic
es muy parecido al lenguaje cotidiano. Visual Basic tambin dispone de una serie reglas que definen
cmo deben utilizarse las categoras de palabras (que reciben el nombre de elementos de
programacin) para escribir programas.
Los elementos de programacin de Visual Basic incluyen instrucciones, declaraciones, mtodos,
operadores y palabras clave. A medida que avance en las siguientes lecciones, ir aprendiendo ms
sobre estos elementos y cmo utilizarlos.
El lenguaje escrito y hablado tambin tiene reglas, o sintaxis, que definen el orden de las palabras en
una frase. Visual Basic tambin tiene su sintaxis, al comienzo resulta extraa pero realmente es muy
simple. Por ejemplo, para decir "La velocidad mxima de mi automvil es 55", se escribira:
Car.Speed.Maximum = 55
Ms adelante, obtendr ms informacin acerca de la sintaxis y las herramientas de Visual Basic
como, por ejemplo IntelliSense, que le servir de gua para utilizar la sintaxis correcta al escribir
programas.

Representacin de palabras, nmeros y valores con

variables
Visual Studio 2008
Otras versiones

Actualizacin: noviembre 2007

Las variables son un concepto importante en programacin. Una variable es una letra o un nombre
que puede almacenar un valor. Al crear programas, se pueden utilizar variables para almacenar
nmeros, por ejemplo, el alto de un edificio, o palabras, por ejemplo, el nombre de una persona.
Resumiendo, se pueden utilizar variables para representar cualquier tipo de informacin que el
programa necesite.
Puede surgir la pregunta, "Por qu utilizar una variable cuando en su lugar se puede utilizar
simplemente la informacin?" Como su nombre indica, las variables pueden cambiar el valor que
representan cuando el programa se est ejecutando. Por ejemplo, puede escribir un programa para
realizar el seguimiento del nmero de caramelos que tiene en un frasco en su escritorio. Dado que
los dulces se comen, es probable que la cantidad de caramelos del frasco cambie con el tiempo. En
lugar de volver a escribir el programa cada vez que quiere comerse un caramelo, puede representar
el nmero de caramelos con una variable que cambia con el tiempo.

Almacenar informacin en variables

Hay tres pasos para utilizar una variable:

1.
2.
3.

Declarar la variable. Indicar al programa el nombre y el tipo de variable que se desea

utilizar.
Asignar la variable. Proporcionar un valor a la variable.
Utilizar la variable. Recuperar el valor contenido en la variable y utilizarlo en el programa.

Declarar variables

Cuando declara una variable, tiene que decidir qu nombre y qu tipo de datos asignarle. Puede
asignar a la variable cualquier nombre que desee, siempre y cuando el nombre empiece con una letra
o un carcter de subrayado. Cuando se usa un nombre que describe el contenido de la variable, el
cdigo es ms fcil de leer. Por ejemplo, una variable que controla el nmero de caramelos del frasco
puede llamarse totalCandy.
Una variable se declara mediante las palabras claveDim y As, como se muestra a continuacin.
VB
Copiar

Dim aNumber As Integer

Esta lnea de cdigo indica al programa que se desea utilizar una variable denominada aNumber, que
almacene nmeros enteros (el tipo de datos Integer).
Puesto que aNumber es un Integer, slo puede almacenar nmeros enteros. Por ejemplo, si desea
almacenar 42,5 utilizar el tipo de datos Double. Y si desea almacenar una palabra, utilizar un tipo

de datos String. Otro tipo de datos que vale la pena mencionar en este punto es Boolean, que puede
almacenar un valor True o False.
Aqu hay ms ejemplos de cmo declarar las variables.
VB
Copiar

Dim aDouble As Double

Dim aName As String
Dim YesOrNo As Boolean

Nota:
Puede crear una variable local sin declarar el tipo de la variable utilizando la inferencia de tipos de
variable local. Al utilizar la inferencia de tipos de variable local, el valor que le asigna determina el
tipo de la variable. Para obtener ms informacin, vea Inferencia de tipo de variable local.

Para obtener ms informacin sobre otros tipos de variable, vea Informacin detallada: tipos de datos.

Asignar variables

Se asigna un valor a la variable con el signo =, que a veces se denomina operador de asignacin,
como se muestra en el ejemplo siguiente.
VB
Copiar

aNumber = 42

Esta lnea de cdigo toma el valor 42 y lo almacena en la variable declarada previamente

denominada aNumber.

Declarar y asignar variables con un valor predeterminado

Como se mostr anteriormente, puede declarar una variable en una lnea de cdigo y asignar ms
adelante el valor en otra lnea. Esto puede producir un error si intenta utilizar la variable antes de
asignarle un valor.
Por esa razn, es mejor declarar y asignar las variables en una lnea nica. Aunque no sepa an el
valor que contendr la variable, puede asignar un valor predeterminado. El cdigo para declarar y
asignar las mismas variables mostradas anteriormente ser similar al siguiente.
VB
Copiar

Dim aDouble As Double = 0

Dim aName As String = "default string"
Dim YesOrNo As Boolean = True

Si declara las variables y asigna los valores predeterminados en una sola lnea, puede evitar posibles
errores. Todava puede utilizar la asignacin para dar despus un valor diferente a la variable.

Intntelo

En este ejercicio, escribir un breve programa que crea cuatro variables, les asigna valores y a
continuacin muestra cada valor en una ventana llamada cuadro de mensaje. Comencemos creando
el proyecto donde se almacenar el cdigo.

Para crear el proyecto

1.
2.
3.
4.

Si an no est abierto, abra Visual Basic desde el men Inicio de Windows.

En el men Archivo, haga clic en Nuevo proyecto.
En el cuadro de dilogo Nuevo proyecto, en el panel Plantillas, haga clic en Aplicacin para
Windows.
En el cuadro Nombre, escriba Variables y haga clic en Aceptar.
Visual Basic crear los archivos para el programa y abrir el Diseador de Windows Forms.

A continuacin, crear las variables.

Para crear las variables y mostrar sus valores

1.

Haga doble clic en el formulario para abrir el Editor de cdigo.

El Editor de cdigo abrir una seccin de cdigo llamada Form1_Load. Esta seccin de
cdigo es un controlador de eventos, que tambin se conoce como procedimiento. El cdigo
que escribe en este procedimiento corresponde a las instrucciones que se realizarn cuando
el formulario se cargue por primera vez en la memoria.

2.

En el procedimiento Form1_Load, escriba el siguiente cdigo.

VB
Copiar

Dim aInteger As Integer = 42

Dim aSingle As Single = 39.345677653
Dim aString As String = "I like candy"
Dim aBoolean As Boolean = True

Este cdigo declara cuatro variables y asigna sus valores predeterminados. Las cuatro
variables son Integer, Single, String y Boolean.

Sugerencia:
Al escribir el cdigo, quiz haya observado que despus de escribir As, aparece una lista de palabras
bajo el cursor. Esta caracterstica se llama IntelliSense. Permite escribir las primeras letras de una
palabra hasta que se seleccione la palabra en la lista. Una vez seleccionada, presione la tecla TAB
para finalizar la palabra.

Nota:
Siempre que representa texto real en un programa, ste debe aparecer entre comillas (""). Esto le
dice al programa que interprete el texto como texto real en lugar de interpretarlo como un nombre
de variable. Cuando asigna un valor True o False a una variable Boolean, la palabra no se encierra
entre comillas, porque True y False son palabras clave de Visual Basic, con significados especiales
propios.

3.

Debajo del cdigo que escribi en el paso anterior, escriba lo siguiente.

VB
Copiar

MsgBox(aInteger)
MsgBox(aSingle)
MsgBox(aString)

MsgBox(aBoolean)

Este cdigo indica al programa que muestre cada valor que asign en el paso anterior en
una nueva ventana, utilizando la funcinMsgBox.
4.

Presione F5 para ejecutar el programa.

Haga clic en Aceptar para cada cuadro de mensaje que aparezca. Observe que se muestra
cada vez el valor de cada variable. Puede cerrar el formulario haciendo clic en la x situada en
la esquina superior derecha del formulario. Cuando haya finalizado el programa, puede
volver y cambiar los valores que se asignaron en el cdigo; compruebe que los nuevos
valores aparecen la siguiente vez que ejecute el programa.

Palabras y texto: utilizar variables de cadena para

organizar palabras
Visual Studio 2008
Otras versiones

Actualizacin: noviembre 2007

En esta leccin, aprender a utilizar el tipo de datos String para representar palabras y texto.
En la leccin anterior, se mostraba cmo usar las variables para almacenar datos en un programa y
que cada variable debe ser del tipo adecuado para los datos que almacenar. En esta leccin,
aprender sobre el tipo de datos String utilizado para almacenar el texto.

Qu es una cadena?

Una cadena es cualquier serie de caracteres de texto, como letras, nmeros, caracteres especiales y
espacios. Las cadenas pueden ser frases y oraciones legibles, como "El rpido zorro de color caf
salta sobre el perro perezoso" o una combinacin aparentemente ininteligible como "@#fTWRE^3
35Gert".
Las variables String se crean del mismo modo que otras variables, es decir, declarando primero la
variable y asignndole despus un valor, tal y como se muestra a continuacin.
VB

Copiar

Dim aString As String = "This is a string"

Al asignar un texto real (tambin denominado literales de cadena) a una variable String, el texto debe
estar entre comillas (""). Tambin puede utilizar el carcter = para asignar una variable String a otra
variable String, como se muestra en este ejemplo.
VB
Copiar

Dim aString As String = "This is a string"

Dim bString As String = ""

bString = aString

El cdigo anterior establece el valor de bString en el mismo valor que aString (This is a string).
Puede usar el carcter & para combinar dos o ms cadenas secuencialmente en una nueva cadena,
tal y como se muestra a continuacin. Esta operacin tambin recibe el nombre de concatenacin.
VB
Copiar

Dim aString As String = "using string"

Dim bString As String = "variables"
Dim cString As String = ""
cString = aString & bString

El ejemplo anterior declara tres variables de String y asigna respectivamente "using string" y
"variables" a las dos primeras, y luego asigna los valores combinados de las dos primeras a la tercera
variable. Cul cree que es el valor de cString? Le sorprender saber que el valor es using
stringvariables ya que no hay ningn espacio al final de aString ni al inicio de bString. Las dos
cadenas simplemente estn unidas. Si desea agregar espacios o cualquier otro smbolo entre dos
cadenas, deber hacerlo mediante un literal de cadena, como " ", tal y como se muestra a
continuacin.

VB
Copiar

Dim aString As String = "using string"

Dim bString As String = "variables"
Dim cString As String = ""
cString = aString & " " & bString

Ahora, el texto incluido en cString dice using string variables.

Intntelo

Para unir las cadenas

1.
2.

En el men Archivo, haga clic en Nuevoproyecto.

En el cuadro de dilogo Nuevo proyecto:
a. En el panel Plantillas, haga clic en Aplicacin para Windows.
b. En el cuadro Nombre, escriba Concatenacin.
c. Haga clic en Aceptar.
Se abre un nuevo proyecto de formularios Windows Forms.

3.
4.

Haga doble clic en el formulario para abrir el Editor de cdigo.

En el procedimiento del evento Form1.Load, declare cuatro variables de cadena y asigne los
valores de cadena, tal y como se muestra a continuacin:
VB
Copiar

Dim aString As String = "Concatenating"

Dim bString As String = "Without"
Dim cString As String = "With"
Dim dString As String = "Spaces"

5.

Agregue el siguiente cdigo para concatenar las cadenas y mostrar los resultados:
VB

Copiar

' Displays "ConcatenatingWithoutSpaces".

MsgBox(aString & bString & dString)

' Displays "Concatenating With Spaces".

MsgBox(aString & " " & cString & " " & dString)

6.

Presione F5 para ejecutar el programa.

El texto mostrado en el cuadro de mensaje es el resultado de la unin de las variables de
cadena asignadas en un paso anterior. En el primer cuadro, las cadenas estn unidas sin
espacios. En el segundo, los espacios se insertan explcitamente entre cada cadena.

Matrices: variables que representan ms de un valor

Visual Studio 2008
Otras versiones

Actualizacin: noviembre 2007

En esta leccin, aprender a utilizar matrices para almacenar grupos de valores.
Tal y como se ha explicado en las lecciones anteriores, las variables se usan para almacenar diferentes
tipos de datos que el programa utiliza. Hay otro tipo de variable denominado matriz que
proporciona una manera conveniente de almacenar diversos valores del mismo tipo.
Por ejemplo, supongamos que est escribiendo un programa para un equipo de bisbol y desea
almacenar los nombres de todos los jugadores que se encuentran en el campo de juego. Puede crear
nueve variables de cadenas distintas, una para cada jugador, o puede declarar una variable de matriz
que se parezca al cdigo que se muestra a continuacin.
VB
Copiar

Dim players() As String

Una variable de matriz se declara colocando parntesis despus del nombre de la variable. Si se sabe
por anticipado cuntos valores deben almacenarse, tambin se puede especificar el tamao de la
matriz en la declaracin de la siguiente manera.
VB
Copiar

Dim players(8) As String

El tamao de la matriz es 9 porque un equipo del bisbol tiene 9 jugadores. Una matriz est formada
por una serie de valores, o elementos, que comienzan con el elemento 0 y terminan con un nmero
inferior al especificado en la declaracin. En este caso, la matriz contiene los elementos 0 a 8, de un
total de nueve. Si desea hacer referencia a uno de los jugadores del equipo, basta con que reste 1.
Por ejemplo, para hacer referencia al primer jugador, debe hacer referencia al elemento 0, para hacer
referencia al noveno jugador, debe hacer referencia al elemento 8.

Asignar valores a las matrices

Al igual que ocurre con otros tipos de valores, es necesario asignar valores a las matrices. Para ello,
debe hacer referencia al nmero del elemento como parte de la asignacin, tal y como se muestra a
continuacin.
VB
Copiar

players(0) = "John"
players(3) = "Bart"

En el cdigo anterior, el valor John se asigna al primer elemento de la matriz (elemento 0) y el valor
Bart se asigna al cuarto elemento (elemento 3). Los elementos de la matriz no se tienen que asignar
en orden y cualquier elemento sin asignar tendr un valor predeterminado; en este caso, una cadena
vaca.
Al igual que con otros tipos de valores, puede declarar y asignar los valores a una matriz en una lnea
nica de la siguiente manera.
VB
Copiar

Dim players() As Integer = {1, 2, 3, 4, 5, 6, 7, 8, 9}

En este caso, las llaves indican una lista de valores. Los valores se asignan a los elementos en el orden
mostrado. Observe que no se especifica el tamao de la matriz, lo determina el nmero de elementos
que se muestran.

Recuperar valores de las matrices

Al igual que se usan nmeros para especificar la posicin de un elemento en una matriz, para
especificar el valor que se desea recuperar se utiliza el nmero de elemento.
VB
Copiar

Dim AtBat As String

AtBat = players(3)

El cdigo anterior recupera el cuarto elemento de la matriz y lo asigna a la variable de cadena AtBat.

Intntelo

Para almacenar los valores en una matriz

1.
2.
3.

En el men Archivo, haga clic en Nuevo proyecto.

En el cuadro de dilogo Nuevo proyecto, en el panel Plantillas, haga clic en Aplicacin para
Windows.
En el cuadro Nombre, escriba MyFirstArray y, a continuacin, haga clic en Aceptar.
Se abre un nuevo proyecto de formularios Windows Forms.

4.
5.
6.
7.

En el Cuadro de herramientas, arrastre un control Textbox al formulario.

En el Cuadro de herramientas, arrastre un control Button al formulario.
Haga doble clic en Button para abrir el Editor de cdigo.
En el procedimiento de evento Button1_Click, agregue el siguiente cdigo:
VB
Copiar

Dim players() As String = {"Dan", "Fred", "Bart", "Carlos", _

"Ty", "Juan", "Jay", "Sam", "Pedro"}
Dim i As Integer = CInt(Textbox1.Text)
MsgBox(players(i) & " is on first base.")

Observe que el cdigo anterior usa la funcin CInt para convertir el valor String
(TextBox1.Text) en un valor Integer (i). Puede obtener ms informacin sobre las
conversiones en Informacin detallada: convertir un tipo de variable en otro.
8.
9.

Presione F5 para ejecutar el programa.

Escriba un nmero comprendido entre 0 y 8 en el cuadro de texto y haga clic en el botn. Se
muestra el nombre que corresponde a ese elemento en un cuadro de mensaje.

Sugerencia:
Debera escribir cdigo adicional para comprobar que los datos escritos son vlidos. Por ejemplo,
puede comprobar que el valor escrito es un valor numrico comprendido entre 0 y 8. Para obtener
ms informacin, consulte Qu hacer cuando algo sale mal: control de errores.

Aritmtica: crear expresiones con variables y

operadores
Visual Studio 2008
Otras versiones

Actualizacin: noviembre 2007

En esta leccin, aprender a crear expresiones para realizar operaciones aritmticas y devolver
valores.
Una expresin es un segmento de cdigo que realiza operaciones aritmticas y, a continuacin,
devuelve un valor. En el siguiente ejemplo se muestra una expresin de suma simple:
5+4

La expresin 5 + 4, cuando se evala, devuelve el valor 9, y est formada por dos partes: los
operandos (5 y 4), que son los valores con los que se realiza la operacin, y el operador (+), que
especifica la operacin que se va a realizar.

Utilizar valores devueltos por expresiones

Para que una expresin sea til, se debe realizar una accin con el valor que se devuelve. Lo ms
comn es asignar el valor a una variable, tal y como se muestra a continuacin.
VB
Copiar

Dim anInteger As Integer = 5 + 4

Este ejemplo declara una nueva variable Integer, llamada anInteger y le asigna el valor devuelto por 5
+4.

Operadores aritmticos

Las expresiones habitualmente se utilizan para realizar operaciones aritmticas con variables: suma,
resta, multiplicacin o divisin. En la tabla siguiente se describen los operadores que se usan con ms
frecuencia en las operaciones aritmticas.

Operador

Descripcin

Ejemplo

+ (suma)

Devuelve la suma de dos operandos

5+4

- (resta)

Devuelve la diferencia de dos operandos

5-4

* (multiplicacin)

Devuelve el producto de dos operandos

5*4

/ (divisin)

Devuelve el cociente de dos operandos

5/4

El tipo de variable utilizado para realizar la operacin aritmtica puede afectar al resultado. La
divisin de dos nmeros a menudo da como resultado un valor que no es un nmero entero. Por
ejemplo, cuando se divide 3 por 2, el resultado es 1,5. Si se asigna el valor devuelto de esa expresin
a una variable Integer, se redondear al nmero entero ms cercano. Al realizar la divisin, se debe
utilizar una variable Double para almacenar el valor devuelto.

Nota:
Tambin se puede convertir una variable de un tipo de datos en otra mediante las funciones de
conversin de Visual Basic. Para obtener ms informacin, vea Informacin detallada: convertir un tipo
de variable en otro.

Intntelo

Para sumar nmeros

1.
2.
3.

En el men Archivo, haga clic en Nuevo proyecto.

En el cuadro de dilogo Nuevo proyecto, en el panel Plantillas, haga clic en Aplicacin para
Windows.
En el cuadro Nombre, escriba Arithmetic y haga clic en Aceptar.
Se abrir un nuevo proyecto de formularios Windows Forms.

4.
5.
6.
7.

En el Cuadro de herramientas, arrastre dos controles Textbox al formulario.

En el Cuadro de herramientas, arrastre un control Button al formulario.
Haga doble clic en Button para abrir el Editor de cdigo.
En el procedimiento de evento Button1_Click, escriba el siguiente cdigo.
VB
Copiar

Dim A As Double = Textbox1.Text

Dim B As Double = Textbox2.Text

MsgBox(A + B)
MsgBox(A - B)
MsgBox(A * B)
MsgBox(A / B)

Las dos primeras lneas declaran las variables A y B. A y B contendrn los valores numricos
utilizados en este programa y asignarn los valores de los dos controles TextBox (su texto) a
las variables A y B.

Las cuatro lneas finales crean expresiones con las dos variables y cada uno de los
operadores aritmticos bsicos y muestran los resultados de esas expresiones en un cuadro
de mensaje.
8.
9.

Presione F5 para ejecutar la aplicacin.

Escriba un nmero en cada cuadro de texto y haga clic en Button1.

Nota:
Si escribe algn otro carcter en los cuadros de texto, se producir un error.

10. Las expresiones se crean usando los dos nmeros que se escriben y uno de los cuatro
operadores aritmticos bsicos (suma, resta, multiplicacin y divisin). El resultado de cada
expresin se muestra en un cuadro de mensaje.

Comparaciones: Utilizar expresiones para comparar

valores
Visual Studio 2008
Otras versiones

Actualizacin: noviembre 2007

En esta leccin, obtendr informacin sobre cmo utilizar los operadores de comparacin para crear
expresiones que comparan valores.
En la ltima leccin, vimos cmo utilizar operadores aritmticos para crear expresiones numricas y
devolver valores numricos. Se puede utilizar otro tipo de operador, los operadores de comparacin,
para comparar valores numricos y devolver valores Boolean (True o False).
Los operadores de comparacin se utilizan frecuentemente para comparar valores y tomar decisiones
basadas en esa comparacin. La toma de decisiones en el programa se tratar exhaustivamente en
Hacer que un programa elija entre dos posibilidades: la instruccin If...Then.
La siguiente tabla resume los operadores de comparacin:

Operador

Descripcin

Ejemplos

= (igual)

Devuelve True si el nmero del lado izquierdo es igual al

5 = 4 (falso)

nmero del lado derecho.

4 = 5 (falso)

4=4
(verdadero)

<> (distinto de)

Devuelve True si el nmero de la izquierda no es igual al

5 <> 4 (True)

nmero de la derecha.

4 <> 5 (True)
4 <> 4 (False)

> (mayor que)

Devuelve True si el nmero de la izquierda es mayor que el

5 > 4 (True)

nmero de la derecha.

4 > 5 (False)
4 > 4 (False)

< (menor que)

Devuelve True si el nmero de la izquierda es menor que el

5 < 4 (False)

nmero de la derecha.

4 < 5 (True)
4 < 4 (False)

>= (mayor o igual

Devuelve True si el nmero de la izquierda es mayor o igual

5 >= 4 (True)

que)

que el nmero de la derecha.

4 >= 5 (False)
4 >= 4 (True)

<= (menor o igual

Devuelve True si el nmero de la izquierda es menor o igual

5 <= 4 (False)

que)

que el nmero de la derecha.

4 <= 5 (True)
4 <= 4 (True)

Intntelo

Para comparar expresiones

1.
2.
3.

En el men Archivo, haga clic en Nuevo proyecto.

En el cuadro de dilogo Nuevo proyecto, en el panel Plantillas, haga clic en Aplicacin para
Windows.
En el cuadro Nombre, escriba Comparison y haga clic en Aceptar.
Se abrir un nuevo proyecto de formularios Windows Forms.

4.
5.

En el Cuadro de herramientas, arrastre dos controles Textbox al formulario.

En el Cuadro de herramientas, arrastre un control Button al formulario.

6.
7.

Haga doble clic en Button para abrir el Editor de cdigo.

En el controlador de eventos Button1_Click, escriba el siguiente cdigo:
VB
Copiar

Dim A As Double = CDbl(Textbox1.Text)

Dim B As Double = CDbl(Textbox2.Text)
MsgBox(A > B)
MsgBox(A < B)
MsgBox(A = B)

Las dos primeras lneas declaran las variables A y B, que contendrn los valores numricos
usados en este programa; utilizan la instruccin CDbl para convertir el texto de Textbox1 y
Textbox2 en valores numricos. Finalmente, las ltimas tres lneas crean expresiones que
permiten comparar las dos variables mediante tres operadores de comparacin bsicos y
muestran los resultados de esas expresiones en tres cuadros de mensaje.
8.
9.

Presione F5 para ejecutar la aplicacin.

Escriba un nmero en cada uno de los cuadros de texto y haga clic en Button1.
El primer cuadro de mensaje mostrar True si A (el nmero que escribi en el primer cuadro
de texto) es mayor que B (el nmero que escribi en el segundo cuadro de texto); de lo
contrario, mostrar False. El segundo cuadro de mensaje mostrar True si A es menor que B,
y el tercer cuadro de mensaje mostrar True si ambos nmeros son iguales.
Pruebe a escribir diferentes nmeros en los cuadros de texto para ver cmo cambian los
resultados.

Informacin detallada: convertir un tipo de variable

en otro
Visual Studio 2008
Otras versiones

Actualizacin: noviembre 2007

Como se explic en lecciones anteriores, hay distintos tipos de variables. El tipo determina la clase de
datos que puede contener una variable. Una variable de tipo Integer slo puede contener datos
numricos sin separadores decimales. Una variable de tipo String slo puede contener texto.
Qu pasa cundo desea mostrar un valor Integer en un control TextBox que requiere una variable
de tipo String? La respuesta es que los datos se deben convertir de un tipo a otro. En este tema,
estudiar cmo convertir los datos de un tipo en otro y aprender algunas tcnicas utilizadas para la
conversin de datos, as como algunos de sus problemas habituales.

Convertir variables en texto

Cada variable de Visual Basic se puede convertir en texto usando una funcin especial llamada CStr
(que es la abreviatura del ingls Convert to String: convertir en cadena). Esta funcin, como el
nombre implica, devuelve los datos representados por la variable como de tipo String. El
procedimiento siguiente muestra un ejemplo sencillo de convertir un valor Integer en texto.

Intntelo!

Para convertir una variable en texto

1.
2.
3.

En el men Archivo, haga clic en Nuevoproyecto.

En el cuadro de dilogo Nuevo proyecto, en el panel Plantillas, haga clic en Aplicacin para
Windows.
En el cuadro Nombre, escriba Conversion y haga clic en Aceptar.
Se abrir un nuevo proyecto de formularios Windows Forms.

4.
5.

Haga doble clic en el formulario para abrir el Editor de cdigo.

En el controlador del evento Form1_Load, escriba el siguiente cdigo.
VB
Copiar

Dim anInteger As Integer = 54

MsgBox(CStr(anInteger))

Este cdigo declara una variable de tipo entero llamada anInteger, le asigna un valor de 54 y,
a continuacin, convierte ese valor en texto y lo muestra en un cuadro de mensaje llamando
a la funcin CStr.
6.

Presione F5 para compilar y ejecutar la aplicacin. Aparece un cuadro de mensaje que indica
54.

Probemos algo slo por diversin. En el Editor de cdigo, cambie la lnea que indica
MsgBox(CStr(anInteger)) para que indique MsgBox(anInteger) y presione F5 para ejecutarla.
Qu pasa? El programa se comporta exactamente igual que antes. Visual Basic es lo
suficientemente inteligente para saber que realmente desea convertir la variable de tipo
Integer en texto para que aparezca en el cuadro de mensaje. Sin embargo, no puede confiar
en este comportamiento para todas las clases: existen muchos tipos de variables que no se
pueden convertir automticamente. Por consiguiente, es una buena prctica usar siempre la
funcin CStr, aun cuando una variable se convertira automticamente en texto.
Adems de la conversin de variables Integer en texto, se puede utilizar la funcin CStr en cualquier
tipo de dato numrico, como Double o Long. Tambin se puede utilizar para convertir la informacin
de Date y tipos de datos Boolean en texto. Para obtener ms informacin sobre los tipos de datos,
vea Informacin detallada: tipos de datos.

Conversin entre tipos de datos numricos

Como aprendi en la leccin aritmtica, a veces el resultado de una operacin aritmtica no se puede
expresar como un valor de tipo Integer. Al igual que Visual Basic tiene una funcin para convertir
nmeros en texto, tambin tiene funciones para convertir variables de un tipo de datos numricos en
otro. Por ejemplo, puede utilizar la funcin CDbl (de Convert to Double) en una operacin aritmtica
para devolver un nmero fraccionario al trabajar con variables de tipo Integer. El procedimiento
siguiente muestra cmo utilizar la funcin CDbl al dividir dos enteros.

Intntelo!

Para convertir tipos de datos numricos

1.

En el Editor de cdigo, elimine el cdigo que escribi en el procedimiento anterior y escriba

lo siguiente:
VB
Copiar

Dim A As Integer = 1
Dim B As Integer = 2
MsgBox(CDbl(A / B))

Este cdigo declara dos variables de tipo Integer (A y B), les asigna los valores 1 y 2 y, a
continuacin, convierte el resultado de la operacin de divisin (A / B) utilizando la funcin
CDbl y lo muestra en un cuadro de mensaje.

2.

Presione F5 para compilar y ejecutar la aplicacin. Aparece un cuadro de mensaje que indica
0.5.

Visual Basic tambin tiene funciones para otros tipos de variables numricas. Por ejemplo, si agrega
dos variables de tipo Double y desea redondear el resultado al nmero entero ms cercano, utilice la
funcin CInt. Otras funciones de conversin numricas son CByte, CDec, CLng y CShort. Para obtener
una lista de todas las funciones de conversin de Visual Basic, vea Funciones de conversin de tipos.

Hacer que el equipo haga algo: escribir el primer

procedimiento
Visual Studio 2008
Otras versiones

Actualizacin: noviembre 2007

En esta leccin, aprender a crear un procedimiento, es decir, un bloque de cdigo independiente
que puede ejecutarse desde otros bloques de cdigo. A continuacin, aprender a crear parmetros
para los procedimientos.
Un procedimiento es simplemente un bloque de cdigo que indica al programa que realice una
accin. Aunque es posible que no lo haya notado, ya se han utilizado procedimientos en las lecciones
anteriores. Por ejemplo, la funcin MsgBox tiene un procedimiento integrado que realiza la accin de
mostrar un cuadro de dilogo.
Mientras Visual Basic tiene muchos procedimientos integrados para realizar las acciones comunes,
siempre habr casos en que se desea que el programa realice una accin que un procedimiento
integrado no puede controlar. Por ejemplo, la funcin MsgBox no puede mostrar un cuadro de
dilogo que contenga una imagen. Es necesario escribir un procedimiento para realizar esta tarea.

Qu es un procedimiento?

Un procedimiento es un bloque de cdigo independiente que se puede ejecutar desde otros bloques
de cdigo. En general, cada procedimiento contiene el cdigo necesario para realizar una tarea.
Pongamos, por ejemplo, que dispone de un procedimiento denominado PlaySound que contiene el
cdigo necesario para reproducir un archivo de onda. Aunque puede escribir el mismo cdigo para
reproducir un sonido cada vez que el programa tenga que realizar un ruido, tiene ms sentido crear
un procedimiento nico al que se pueda llamar en cualquier parte del programa.
Un procedimiento se ejecutallamndolo en el cdigo. Por ejemplo, para ejecutar el procedimiento
PlaySound, basta con que agregue una lnea de cdigo con el nombre del procedimiento, tal y como
se muestra a continuacin.

PlaySound()
Es todo lo que tiene que hacer. Cuando el programa llegue a esa lnea, ir al procedimiento
PlaySound y ejecutar el cdigo all contenido. A continuacin, el programa regresa a la siguiente
lnea que viene despus de la llamada a PlaySound.
Puede llamar a tantos procedimientos como desee. Los procedimientos se ejecutan en el orden de
llamada. Por ejemplo, podra tener tambin un procedimiento denominado DisplayResults; para
ejecutarlo despus de ejecutar el procedimiento PlaySounds, llame a los procedimientos tal y como
se muestra a continuacin.
PlaySounds()
DisplayResults()

Funciones y Subs

Existen dos tipos de procedimientos: las funciones y las subrutinas (tambin denominadas sub). Una
funcin devuelve un valor al procedimiento que la llam, mientras que una subrutina simplemente
ejecuta cdigo. Se llama a una subrutina cuando una lnea de cdigo, que contiene el nombre de
sta, se agrega al programa como en el siguiente ejemplo.
DisplayResults
Las funciones son diferentes, porque las funciones no slo ejecutan cdigos, tambin devuelven un
valor. Por ejemplo, imagine una funcin llamada GetDayOfWeek que devuelve un Integer que indica
el da de la semana. Se llama a esta funcin declarando primero una variable para almacenar el valor
devuelto y asignando despus el valor devuelto a la variable para un uso posterior, tal y como se
muestra a continuacin.
Dim Today As Integer
Today = GetDayOfWeek
En este ejemplo, el valor devuelto por la funcin se copia a la variable denominada Today y se
almacena para un uso posterior.

Escribir procedimientos

Los procedimientos se escriben colocando primero una declaracin de procedimiento. Una

declaracin de procedimiento realiza varias acciones. Indica si el procedimiento es una funcin o una
subrutina, asigna un nombre al procedimiento y detalla todos los parmetros que puede tener. (Los
parmetros se analizarn en profundidad ms adelante en esta leccin.) A continuacin, se ofrece un
ejemplo de una declaracin de procedimiento sencilla.
VB
Copiar

Sub MyFirstSub()
End Sub

La palabra clave Sub indica al programa que este procedimiento es una subrutina y no devolver un
valor. El nombre de la subrutina (MyFirstSub) viene a continuacin y el parntesis vaco indica que no
hay parmetros para este procedimiento. Finalmente, la palabra clave End Sub indica el fin de la
subrutina. Todos los cdigos que tiene que ejecutar esta subrutina van entre estas dos lneas.
Declarar funciones es similar, pero, adems, se debe especificar el tipo de valor devuelto (como por
ejemplo,Integer, String, etc.). Por ejemplo, una funcin que devolvi un valor Integer puede ser
similar a la siguiente.
VB
Copiar

Function MyFirstFunction() As Integer

End Function

Las palabras clave As Integer indican que la funcin devolver un valor Integer . Para devolver un
valor desde una funcin, utilice la palabra clave Return, como se muestra en el ejemplo siguiente.
VB
Copiar

Function GetTheNumberOne() As Integer

Return 1
End Function

Este procedimiento devolver el nmero 1.

Intntelo

Para crear procedimientos

1.

En el men Archivo, haga clic en Nuevo proyecto.

2.
3.

En el cuadro de dilogo Nuevo proyecto, en el panel Plantillas, haga clic en Aplicacin para
Windows.
En el cuadro Nombre, escriba MyFirstProcedure y, a continuacin, haga clic en Aceptar.
Se abre un nuevo proyecto de formularios Windows Forms.

4.
5.

Haga doble clic en el formulario para abrir el Editor de cdigo.

En el Editor de cdigo, busque la lnea que contiene End Class. Esta lnea indica el final de la
seccin de cdigo que compone el formulario. Inmediatamente antes de esta lnea, agregue
el siguiente procedimiento:
VB
Copiar

Function GetTime() As String

Return CStr(Now)
End Function

Esta funcin usa el procedimiento integrado Now para recibir la hora actual y, a
continuacin, utiliza la funcin CStr para convertir el valor devuelto por Now en un valor de
tipo String legible. Finalmente, ese valor String se devuelve como el resultado de la funcin.
6.

Sobre la funcin que agreg en el paso anterior, agregue el siguiente Sub.

VB
Copiar

Sub DisplayTime()
MsgBox(GetTime)
End Sub

Esta subrutina llama a la funcin GetTime y muestra el resultado que devolvi en un cuadro
de mensaje.
7.

Finalmente, agregue una lnea al controlador del evento Form1_Load que llama a la
subrutina DisplayTime, tal y como se muestra en el siguiente ejemplo.
VB
Copiar

DisplayTime()

8.

Presione F5 para ejecutar el programa.

Cuando el programa se inicia, se ejecuta el procedimiento de evento Form1_Load. Este
procedimiento llama a la subrutina DisplayTime, de manera que la ejecucin del programa
va al procedimiento de subrutina DisplayTime. Esa subrutina a su vez llama a la funcin
GetTime, por lo que la ejecucin del programa va a la funcin GetTime. Esta funcin
devuelve una String que representa el tiempo para el procedimiento de subrutina
DisplayTime, el que muestra esa cadena en un cuadro de mensaje. Despus de que la
subrutina termina de ejecutarse, el programa contina normalmente y muestra el formulario.

Parmetros en funciones y subrutinas

A veces, ser necesario suministrar informacin adicional a los procedimientos. Por ejemplo, en el
procedimiento PlaySound, se desea reproducir uno de varios sonidos diferentes. La informacin
acerca de qu sonido debe reproducirse puede suministrarse utilizando parmetros.
Los parmetros se parecen mucho a las variables. Tienen un tipo y un nombre y almacenan
informacin al igual que las variables. Se pueden utilizar como variables en un procedimiento. Existen
dos diferencias principales entre los parmetros y las variables:

Los parmetros se declaran en la declaracin de procedimiento, no en lneas individuales de

cdigo.
Slo se pueden utilizar los parmetros en el procedimiento en el que se declaran.

Los parmetros se declaran en la declaracin de procedimiento, en los parntesis que siguen al

nombre del procedimiento. La palabra clave As se utiliza para declarar el tipo y la palabra clave ByVal
precede generalmente a cada parmetro. Visual Basic agregar automticamente esta palabra clave
si no se agrega, sta tiene una funcin bastante avanzada que va ms all de los temas tratados en
esta leccin.
A continuacin, se muestra un ejemplo de una subrutina con parmetros.
VB
Copiar

Sub PlaySound(ByVal SoundFile As String, ByVal Volume As Integer)

My.Computer.Audio.Play(SoundFile, Volume)
End Sub

Despus, se llamar a la subrutina con los valores para los parmetros, tal y como se muestra a
continuacin.
VB
Copiar

PlaySound("Startup.wav", 1)

Los parmetros para las funciones tambin pueden declararse del mismo modo que hara con las
subrutinas.

Intntelo

Para crear una funcin con parmetros

1.
2.
3.

En el men Archivo, haga clic en Nuevo proyecto.

En el cuadro de dilogo Nuevo proyecto, en el panel Plantillas, haga clic en Aplicacin para
Windows.
En el cuadro Nombre, escriba parameters y haga clic en Aceptar.
Se abre un nuevo proyecto de formularios Windows Forms.

4.
5.
6.
7.

En el Cuadro de herramientas, arrastre dos controles Textbox al formulario.

En el Cuadro de herramientas, arrastre un control Button al formulario.
Haga doble clic en Button para abrir el Editor de cdigo.
Inmediatamente despus de la lnea End Sub del controlador de eventos Button1_Click,
agregue el siguiente procedimiento:
VB
Copiar

Function AddTwoNumbers(ByVal N1 As Integer, ByVal N2 As Integer) _

As Integer
Return N1 + N2
End Function

8.

En el procedimiento Button1_Click, agregue el cdigo siguiente:

VB

Copiar

Dim aNumber As Integer = CInt(Textbox1.Text)

Dim bNumber As Integer = CInt(Textbox2.Text)
MsgBox(AddTwoNumbers(aNumber, bNumber))

Este cdigo declara dos enteros y convierte el texto de los dos cuadros de texto en valores
enteros. Luego pasa dichos valores a la funcin AddTwoNumbers y muestra el valor devuelto
en un cuadro de mensaje.
9. Presione F5 para ejecutar el programa.
10. Escriba un valor numrico en cada cuadro de texto y haga clic en el botn. Se sumarn los
dos nmeros y el resultado se mostrar en un cuadro de mensaje.

Hacer que un programa repita acciones: establecer

bucles For...Next
Visual Studio 2008
Otras versiones

Actualizacin: noviembre 2007

En esta leccin, aprender a utilizar la instruccin For...Next para repetir las acciones en el programa y
para contar cuntas veces se han realizado estas acciones.
Cuando escribe un programa, debe repetir las acciones con frecuencia. Por ejemplo, suponga que
est escribiendo un mtodo que muestra una serie de nmeros en pantalla. Desear repetir la lnea
de cdigo que muestra el nmero las veces que sea necesario.
El bucle For...Next le permite especificar un nmero y repetir un cdigo contenido dentro de ese
bucle para el nmero especfico de veces. El siguiente ejemplo muestra cmo aparece un bucle
For...Next en un cdigo.
VB
Copiar

Dim i As Integer = 0
For i = 1 To 10
DisplayNumber(i)
Next

El bucle For...Next comienza con una variable de contador, i. sta es una variable que utiliza el bucle
para contar la cantidad de veces que se ha ejecutado. La siguiente lnea (For i = 1 to 10) le dice al
programa cuntas veces se debe repetir el bucle y los valores i que va a tener.
Cuando el cdigo entra en el bucle For...Next, se inicia con i que contiene el primer valor, en este
caso 1. El programa ejecuta las lneas de cdigo entre la lnea For y la lnea Next, en este caso
llamando al mtodo DisplayNumber con un parmetro de i (en este caso tambin 1).
Cuando se alcanza la lnea Next, se agrega 1 a i y la ejecucin de programa regresa nuevamente a la
lnea For. Esto se repite hasta que el valor de i es mayor que el segundo nmero en la lnea For, en
este caso 10. Cuando esto sucede, el programa contina con cualquier cdigo despus de la lnea
Next.

Intntelo

Para utilizar la instruccin For...Next

1.
2.
3.

En el men Archivo, seleccione Nuevo proyecto.

En el cuadro de dilogo Nuevo proyecto, en el panel Plantillas, haga clic en Aplicacin para
Windows.
En el cuadro Nombre, escriba ForNext y haga clic en Aceptar.
Se abre un nuevo proyecto de formularios Windows Forms.

4.
5.
6.

En el Cuadro de herramientas, arrastre un control TextBox y un control Button al formulario.

Haga doble clic en Button para abrir el Editor de cdigo.
En el controlador de eventos Button1_Click, escriba el siguiente cdigo:
VB
Copiar

Dim i As Integer = 0
Dim NumberOfRepetitions As Integer = CInt(Textbox1.Text)
For i = 1 To NumberOfRepetitions
MsgBox("This line has been repeated " & i & " times")

Next

7.
8.

Presione F5 para ejecutar el programa.

En el cuadro de texto, escriba un nmero y haga clic en el botn.
Aparece un Cuadro de mensaje las veces indicadas en el cuadro de texto.

Hacer que un programa elija entre dos posibilidades:

la instruccin If...Then
Visual Studio 2008
Otras versiones

Actualizacin: noviembre 2007

En esta leccin, aprender a utilizar la instruccin If...Then para ejecutar el cdigo basado en
condiciones.
Los programas deben realizar diferentes acciones en respuesta a distintas condiciones. Por ejemplo,
quiz desee que el programa compruebe qu da de la semana es y haga algo diferente
dependiendo del da. La instruccin If...Then permite evaluar una condicin y ejecutar las diferentes
secciones de cdigo basndose en los resultados de esa condicin.
El siguiente ejemplo muestra cmo funciona la instruccin If...Then.
VB
Copiar

If My.Computer.Clock.LocalTime.DayOfWeek = DayOfWeek.Monday Then

MsgBox("Today is Monday!")
End If

Cuando se ejecuta este cdigo, se evala la condicin (la parte entre If y Then). Si la condicin es
true, se ejecuta la siguiente lnea de cdigo y se muestra un cuadro de mensaje; si es false, el cdigo
pasa a la lnea End If. En otras palabras, el cdigo estipula "Si hoy es lunes, muestre el mensaje".

Intntelo

Para utilizar la instruccin If...Then

1.
2.
3.

En el men Archivo, seleccione Nuevo proyecto.

En el cuadro de dilogo Nuevo proyecto, en el panel Plantillas, haga clic en Aplicacin para
Windows.
En el cuadro Nombre, escriba IfThen y haga clic en Aceptar.
Se abre un nuevo proyecto de formularios Windows Forms.

4.
5.

Haga doble clic en el formulario para abrir el Editor de cdigo.

En el controlador de eventos Form1_Load, escriba el siguiente cdigo.
VB
Copiar

If My.Computer.Clock.LocalTime.DayOfWeek = DayOfWeek.Saturday Or _
My.Computer.Clock.LocalTime.DayOfWeek = DayOfWeek.Sunday Then
MsgBox("Happy Weekend!")
End If

6.

Presione F5 para ejecutar el programa.

Si hoy es sbado o domingo, aparecer un cuadro de mensaje indicndole Happy Weekend!.
De lo contrario, no aparecer ningn cuadro de mensaje.

7.

En el men Depurar, seleccione Detener depuracin para finalizar el programa. Mantenga

abierto este proyecto. Se utilizar en el siguiente procedimiento, "Para utilizar la clusula
Else".

Es posible que haya observado en el ejemplo anterior que la instruccin If...Then utiliz el operador
Or para evaluar varias condiciones ("Si es sbado Or si es domingo"). Puede utilizar los operadores Or
y And para evaluar tantas condiciones como desee en una instruccin If...Then nica.

La clusula Else

Ha visto cmo utilizar la instruccin If...Then para ejecutar el cdigo si una condicin es true, pero
qu pasa si desea ejecutar un cdigo si una condicin es true, pero otro si es false? En este caso,
puede utilizar la clusula Else. La clusula Else le permite especificar un bloque de cdigos que se
ejecutar si la condicin es false. El siguiente ejemplo muestra cmo funciona la clusula Else.

VB
Copiar

If My.Computer.Clock.LocalTime.DayOfWeek = DayOfWeek.Friday Then

MsgBox("Today is Friday!")
Else
MsgBox("It isn't Friday yet!")
End If

En este ejemplo, se evala la expresin; si es true, se ejecuta la siguiente lnea de cdigo y se muestra
el primer cuadro de mensaje. Si es false, el cdigo se desplaza a la clusula Else y se ejecuta la lnea
Else siguiente, que muestra el segundo cuadro de mensaje.

Intntelo

Este procedimiento comienza donde finaliz "Para utilizar la instruccin If... Then". Si no complet
"Para utilizar la instruccin If... Then", debe hacerlo antes de continuar.

Para utilizar la clusula Else

1.

Cambie el cdigo en la instruccin If...Then de la siguiente forma.

VB
Copiar

If My.Computer.Clock.LocalTime.DayOfWeek = DayOfWeek.Saturday Or _
My.Computer.Clock.LocalTime.DayOfWeek = DayOfWeek.Sunday Then
MsgBox("Happy Weekend!")
Else
MsgBox("Happy Weekday! Don't work too hard!")
End If

2.

Presione F5 para ejecutar el programa. El programa mostrar ahora un cuadro de mensaje

que indica si es un fin de semana o un da de la semana, con contenido adecuado.

Nota:
Para cambiar el da de la semana haga doble clic en la hora en la barra de tareas de Windows, si
desea probar la ejecucin de los dos bloques de cdigo. (La barra de tareas es la que contiene el
botn Inicio de Windows; de manera predeterminada, se encuentra en la parte inferior del escritorio
y la hora se muestra en la esquina derecha).

Informacin detallada: utilizar Do...While y Do...Until

para repetir hasta cumplir una condicin
Visual Studio 2008
Otras versiones

Actualizacin: noviembre 2007

En esta leccin, aprender a utilizar las instrucciones Do...While y Do...Until para repetir el cdigo
basndose en algunas condiciones.
En la leccin anterior, aprendi a usar la instruccin For...Next para recorrer un bloque de cdigo un
nmero especfico de veces, pero qu ocurre si el nmero de veces que el cdigo se debe repetir es
diferente para algunas condiciones? Las instrucciones Do...While y Do...Until permiten repetir un
bloque de cdigo mientras cierta condicin sea True o hasta que cierta condicin sea True.
Por ejemplo, si se dispona de un programa para agregar una serie de nmeros, pero nunca dese
que la suma de los nmeros fuera mayor que 100. Se podra utilizar la instruccin Do...While para
llevar a cabo la suma de la siguiente forma:
VB
Copiar

Dim sum As Integer = 0

Do While sum < 100
sum = sum + 10
Loop

En el cdigo anterior, la lnea Do While evala la variable sum para ver si es menor que 100: si lo es,
se ejecuta la siguiente lnea de cdigo; si no lo es, pasa a la lnea de cdigo que se encuentra a
continuacin de Loop. La palabra clave Loop le dice al cdigo que regrese a la lnea DoWhile y evale
el nuevo valor de sum.

Intntelo

Para utilizar una instruccin Do...While

1.
2.
3.

En el men Archivo, haga clic en Nuevo proyecto.

En el cuadro de dilogo Nuevo proyecto, en el panel Plantillas, haga clic en Aplicacin para
Windows.
En el cuadro Nombre, escriba DoWhile y haga clic en Aceptar.
Se abre un nuevo proyecto de formularios Windows Forms.

4.
5.
6.

En el Cuadro de herramientas, arrastre un control TextBox y un control Button al formulario.

Haga doble clic en Button para abrir el Editor de cdigo.
En el controlador de eventos Button1_Click, escriba el siguiente cdigo:
VB
Copiar

Dim sum As Integer = 0

Dim counter As Integer = 0
Do While sum < 100
sum = sum + CInt(Textbox1.Text)
counter = counter + 1
Loop
MsgBox("The loop has run " & CStr(counter) & " times!")

7.
8.

Presione F5 para ejecutar el programa.

En el cuadro de texto, escriba un nmero y haga clic en el botn.
Aparece un cuadro de mensaje que muestra cuntas veces se sum el nmero a s mismo
antes de llegar a 100.

9.

Para cerrar el programa, en el men Depuracin, haga clic en Detener depuracin. Mantenga
abierto este proyecto. Ms adelante se agregarn elementos.

Instruccin Do...Until

La instruccin Do...While repite un bucle mientras una condicin permanece True, pero a veces es
posible que desee que el cdigo se repita a s mismo hasta que una condicin se convierta True.
Puede utilizar la instruccin Do...Until del siguiente modo.
VB
Copiar

Dim sum As Integer = 0

Do Until sum >= 100
sum = sum + 10
Loop

Este cdigo es similar al cdigo de la instruccin Do...While, slo que esta vez, el cdigo evala la
variable sum para ver si es igual o mayor que 100.

Intntelo

Este procedimiento empieza donde termin "Para utilizar una instruccin Do... While". Si no complet
"Para utilizar una instruccin Do... While", debe hacerlo antes de continuar.

Para utilizar una instruccin Do...Until

1.

Agregue el siguiente cdigo debajo de la lnea MsgBox.

VB
Copiar

Dim sum2 As Integer = 0

Dim counter2 As Integer = 0
Do Until sum2 >= 100
sum2 = sum2 + CInt(Textbox1.Text)
counter2 = counter2 + 1
Loop

MsgBox("The loop has run " & CStr(counter2) & " times!")

2.
3.

Presione F5 para ejecutar el programa.

En el cuadro de texto, escriba un nmero y haga clic en el botn.
Aparece un segundo cuadro de mensaje que muestra cuntas veces se sum el nmero a s
mismo antes de ser igual o mayor que 100.

Informacin detallada: utilizar Select Case para

decidir entre varias opciones
Visual Studio 2008
Otras versiones

Actualizacin: noviembre 2007

En esta leccin, aprender a utilizar la instruccin Select Case para ejecutar cdigo basado en
mltiples condiciones.
En la leccin anterior, se mostr cmo usar las instrucciones If...Then para ejecutar diferentes bloques
de cdigo segn las condiciones. Aunque es posible evaluar ms de dos condiciones en una
instruccin If...Then mediante la palabra clave ElseIf, la instruccin Select Case proporciona una
manera mucho mejor de evaluar varias condiciones.
La instruccin Select Case permite utilizar tantas condiciones (o casos) como sea necesario, y
conviene escribir el cdigo para situaciones en las que hay muchas opciones. Por ejemplo, suponga
que el programa utiliz una variable String para almacenar una opcin de color y se necesitaba
obtener el valor de color. El cdigo para la instruccin Select Case podra ser similar al siguiente:
VB
Copiar

Select Case Color

Case "red"
MsgBox("You selected red")
Case "blue"
MsgBox("You selected blue")

Case "green"
MsgBox("You selected green")
End Select

Cuando se ejecuta este cdigo, la lnea Select Case determina el valor (Color) de la expresin.
Suponga que Color es una variable String y que esta variable es un parmetro para un mtodo que
contiene la instruccin Select Case. El valor de Color se compara con el valor para la primera
instruccin Case. Si el valor coincide, se ejecuta la siguiente lnea de cdigo y el cdigo pasa a la lnea
End Select; si el valor no coincide, se evala la siguiente lnea Case.
La instruccin Case adopta muchas formas distintas; en el ejemplo anterior es String. Pero puede ser
cualquier tipo de datos o expresin.
Puede evaluar un intervalo de nmeros utilizando la palabra clave To, como sigue:
VB
Copiar

Case 1 To 10

En este ejemplo, cualquier nmero entre 1 y 10 ser una coincidencia.

Tambin puede evaluar varios valores en una sola instruccin Case separndolos con comas de la
siguiente forma:
VB
Copiar

Case "red", "white", "green"

En este ejemplo, cualquiera de los tres valores producir una coincidencia.

Tambin puede utilizar operadores de comparacin y la palabra clave Is para evaluar los valores de la
siguiente manera.
VB
Copiar

Case Is > 9

En este ejemplo, cualquier nmero mayor que 9 provocar una coincidencia.

Case Else

El ejemplo anterior funciona cuando conoce todas las condiciones posibles, pero qu sucede si hay
una condicin con la que no contaba? Por ejemplo, si el valor de Color es yellow, el cdigo
simplemente evaluar los tres casos sin encontrar una coincidencia y no se mostrar ningn cuadro
de mensaje.
La instruccin Case Else se puede utilizar para ejecutar el cdigo cuando no se encuentra ninguna
coincidencia, como en el siguiente ejemplo.
VB
Copiar

Select Case Color

Case "red"
MsgBox("You selected red")
Case "blue"
MsgBox("You selected blue")
Case "green"
MsgBox("You selected green")
Case Else
MsgBox("Please choose red, blue, or green")
End Select

En el cdigo anterior, si el valor de Color es yellow el cdigo lo comparar con las primeras tres lneas
Case sin encontrar una coincidencia. Cuando se llega a la lnea Case Else, se ejecuta la siguiente lnea
de cdigo antes de pasar a End Select.

Para utilizar la instruccin Select Case

1.

En el men Archivo, seleccione Nuevo proyecto.

2.
3.

En el cuadro de dilogo Nuevo proyecto, en el panel Plantillas, haga clic en Aplicacin para
Windows.
En el cuadro Nombre, escriba SelectCase y haga clic en Aceptar.
Se abre un nuevo proyecto de formularios Windows Forms.

4.
5.
6.

En el Cuadro de herramientas, arrastre un control TextBox y un control Button al formulario.

Haga doble clic en el botn para abrir el Editor de cdigo.
En el controlador de eventos Button1_Click, escriba el siguiente cdigo.
VB
Copiar

Dim Number As Integer = CInt(Textbox1.Text)

Select Case Number
Case 1
MsgBox("Less than 2")
Case 2 To 5
MsgBox("Between 2 and 5")
Case 6, 7, 8
MsgBox("Between 6 and 8")
Case 9 To 10
MsgBox("Greater than 8")
Case Else
MsgBox("Not between 1 and 10")
End Select

7.
8.

Presione F5 para ejecutar el programa.

En el cuadro de texto, escriba un nmero y haga clic en el botn.
Aparecer un cuadro de mensaje que muestra el mensaje de la instruccin Case que
coincide con el nmero que ha especificado.

Qu hacer cuando algo sale mal: control de errores

Visual Studio 2008

Otras versiones

Actualizacin: noviembre 2007

En esta leccin, aprender a crear cdigo de control de errores bsico para los programas.
Incluso los programas mejor diseados a veces encuentran errores. Algunos errores son defectos en
el cdigo que se pueden encontrar y corregir. Otros errores son una consecuencia natural del
programa; por ejemplo, el programa puede intentar abrir un archivo que ya est en uso. En casos as,
los errores se pueden predecir, pero no evitar. Como desarrollador, es su trabajo predecir estos
errores y ayudar a que el programa los solucione.

Errores en tiempo de ejecucin

Un error que se produce mientras un programa se est ejecutando se llama error en tiempo de
ejecucin. Los errores en tiempo de ejecucin se producen cuando un programa trata de hacer algo
para lo cual no fue diseado. Por ejemplo, si el programa intenta realizar una operacin no vlida,
como convertir una cadena no numrica en un valor numrico, se producir un error en tiempo de
ejecucin.
Cuando se produce un error en tiempo de ejecucin, el programa produce una excepcin, que
soluciona los errores buscando cdigo dentro del programa para tratar el error. Si no se encuentra tal
cdigo, se detiene el programa y se tiene que reiniciar. Dado que esto puede conducir a la prdida
de datos, es prudente crear el cdigo de control de errores dondequiera que se tenga previsto que
se produzcan errores.

El bloque Try...Catch...Finally

Se puede utilizar el bloque Try...Catch...Finally para controlar errores en tiempo de ejecucin en el

cdigo. Puede utilizar Try para un segmento de cdigo; si ese cdigo produce una excepcin, salta al
bloque Catch y se ejecuta el cdigo del bloque Catch. Despus de que ese cdigo ha finalizado, se
ejecuta cualquier cdigo en el bloque Finally. La instruccin End Try cierra el bloque
Try...Catch...Finally completo. En el ejemplo siguiente se ilustra cmo se utiliza cada bloque.
VB
Copiar

Try
' Code here attempts to do something.

Catch
' If an error occurs, code here will run.
Finally
' Code in this block will always run.
End Try

Primero, se ejecuta el cdigo del bloque Try. Si se ejecuta sin error, el programa omite el bloque
Catch y ejecuta el cdigo del bloque Finally. Si se produce un error en el bloque Try, la ejecucin salta
inmediatamente al bloque Catch y se ejecuta el cdigo que se encuentra all; luego se ejecuta el
cdigo del bloque Finally.

Intntelo

Para utilizar el bloque Try...Catch

1.
2.
3.

En el men Archivo, elija Nuevo proyecto.

En el cuadro de dilogo Nuevo proyecto, en el panel Plantillas, haga clic en Aplicacin para
Windows.
En el cuadro Nombre, escriba TryCatch y haga clic en Aceptar.
Se abre un nuevo proyecto de formularios Windows Forms.

4.
5.
6.

En el Cuadro de herramientas, arrastre un control TextBox y un control Button al formulario.

Haga doble clic en Button para abrir el Editor de cdigo.
En el controlador de eventos Button1_Click, escriba el siguiente cdigo:
VB
Copiar

Try
Dim aNumber As Double = CDbl(Textbox1.Text)
MsgBox("You entered the number " & aNumber)
Catch
MsgBox("Please enter a number.")
Finally
MsgBox("Why not try it again?")
End Try

7.
8.

9.

Presione F5 para ejecutar el programa.

En el cuadro de texto, escriba un valor numrico y haga clic en el botn. Aparece un cuadro
de mensaje que muestra el nmero que ha escrito, seguido por una invitacin para volver a
intentarlo.
A continuacin, escriba un valor no numrico en el cuadro de texto, como una palabra y
haga clic en el botn. Esta vez, cuando el programa intente convertir el texto del cuadro de
texto en un nmero, no podr hacerlo y se producir un error. En lugar de finalizar el cdigo
en el bloque Try, se ejecuta el bloque Catch y aparece un cuadro de mensaje solicitando que
se escriba un nmero. Se ejecuta el bloque Finally y se le invita a intentarlo de nuevo.

Crear la apariencia visual de un programa:

introduccin a los formularios Windows Forms
Visual Studio 2008
Otras versiones

Actualizacin: noviembre 2007

La interfaz de usuario es la parte del programa que ven los usuarios cuando ejecutan el programa.
Una interfaz de usuario suele estar compuesta de una ventana principal o formulario y varios
controles, como botones, campos para escribir texto, etc. Estos tipos de programas de Visual Basic se
conocen como aplicaciones de formularios Windows Forms y la interfaz de usuario se crea utilizando
los controles de formularios Windows Forms.

Nota:
Tambin puede crear aplicaciones para Windows mediante la reciente tecnologa Windows
Presentation Foundation. Esta actividad se tratar en el siguiente conjunto de lecciones, Crear la
apariencia visual de un programa: introduccin a Windows Presentation Foundation.

Las lecciones de esta seccin le mostrarn cmo crear una interfaz de usuario utilizando algunos de
los controles de formularios Windows Forms ms comunes.

En esta seccin
Comunicarse con el usuario del programa: interfaz de usuario
Describe cmo crear un formulario y agregarle controles.

Interactuar con el usuario: utilizar botones

Describe cmo agregar un botn a un formulario y cmo agregar cdigo que se ejecutar
cuando el usuario haga clic en el botn.
Mostrar y recibir texto: utilizar etiquetas y cuadros de texto
Describe cmo se puede usar una etiqueta y un cuadro de texto para mostrar texto y recibir
la entrada de texto del usuario.
Hacer que el programa reaccione ante el usuario: crear un controlador de eventos
Describe cmo crear un controlador de eventos para un botn.
Obtener opciones seleccionadas por el usuario: utilizar casillas y botones de opcin
Describe cmo utilizar casillas y botones de opcin para presentar y recuperar las opciones
de usuario.
Mostrar imgenes: Utilizar el control PictureBoxl
Describe cmo mostrar imgenes en un formulario.
Proporcionar opciones al usuario: crear mens en tiempo de diseo
Describe cmo agregar mens estndar y elementos de men a una aplicacin de
formularios Windows Forms.
Usar controles Timer para realizar acciones regulares
Describe cmo usar el componente Timer para ejecutar cdigo a intervalos establecidos.
Controles de varios elementos: trabajar con controles ListBox y ComboBox
Describe cmo agregar y quitar elementos de una lista.
Mostrar fechas: Usar los controles MonthCalendar y DateTimePicker
Describe cmo recuperar una fecha seleccionada en un control MonthCalendar y un control
DateTimePicker y mostrarla en un formulario Windows Forms.
Controles invisibles: utilizar componentes
Presenta los componentes y describe cmo agregar un componente que permita validar los
datos escritos en un programa.
Reutilizar controles: trabajar con cuadros de dilogo integrados
Describe cmo utilizar los cuadros de dilogo integrados para mostrar un cuadro de dilogo
Abrir archivo, aplicar una fuente al texto y aplicar color a un formulario.
Presionar botones: agregar barras de herramientas y botones

Describe cmo agregar un control ToolStrip a una aplicacin y cmo agregar un botn a
ToolStrip.
Proporcionar un explorador propio: trabajar con controles TreeView
Describe cmo crear una aplicacin con la apariencia del Explorador de Windows con un
control TreeView.

Secciones relacionadas
Informacin detallada: compartir un controlador de eventos
Describe cmo crear un controlador de eventos compartido que controla eventos para ms
de un control.
Informacin detallada: utilizar varios grupos de botones de opcin
Explica cmo crear varios grupos de botones de opcin mutuamente excluyentes en un
nico formulario.
Informacin detallada: ms informacin acerca de los mens
Explica cmo habilitar o deshabilitar mens en tiempo de ejecucin, as como crear mens
emergentes.
Paseo con gua por Visual Basic
Proporciona una serie de lecciones secuenciales que presentan los conceptos bsicos de
programacin de Visual Basic 2008.
Qu sali mal? Encontrar y corregir errores mediante depuracin
Describe cmo utilizar las herramientas de depuracin en Visual Basic 2008.
Introduccin al lenguaje de programacin Visual Basic
Describe los fundamentos del lenguaje Visual Basic.

Crear la apariencia visual de un programa:

introduccin a Windows Presentation Foundation
Visual Studio 2008
Actualizacin: noviembre 2007
La interfaz de usuario es la parte del programa que ven los usuarios cuando ejecutan el programa. El
conjunto anterior de lecciones mostr cmo crear una interfaz de usuario mediante Windows Forms.
Este conjunto de lecciones muestra una manera diferente de crear una interfaz de usuario para una
aplicacin basada en Windows: mediante Windows Presentation Foundation (WPF).

Las aplicaciones de WPF son aplicaciones en las que se utilizan controles de WPF para crear la
interfaz de usuario. En estas aplicaciones, la interfaz de usuario consta normalmente de una ventana
principal o formulario y varios controles, como botones, cuadros de texto para escribir el texto, etc.
WPF utiliza un lenguaje de marcado llamado Lenguaje de marcado de aplicaciones extensible (XAML)
para proporcionar nuevas tcnicas con el fin de desarrollar interfaces de usuario visualmente
mejoradas.
Las lecciones de esta seccin le muestran cmo crear interfaces de usuario que utilizan algunos de
los controles de WPF ms comunes.

En esta seccin
Disear una interfaz de usuario para una aplicacin de WPF (Visual Basic)
Describe cmo crear una aplicacin WPF y agregarle controles.
Usar controles comunes de WPF
Proporciona informacin general de los controles de WPF ms comunes.
Crear controladores de eventos para los controles de WPF
Describe cmo asociar un controlador de eventos a un control de WPF y cmo escribir
cdigo que se ejecuta cuando se provoca el controlador de eventos.
Crear una aplicacin de dibujo con WPF
Muestra cmo crear una aplicacin de WPF para trazar dibujos.

Disear una interfaz de usuario para una aplicacin

de WPF (Visual Basic)
Visual Studio 2008
Actualizacin: noviembre 2007
En esta leccin, obtendr informacin sobre cmo crear una aplicacin de WPF y cmo agregar
controles a la interfaz de usuario.
Disear una aplicacin de Windows Presentation Foundation (WPF) es como disear una aplicacin
de formularios Windows Forms: los controles se agregan a una superficie de diseo. Sin embargo,
hay varias diferencias. Adems de tener un diseador, la ventana Propiedades y el Cuadro de
herramientas, hay una ventana que contiene XAML. XAML significa Extensible Application Markup
Language (Lenguaje de marcado de aplicaciones extensible). ste es un lenguaje de marcado que se
utiliza para crear una interfaz de usuario. La ilustracin siguiente muestra la ubicacin
predeterminada del editor XAML. Para obtener ms informacin, vea Tutorial: Editar XAML en WPF
Designer.

Editor XAML

Al crear una aplicacin de formularios Windows Forms convencional, puede arrastrar un control del
Cuadro de herramientas a un formulario Windows Forms o, si lo desea, puede escribir el cdigo para
crear el control. Al arrastrar el control al formulario, el cdigo se genera automticamente. De igual
forma, al crear una aplicacin WPF, puede crear un control escribiendo el marcado XAML o puede
arrastrar el control a una ventana de WPF.
El marcado XAML se organiza en elementos que aparecen en un formato jerrquico. Los elementos
se encierran entre corchetes angulares, y hay normalmente un elemento de apertura y cierre. Por
ejemplo, puede tener un elemento Button simple que aparece del modo siguiente:
<Button></Button>. Se describe normalmente cmo aparece un elemento mediante la definicin de
atributos, como su ubicacin, alto y ancho. Los atributos de un elemento parecen propiedades de un
objeto porque son descripciones del aspecto fsico o estado. Los atributos aparecen dentro de
corchetes de apertura y cierre del elemento de apertura. Estn compuestos del nombre del atributo,
el smbolo de asignacin (=) y el valor del atributo entre comillas. Puede especificar el alto, por
ejemplo de un elemento Button del modo siguiente: <Button Height="23"></Button>.
Al arrastrar los controles de WPF del Cuadro de herramientas al diseador, Visual Basic Express
genera automticamente el marcado XAML para el control. Por ejemplo, al hacer doble clic en un
control System.Windows.Controls.Button para agregarlo a una ventana de WPF, se genera un
marcado XAML similar al siguiente.
other
Copiar

<Button Height="23" HorizontalAlignment="Left" Margin="10,10,0,0"

Name="Button1" VerticalAlignment="Top" Width="75">Button</Button>
Observe que el elemento Button tiene el atributo Height establecido en "23" y el elemento
HorizontalAlignment establecido en "Left". Hay tambin varios otros atributos que describen el
elemento. Puede cambiar estos atributos modificando directamente los valores en el marcado XAML.
(De manera predeterminada, estos atributos aparecen en color rojo.) Tambin puede cambiar las
propiedades del control mediante la ventana Propiedades.

Intntelo.

Para crear una aplicacin WPF

1.
2.
3.

En el men Archivo, haga clic en Nuevo proyecto.

En el cuadro de dilogo Nuevo proyecto, en el panel Plantillas, haga clic en Aplicacin WPF.
En el cuadro Nombre, escriba VentanaWPF y, a continuacin, haga clic en Aceptar.
Se crea un nuevo proyecto de Windows Presentation Foundation. Aparece una nueva
ventana denominada Ventana1. Su marcado XAML se muestra en el editor XAML del
entorno de desarrollo integrado (IDE) de Visual Basic y aparece del modo siguiente:
other
Copiar

<Window x:Class="Window1"

xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
Title="Window1" Height="300" Width="300">
<Grid>

</Grid>
</Window>
4.
5.

Haga clic en Ventana1 para seleccionarlo.

En el editor XAML, cambie el atributo Title del elemento Window de Window1 a WPF
Application.
El marcado XAML aparecer ahora del modo siguiente:
other
Copiar

<Window x:Class="Window1"
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
Title="WPF Application" Height="300" Width="300">
<Grid>

</Grid>
</Window>
El texto en la barra de ttulo de Ventana1 cambia a Aplicacin WPF.
Pruebe a cambiar otros atributos de la ventana, como Width y Height. Cuando est listo,
contine con el siguiente procedimiento.

Agregar controles a la ventana de WPF

En este procedimiento, agregar controles a su aplicacin. Para ello, debe hacer clic en el control del
Cuadro de herramientas, que suele estar situado en el lado izquierdo del IDE de Visual Basic, y
arrastrar a continuacin el control a la ventana de WPF. Debe establecer algunas propiedades para el
control y, a continuacin, ajustar el marcado XAML para cambiar el texto y tamao del control.

Para agregar un control a la ventana de WPF

1.
2.
3.

En el Cuadro de herramientas, arrastre un control TextBox al lado derecho superior de la

ventana de WPF.
Seleccione el control TextBox.
En la ventana Propiedades, haga clic en la primera flecha (izquierda) de la propiedad
HorizontalAlignment, como se muestra en la ilustracin siguiente.
Propiedad HorizontalAlignment

As, TextBox se mueve del lado derecho de la ventana de WPF al lado izquierdo.
4.

Establezca las siguientes propiedades para TextBox.

Propiedad

Valor

VerticalAlignment

Superior

Width

75

Height

26

5.

En el editor XAML, cambie el atributo Width del elemento TextBox a 140 y cambie el
elemento Margin a 30, 56, 0, 0, como se muestra en el ejemplo siguiente.
other
Copiar

<TextBox Height="26" HorizontalAlignment="Left" Margin="30,56,0,0"

Name="TextBox1" VerticalAlignment="Top" Width="140" />
El ancho y ubicacin de TextBox cambian tras escribir los nuevos valores.
6.
7.

Agregue un control Button a la ventana de WPF, junto a TextBox.

Cambie el texto entre las etiquetas de Button de apertura y cierre de Button a Submit, como
se muestra en el ejemplo siguiente.
other
Copiar

<Button Height="23" HorizontalAlignment="Right" Margin="0,59,35,0"

Name="Button1" VerticalAlignment="Top"
Width="75">Submit</Button>
El texto del botn cambia despus de especificar el nuevo valor.
8.

Presione F5 para ejecutar el programa. Aparece una ventana con el cuadro de texto y el
botn que acaba de agregar. Observe que puede hacer clic en el botn y escribir en el
cuadro de texto. Debe agregar controladores de eventos y, a continuacin, escribir cdigo
que indique al equipo qu hacer cuando se haga clic en el botn.

Usar controles comunes de WPF

Visual Studio 2008
Actualizacin: noviembre 2007
En esta leccin, obtendr informacin sobre algunos de los controles de Windows Presentation
Foundation (WPF) comunes que estn disponibles en el Cuadro de herramientas al crear un proyecto
de aplicacin de WPF.
WPF permite crear interfaces de usuario visualmente mejoradas para sus aplicaciones. En las
aplicaciones de WPF, se han mejorado incluso los controles tpicos que estamos acostumbrados a ver
en las aplicaciones de formularios Windows Forms estndar.
La manera ms fcil de agregar controles de WPF a una aplicacin es arrastrarlos del Cuadro de
herramientas a la superficie de diseo. En su estado predeterminado, los controles son muy similares
a los de las aplicaciones de formularios Windows Forms. Los controles de WPF admiten estilos y
plantillas que permiten crear aplicaciones visualmente atractivas. Para modificar la apariencia de un
control, puede cambiar sus propiedades en la ventana Propiedades. Tambin puede modificar su

apariencia agregndole estilos y atributos en el editor de XAML. Escribir XAML sin ayuda puede ser
difcil, por lo que tal vez puede ser conveniente usar una aplicacin que lo genere automticamente,
como Expression Blend. Para obtener ms informacin, vea Colaboracin con Expression Blend.

Intntelo!

Para agregar un control a la ventana de WPF

1.
2.
3.
4.
5.
6.
7.

8.
9.

En el men Archivo, haga clic en Nuevo proyecto.

En el cuadro de dilogo Nuevo proyecto, en el panel Plantillas, haga clic en Aplicacin WPF.
En el cuadro Nombre, escriba WPFControls y, a continuacin, haga clic en Aceptar.
Se crea un nuevo proyecto de Windows Presentation Foundation.
En el Cuadro de herramientas, arrastre un control TextBox al lado derecho superior de la
ventana de WPF.
Seleccione el control TextBox.
Establezca las siguientes propiedades para el cuadro de texto en la ventana Propiedades.

Propiedad

Valor

VerticalAlignment

Superior

Width

75

Height

26

Agregue un control Button a la ventana de WPF, al lado del cuadro de texto.

Cambie el texto entre las etiquetas de apertura y cierre de Button en el editor XAML de
Button a Add, como se muestra en el ejemplo siguiente.
other
Copiar

<Button Height="23" HorizontalAlignment="Right" Margin="0,59,35,0"

Name="Button1" VerticalAlignment="Top"
Width="75">Add</Button>
El texto del botn cambia despus de escribir el nuevo valor.
10. Agregue un control ListBox a la ventana de WPF, debajo del cuadro de texto.
11. Haga doble clic en el botn para especificar el controlador de eventos predeterminado y
agregue el cdigo siguiente:
other

Copiar

If TextBox1.Text IsNot "" Then

ListBox1.Items.Add(TextBox1.Text)
TextBox1.Text = ""
End If
12. Presione F5 para ejecutar el programa. Aparece una ventana con el cuadro de texto, el
cuadro de lista y el botn que acaba de agregar.
13. Escriba un texto cualquiera en el cuadro de texto y, a continuacin, haga clic en el botn
Agregar. Compruebe que el texto se agrega al cuadro de lista.
14. Agregue texto adicional al cuadro de lista.

Controles de WPF

En la tabla siguiente se muestran los controles de WPF ms comunes que se encuentran en la ficha
Controles comunes del Cuadro de herramientas.

Nombre del control

Descripcin

System.Windows.Controls.Border

Muestra un borde alrededor del contenido.

System.Windows.Controls.Button

Permite a un usuario realizar una accin haciendo clic en un

botn. El evento Buttonbase.Click se produce cuando se
hace clic en un control Button.

System.Windows.Controls.CheckBox

Permite a un usuario seleccionar y desactivar una casilla

para indicar un valor S/No o Verdadero/Falso.

System.Windows.Controls.ComboBox

Permite a un usuario seleccionar un elemento de una lista

desplegable. La lista aparece cuando el usuario hace clic en
una flecha desplegable.

System.Windows.Controls.Grid

Define un rea de cuadrcula flexible que consta de

columnas y filas.

System.Windows.Controls.Image

Muestra una imagen.

System.Windows.Controls.Label

Muestra texto en un formulario. Proporciona compatibilidad

con las teclas de acceso.

System.Windows.Controls.ListBox

Permite a un usuario seleccionar un elemento de una lista.

System.Windows.Controls.RadioButton Permite a un usuario elegir entre elementos mutuamente

excluyentes. La seleccin de un botn de opcin es
mutuamente excluyente con cualquier otro botn de opcin
en el mismo contenedor.

System.Windows.Controls.StackPanel

Permite apilar vertical u horizontalmente los controles

secundarios.

System.Windows.Control.TabControl

Permite organizar el contenido visual en forma de tabla.

System.Windows.Controls.TextBox

Muestra el texto sin formato y permite a los usuarios escribir

texto.

Los controles adicionales disponibles en el Cuadro de herramientas incluyen lo siguiente:

Controles contenedor, como Canvas, DockPanel y Frame.

Mens y barras de herramientas, como Menu, ToolBar y StatusBar.
Controles de documento, como DocumentViewer y FlowDocumentPageViewer.
Y ms

Crear controladores de eventos para los controles de

WPF
Visual Studio 2008
Actualizacin: noviembre 2007
En esta leccin, obtendr informacin sobre cmo crear un controlador de eventos para un control
de WPF.
Puede agregar el controlador de eventos predeterminado para muchos controles haciendo doble clic
en el control en la vista Diseo. Tambin puede crear controladores de eventos para los controles
que agrega a una aplicacin de Windows Presentation Foundation (WPF) utilizando una combinacin
de XAML y cdigo de Visual Basic. En primer lugar, se define el evento y el nombre del mtodo que

administrar el evento en un atributo del control en el editor XAML. A continuacin, se puede

agregar el cdigo para el controlador de eventos en el editor de cdigo.

Intntelo.

Para crear un controlador de eventos para un botn

1.
2.
3.

Crear una aplicacin WPF en Visual Basic Express. Para obtener ms informacin, vea Cmo:
Crear un nuevo proyecto de aplicacin de WPF.
Arrastre un Botn desde el Cuadro de herramientas hasta la superficie de diseo de WPF y, a
continuacin, seleccione el botn.
Haga doble clic en el botn.
Se crea el controlador de eventos Click y el cursor del mouse se coloca en el controlador de
eventos en el editor de cdigo.

4.

Agregue el cdigo siguiente al controlador de eventos:

other
Copiar

MsgBox("Event handler was created by double-clicking the button.")

5.
6.

Arrastre otro Botn desde el Cuadro de herramientas hasta la superficie de diseo de WPF y,
a continuacin, seleccione el botn.
Agregue un atributo denominado Click al elemento Button en el editor XAML y establezca su
valor en ButtonOKClicked. ste es el nombre que proporcionar al controlador de eventos
en el cdigo. Por ejemplo, se puede escribir el atributo del siguiente modo:
Click="ButtonOKClicked"

Nota:
Al crear un controlador de eventos haciendo doble clic en el control, el atributo no se agrega al
marcado XAML. En su lugar, la clusula Handles se utiliza para enlazar el evento con el controlador
de eventos.

7.
8.

Haga clic con el botn secundario en la superficie de diseo y seleccione Ver cdigo.
Agregue el siguiente controlador de eventos a la clase Window1.
other
Copiar

Sub ButtonOKClicked(ByVal Sender As Object, _

ByVal e As RoutedEventArgs) Handles Button2.Click

End Sub
9.

Agregue el cdigo siguiente al mtodo ButtonOKClicked. Este cdigo muestra un mensaje al

hacer clic en el botn.
other
Copiar

MsgBox("Event handler was created manually.")

10. Presione F5 para ejecutar el programa.
11. Cuando la ventana aparezca, haga clic en el botn.
12. Compruebe que aparece el texto correcto en un cuadro de mensaje al hacer clic en cada
botn, y, a continuacin, cierre la aplicacin.

Crear una aplicacin de dibujo con WPF

Visual Studio 2008
Actualizacin: noviembre 2007
En esta leccin, obtendr informacin sobre cmo crear una aplicacin de Windows Presentation
Foundation (WPF) que le permita dibujar imgenes. Crear una aplicacin de WPF es como crear una
aplicacin de formularios Windows Forms: los controles del Cuadro de herramientas se arrastran a la
superficie de diseo y, a continuacin, se escribe el cdigo para administrar los eventos de los
controles.
Para obtener una demostracin en vdeo, vea Video How to: Creating a Drawing Application by
Using WPF.

Intntelo.

Para crear una aplicacin de WPF

1.

En el men Archivo, haga clic en Nuevo proyecto.

Aparecer el cuadro de dilogo Nuevo proyecto. Este cuadro de dilogo muestra la lista de
los diversos tipos de aplicacin predeterminados que puede crear con Visual Basic Express.

2.
3.

Seleccione Aplicacin WPF como el tipo de proyecto.

Cambie el nombre de la aplicacin a Panel de entrada manuscrita y, a continuacin, haga clic
en Aceptar.
Visual Basic Express crea una nueva carpeta para el proyecto. La carpeta tiene el mismo
nombre que el ttulo del proyecto. Visual Basic Express tambin muestra la nueva ventana de
WPF, llamada Ventana1, en vista Diseo. Puede ir al editor de cdigo en cualquier momento
si hace clic con el botn secundario en la superficie de diseo y hace clic en Ver cdigo. De

manera predeterminada, el editor XAML aparece bajo el diseador, pero la vista XAML
puede mostrarse a pantalla completa si hace clic con el botn secundario en la superficie de
diseo y selecciona Ver XAML.

Para disear la interfaz de usuario.

1.

2.
3.
4.

Si la ventana Propiedades no est visible, en el men Ver haga clic en Ventana Propiedades.
Esta ventana muestra las propiedades del formulario o control actualmente seleccionado.
Puede cambiar los valores de las propiedades existentes en esta ventana.
Cambie el tamao de la ventana de WPF estableciendo la propiedad Height en 550 y la
propiedad Width en 370 desde la ventana Propiedades.
Cambie la propiedad de ttulo de la ventana de WPF a Panel de entrada manuscrita.
Cambie la propiedad Background de la ventana de WPF al color marrn; para ello, haga clic
en Brown en el cuadro desplegable y, a continuacin, presione ENTRAR.

Nota:
Opcionalmente, puede modificar directamente el marcado XAML si agrega un atributo Background y
establece su valor en Brown: Background="Brown"

5.
6.

Para abrir el Cuadro de herramientas, en el men Vista, haga clic en el Cuadro de

herramientas.
Haga clic con el botn secundario en el Cuadro de herramientas y, despus, haga clic en
Elegir elementos.
Se abrir el cuadro de dilogo Elegir elementos del cuadro de herramientas.

7.

En la ficha Componentes WPF del cuadro de dilogo Elegir elementos del cuadro de
herramientas, desplcese hacia abajo hasta InkCanvas y seleccinelo para activar la casilla.
8. Haga clic en Aceptar para agregar el control InkCanvas al Cuadro de herramientas.
9. Arrastre un control InkCanvas del Cuadro de herramientas a la superficie de diseo.
10. Establezca las siguientes propiedades del control InkCanvas en la ventana Propiedades:

Propiedad

Valor

Width

Auto

Height

Auto

HorizontalAlignment

Expandir

VerticalAlignment

Expandir

Mrgenes

9, 9, 9, 68

11. Cambie el color del control InkCanvas a amarillo estableciendo su propiedad Background en
LightYellow.
El color de fondo del control InkCanvas aparecer como amarillo claro en tiempo de
ejecucin.
12. Arrastre dos controles Button a la ventana de WPF y colquelos bajo el control InkCanvas.
Coloque button1 a la izquierda y button2 a la derecha.
13. Seleccione button1 y cambie el marcado XAML en la vista XAML como se muestra en el
marcado siguiente. Este marcado establece la propiedad Text en Clear.
other
Copiar

<Button Height="23" HorizontalAlignment="Left" Margin="85,0,0,24"

Name="Button1" VerticalAlignment="Bottom"
Width="75">Clear</Button>
14. Seleccione button2 y cambie el marcado XAML como se muestra en el marcado siguiente.
Este marcado establece la propiedad Text en Close.
other
Copiar

<Button Height="23" HorizontalAlignment="Right" Margin="0,0,72,24"

Name="Button2" VerticalAlignment="Bottom"
Width="75">Close</Button>
La aplicacin WPF debera parecerse a la aplicacin Panel de entrada manuscrita de la
ilustracin siguiente.

Aplicacin WPF Panel de entrada manuscrita

Para agregar cdigo a los controladores de eventos de los botones

1.

Haga doble clic en Borrar y, a continuacin, agregue el cdigo siguiente al controlador de

eventos Click generado:
other
Copiar

Me.InkCanvas1.Strokes.Clear()
2.
3.

Vuelva a la vista Diseo; para ello, haga clic con el botn secundario en el editor de cdigo y
seleccione Diseador.
Haga doble clic en Cerrar y, a continuacin, agregue el cdigo siguiente al controlador de
eventos Click generado:
other
Copiar

Me.Close()
4.
5.
6.

Presione F5 para ejecutar el proyecto.

Cuando la aplicacin se inicie, dibuje una imagen en el control InkCanvas. Si comete algn
error, puede hacer clic en Borrar para volver a empezar.
Haga clic en Cerrar para salir de la aplicacin.

Qu sali mal? Encontrar y corregir errores

mediante depuracin
Visual Studio 2008
Otras versiones

Actualizacin: noviembre 2007

Al escribir un programa informtico, es normal que se produzcan errores. Es posible que se cometa
un error tipogrfico, el programa se puede comportar no como lo esperaba o no se puede ejecutar
en lo absoluto. Cuando hay un error en un programa, hay que buscarlo y corregirlo. La bsqueda y
correccin de errores se denomina depuracin.
En las siguientes lecciones, aprender varias tcnicas para depurar un programa Visual Basic.

En esta seccin
Encontrar errores: introduccin a la depuracin en Visual Basic
Describe cmo depurar un programa y corregir los errores.
Conozca sus errores: tres tipos de errores de programacin
Describe tres tipos de errores que pueden producirse en un programa: errores de
compilacin, en tiempo de ejecucin y lgicos.
Encontrar y eliminar errores del compilador
Describe cmo buscar y corregir los errores del compilador en un programa utilizando la
ventana Lista de errores e IntelliSense.
No funciona! Encontrar y eliminar errores en tiempo de ejecucin
Describe cmo depurar un programa y corregir los errores en tiempo de ejecucin utilizando
el cuadro de dilogo Ayudante de excepciones e IntelliSense.
Qu? Esto no debiera haber ocurrido. Encontrar errores lgicos
Describe cmo establecer puntos de interrupcin y recorrer el cdigo para buscar errores
lgicos.
Agregar notas a programas: utilizar comentarios
Describe cmo crear comentarios en el cdigo de un programa y cmo usar los comentarios
para la depuracin.

Encontrar errores: introduccin a la depuracin en

Visual Basic
Visual Studio 2008
Otras versiones

Actualizacin: noviembre 2007

En esta leccin, obtendr informacin sobre cmo corregir errores del programa mediante la
depuracin.
Por mucho cuidado que tenga al disear un programa o escribir cdigo, siempre pueden aparecer
errores. En ocasiones los errores impedirn que se inicie el programa, unas veces harn que el
programa deje de ejecutarse o se bloquee y otras se ejecutar pero no ofrecer los resultados
esperados.
Y, por supuesto, cuando los errores aparecen, querr encontrarlos y corregirlos. Los errores de un
programa se conocen normalmente como errores y el proceso de encontrarlos y corregirlos se
denomina depuracin.
El proceso de depuracin es iterativo; es decir, se debe repetir una y otra vez. Por lo general, escribe
cdigo, ejecuta el programa hasta que aparece un error, encuentra el error, lo corrige y, a
continuacin, ejecuta el programa de nuevo.
En la mayora de los casos, no necesita detener el programa para corregirlo. Puede corregir el cdigo
donde apareci el error y seguir ejecutando el programa desde all; este proceso se conoce como
Editar y continuar.
La depuracin se realiza en el IDE (entorno de desarrollo integrado) de Visual Basic, que contiene
varios comandos y ventanas especiales que ayudan a encontrar errores. Obtendr ms informacin
en las lecciones siguientes.

Intntelo!

Nota:
En este ejemplo hay una excepcin. Las excepciones son objetos que se crean (y producen) cuando
el programa detecta un error. Se crean distintos tipos de excepciones, dependiendo del tipo de error
generado. Con los valores predeterminados del usuario, si se produce una excepcin durante la
ejecucin del programa de Visual Basic, aparece un cuadro de dilogo que describe el error y ayuda

a corregirlo.

Para utilizar el proceso de editar y continuar

1.
2.
3.

En el men Archivo, seleccione Nuevoproyecto.

En el cuadro de dilogo Nuevo proyecto, en el panel Plantillas, haga clic en Aplicacin para
Windows.
En el cuadro Nombre, escriba Edit y haga clic en Aceptar.
Se abrir un nuevo proyecto de formularios Windows Forms.

4.
5.

Haga doble clic en el formulario para abrir el Editor de cdigo.

En el controlador del evento Form_Load, agregue el siguiente cdigo:
VB
Copiar

Dim number As Integer = 1

Dim numbers As String = ""
MsgBox(numbers + 1)

6.

Presione F5 para ejecutar el programa. Se detiene el programa y aparece un cuadro de

dilogo de excepciones con el mensaje "No se control InvalidCastException".
La excepcin ha ocurrido porque hay un error tipogrfico en el cdigo. Se utiliz la variable
equivocada: debera ser number, Integer, no numbers, que es una variable String.
Observe que el programa todava est en ejecucin; est en el modo de interrupcin de
depuracin. Con Editar y continuar, puede corregir el error sin necesidad de detener el
programa (ni volver a ejecutarlo para comprobarlo).

7.
8.

En el Editor de cdigo, cambie numbers + 1 por number + 1.

Presione F5 para continuar. Debe aparecer un cuadro de mensaje con el nmero 2.

Conozca sus errores: tres tipos de errores de

programacin
Visual Studio 2008
Otras versiones

Actualizacin: noviembre 2007

En esta leccin, conocer los diferentes tipos de errores que pueden aparecer al escribir un
programa.
Incluso los programadores ms experimentados cometen errores; y conocer cmo depurar una
aplicacin y encontrar esos errores es una parte importante de la programacin. No obstante, antes
de obtener informacin sobre el proceso de depuracin, conviene conocer los tipos de errores que
deber buscar y corregir.
Los errores de programacin pertenecen a tres categoras: errores de compilacin, errores en tiempo
de ejecucin y errores lgicos. Las tcnicas para depurar cada uno de ellos se tratarn en las tres
lecciones siguientes.

Errores de compilacin
Los errores de compilacin, tambin conocidos como errores del compilador, son errores que impiden
que su programa se ejecute. Cuando presiona F5 para ejecutar un programa, Visual Basic compila el
cdigo en un lenguaje binario que el equipo entiende. Si el compilador de Visual Basic se encuentra
con cdigo que no entiende, emite un error de compilador.
La mayora de los errores del compilador se deben a errores cometidos al escribir el cdigo. Por
ejemplo, puede escribir mal una palabra clave, omitir alguna puntuacin necesaria o intentar utilizar
una instruccin End If sin antes utilizar una instruccin If.
Afortunadamente, el editor de cdigo de Visual Basic se dise para identificar estos errores antes de
que se intente ejecutar el programa. Aprender a encontrar y corregir los errores de compilacin en
la leccin siguiente, Encontrar y eliminar errores del compilador.

Errores en tiempo de ejecucin

Los errores en tiempo de ejecucin son errores que aparecen mientras se ejecuta su programa. Estos
errores aparecen normalmente cuando su programa intenta una operacin que es imposible que se
lleve a cabo.
Un ejemplo de esto es la divisin por cero. Suponga que tiene la instruccin siguiente:
Speed = Miles / Hours
Si la variable Hours tiene un valor de 0, se produce un error en tiempo de ejecucin en la operacin
de divisin. El programa se debe ejecutar para que se pueda detectar este error y si Hours contiene
un valor vlido, no se producir el error.

Cuando aparece un error en tiempo de ejecucin, puede usar las herramientas de depuracin de
Visual Basic para determinar la causa. Aprender a encontrar y corregir los errores en tiempo de
ejecucin en la leccin No funciona! Encontrar y eliminar errores en tiempo de ejecucin.

Errores lgicos
Los errores lgicos son errores que impiden que su programa haga lo que estaba previsto. Su cdigo
puede compilarse y ejecutarse sin errores, pero el resultado de una operacin puede generar un
resultado no esperado.
Por ejemplo, puede tener una variable llamada FirstName y establecida inicialmente en una cadena
vaca. Despus en el programa, puede concatenar FirstName con otra variable denominada
LastName para mostrar un nombre completo. Si olvida asignar un valor a FirstName, slo se mostrar
el apellido, no el nombre completo como pretenda.
Los errores lgicos son los ms difciles de detectar y corregir, pero Visual Basic tambin dispone de
herramientas de depuracin que facilitan el trabajo. Aprender a encontrar y corregir los errores
lgicos en Qu? Esto no debiera haber ocurrido. Encontrar errores lgicos.

Encontrar y eliminar errores del compilador

Visual Studio 2008
Otras versiones

Actualizacin: noviembre 2007

En esta leccin, aprender a encontrar y corregir los errores del compilador.
Como vimos en la leccin anterior, los errores del compilador aparecen cuando el compilador de
Visual Basic se encuentra con cdigo irreconocible, generalmente porque se cometi algn error al
escribir. Dado que los errores del compilador impiden que se ejecute un programa, deber
encontrarlos y corregirlos, o depurarlos, antes de ejecutar el programa.

Encontrar y corregir errores del compilador

Encontrar los errores del compilador es bastante fcil, ya que el programa no se ejecuta hasta que se
han corregido. Cuando presiona F5, si hay algn error del compilador, aparecer un cuadro de
dilogo que indica "Errores al compilar. Desea continuar?". Si selecciona S, se ejecutar la ltima

versin sin errores del programa; si selecciona No, el programa se detendr y aparecer la ventana
Lista de errores.
La ventana Lista de errores muestra toda la informacin sobre el error, incluida su descripcin y
ubicacin en el cdigo. Si hace doble clic en el error en la Lista de errores, se resaltar la lnea
incorrecta del cdigo en el Editor de cdigo. Tambin puede presionar F1 para mostrar Ayuda y
obtener ms informacin sobre el error y cmo corregirlo.
El editor de cdigo de Visual Basic tambin puede ayudarle a encontrar y corregir los errores del
compilador, incluso antes de que se intente ejecutar el programa. Mediante una caracterstica
denominada IntelliSense, Visual Basic inspecciona el cdigo a medida que se escribe y si encuentra
cdigo que producir un error del compilador, lo subraya con una lnea ondulada de color azul. Si
mantiene presionado el mouse sobre esa lnea, se muestra un mensaje que describe el error. Si la
ventana Lista de errores est visible, tambin mostrar los mensajes de error.

Intntelo

Para encontrar y corregir errores del compilador

1.
2.
3.

En el men Archivo, seleccione Nuevo proyecto.

En el panel Plantillas, en el cuadro de dilogo Nuevo proyecto, haga clic en Aplicacin para
Windows.
En el cuadro Nombre, escriba CompilerErrors y haga clic en Aceptar.
Se abre un nuevo proyecto de formularios Windows Forms.

4.
5.

Haga doble clic en el formulario para abrir el Editor de cdigo.

En el controlador de eventos Form_Load, agregue el siguiente cdigo.
VB
Copiar

End If

6.

Presione ENTRAR. Ver una lnea ondulada de color azul debajo de End If.
Si mantiene presionado el mouse sobre la lnea, ver el mensaje "'End If' debe ir precedida
por la instruccin 'If' " correspondiente.

7.

Cambie el cdigo para que tenga la siguiente apariencia.

VB
Copiar

If 1 < 2 Then

End If

Observe que ha desaparecido la lnea ondulada de color azul.

8.

Agregue la nueva lnea de cdigo siguiente despus de la instruccin If... Then.

VB
Copiar

MgBox("Hello")

9.

Presione F5 para ejecutar el programa. Aparecer un cuadro de dilogo con el mensaje

"Errores al compilar. Desea continuar y ejecutar la ltima versin generada correctamente?"
10. Haga clic en No. Se mostrar la ventana Lista de errores con el mensaje de error "No se ha
declarado el 'nombre MgBox'".
11. Haga doble clic en el mensaje de error de la Lista de errores y cambie el cdigo por
MsgBox("Hello").
12. Presione F5 de nuevo. Ahora el programa debera ejecutarse y causar la aparicin de un
cuadro de mensaje.

No funciona! Encontrar y eliminar errores en tiempo

de ejecucin
Visual Studio 2008
Otras versiones

Actualizacin: noviembre 2007

En esta leccin, aprender a depurar un programa y a corregir errores en tiempo de ejecucin.
Como aprendi en su momento, los errores en tiempo de ejecucin se producen cuando el programa
intenta realizar una operacin que es imposible finalizar. Cuando se produce un error en tiempo de
ejecucin, el programa se detiene y aparece un mensaje de error; debe depurar el error y corregirlo
para que el programa pueda continuar.

Encontrar y corregir errores en tiempo de ejecucin

La mayora de los errores en tiempo de ejecucin se producen porque se cometi un error en el

cdigo; por ejemplo, olvid asignar un valor a una variable antes de utilizarla. Cuando se ejecute el
programa y se descubra el error, el programa se detendr y el cuadro de dilogo Ayudante de
excepciones se mostrar en la ventana Editor de cdigo. Cuando esto sucede, el programa est en
modo de interrupcin, que es el modo en que se realiza la depuracin.
El cuadro de dilogo Ayudante de excepciones contiene una descripcin del error, as como
sugerencias para la solucin de problemas que indican la causa. Puede hacer clic en las sugerencias
sobre solucin de problemas para mostrar los temas de Ayuda y obtener ms detalles.
Es necesario corregir el error para que pueda continuar con el programa; para ello, debe inspeccionar
el cdigo para encontrar la causa del error. Por ejemplo, si sospecha que se produjo un error porque
una variable contiene el valor equivocado, estando todava en el modo de interrupcin, puede utilizar
IntelliSense para ver el valor de la variable. Cuando se coloca el mouse sobre la variable en el Editor
de cdigo, la informacin sobre herramientas muestra el valor de la variable. Si el valor no es lo que
esperaba, compruebe en el cdigo anterior dnde se estableci el valor y despus arregle el cdigo y
contine.

Intntelo

Para revisar el valor de una variable

1.
2.
3.

En el men Archivo, seleccione Nuevo proyecto.

En el panel Plantillas, en el cuadro de dilogo Nuevo proyecto, haga clic en Aplicacin para
Windows.
En el cuadro Nombre, escriba RunTimeErrors y haga clic en Aceptar.
Se abrir un nuevo proyecto de formularios Windows Forms.

4.
5.

Haga doble clic en el formulario para abrir el Editor de cdigo.

En el controlador de eventos Form_Load, agregue el siguiente cdigo.
VB
Copiar

Dim miles As Integer = 0

Dim hours As Integer = 0
Dim speed As Integer = 0

VB

Copiar

miles = 55
speed = miles / hours
MsgBox(CStr(speed) & " miles per hour")

6.

Presione F5 para ejecutar el programa. Aparece un cuadro de dilogo Ayudante de

excepciones con el mensaje "No se control OverflowException".
Una lnea de puntos que va del cuadro de dilogo a su archivo de cdigo seala la lnea de
cdigo que produjo el error.
Observe que la primera sugerencia sobre solucin de problemas del Ayudante de
excepciones indica que debe asegurarse de no estar dividiendo por cero.

7.
8.

Mueva el mouse sobre la variable miles y mantngalo ah durante unos segundos. La

informacin sobre herramientas que ver dice "miles 55".
Ahora mueva el mouse sobre la variable hours; la informacin sobre herramientas debe decir
"hours 0".
Debido a que no se puede dividir por cero y el valor de hours es cero, ya ha encontrado la
causa del error: no haber actualizado el valor de hours.

9.

Agregue la siguiente lnea de cdigo sobre la lnea miles = 55.

VB
Copiar

hours = 2

10. Haga clic en la flecha amarilla situada en el margen izquierdo del cdigo y arrstrela hasta la
lnea hours = 2.
Esto permite que el programa contine desde esa lnea en lugar de continuar desde la lnea
que contiene el error. Para que se reconozca la solucin del error es necesario ejecutar la
nueva lnea de cdigo recin agregada.
11. Presione F5 para que el programa contine. Aparece un cuadro de dilogo que muestra "28
miles per hour".

Informacin detallada: qu ocurrira si... Comprobar

cdigo en la ventana Inmediato
Visual Studio 2008
Otras versiones

Actualizacin: noviembre 2007

En esta leccin, aprender a evaluar y ejecutar un cdigo utilizando la ventana Inmediato.
En la leccin anterior, aprendi cmo corregir errores en tiempo de ejecucin utilizando el Ayudante
de excepciones. Sin embargo, a veces es posible que no est claro cmo corregir un error y se desee
probar una posible correccin sin cambiar el cdigo. Una ventana de depuracin especial, la ventana
Inmediato, permite hacer eso y ms.

La ventana Inmediato

Cuando el programa est en modo de interrupcin, se puede utilizar la ventana Inmediato para
ejecutar fragmentos de cdigo o evaluar variables y expresiones. Por ejemplo, si aparece un error en
tiempo de ejecucin debido a una variable vaca, puede comprobar el valor de la variable. Puede
utilizar tambin la ventana Inmediato para asignar un valor a esa variable y comprobar cmo se
ejecuta el resto del programa.

Sugerencia:
Cuando ejecuta el programa en modo de depuracin, puede poner el programa en modo de
interrupcin en cualquier momento, seleccionando Interrumpir del men Depurar.

Para ejecutar el cdigo en la Ventana Inmediato escrbalo como lo hara en el Editor de cdigo y
presione ENTRAR. Para evaluar una variable o expresin, escriba un signo de interrogacin seguido
por la variable o expresin que desea evaluar y presione ENTRAR, el resultado se mostrar en la
siguiente lnea.

Intntelo!

Para probar el cdigo en la ventana Inmediato

1.
2.
3.

En el men Archivo, seleccione Nuevo proyecto.

En el panel Plantillas, en el cuadro de dilogo Nuevo proyecto, haga clic en Aplicacin para
Windows.
En el cuadro Nombre, escriba Immediate y haga clic en Aceptar.
Se abre un nuevo proyecto de formularios Windows Forms.

4.
5.
6.

En el Cuadro de herramientas, arrastre dos controles TextBox y un control Button al

formulario.
Haga doble clic en el botn para abrir el Editor de cdigo.
En el controlador de eventos Button_Click, agregue el siguiente cdigo.
VB
Copiar

Dim miles As Integer = 0

Dim hours As Integer = 0
Dim speed As Integer = 0

VB
Copiar

miles = CInt(Textbox1.Text)
hours = CInt(Textbox2.Text)
speed = miles / hours
MsgBox(CStr(speed) & " miles per hour")

7.
8.
9.

Presione F5 para ejecutar el programa. Escriba 100 en el primer cuadro de texto y, a

continuacin, escriba 0 en el segundo cuadro de texto.
Haga clic en Button1. El programa se detendr y aparecer el cuadro de dilogo Ayudante
de excepciones con el mensaje "No se control OverflowException".
En la ventana Inmediato en la parte inferior del IDE, escriba ?miles y presione ENTRAR.
El valor 100 debe aparecer en la lnea siguiente.

Sugerencia:
Puede abrir en cualquier momento la ventana Inmediato eligiendo Ventanas, Inmediato en el men
Depurar.

10. Escriba ?hours y presione ENTRAR.

El valor 0 debe aparecer en la lnea siguiente.
11. Escriba hours = 4 y presione ENTRAR. Escriba ?hours y presione ENTRAR.
Observe que el valor de hours es ahora 4, el valor que especific en la lnea anterior. Puede
cambiar el valor de hours en la ventana Inmediato sin cambiar el cdigo del programa.
12. Presione F5 para continuar. Se mostrar un cuadro de mensaje con el resultado.

Sugerencia:
Para evitar que se produzca este error en tiempo de ejecucin, agregue un controlador de errores
que compruebe que hay un nmero vlido en el bloque Try y muestre un mensaje al usuario en el
bloque Catch. Para obtener ms informacin sobre controladores de errores, vea Qu hacer cuando
algo sale mal: control de errores.

Qu? Esto no debiera haber ocurrido. Encontrar

errores lgicos
Visual Studio 2008
Otras versiones

Actualizacin: noviembre 2007

En esta leccin, aprender a encontrar errores lgicos en el programa.
En lecciones anteriores, aprendi a encontrar y corregir errores del compilador y errores en tiempo
de ejecucin. El tercer tipo de error de programacin, los errores lgicos, puede ser el ms difcil de
detectar. Con los errores lgicos no se obtiene ninguna advertencia, se ejecutar el programa pero

proporcionar resultados incorrectos. Es necesario repasar el cdigo y determinar la razn del

problema.
Afortunadamente, las herramientas de depuracin de Visual Basic pueden ayudar. Dos tcnicas de
depuracin, que establecen puntos de interrupcin e instrucciones paso a paso a travs del cdigo,
permiten inspeccionar el cdigo lnea por lnea mientras se ejecuta para encontrar el error.
Se puede establecer un punto de interrupcin en el Editor de cdigo para cualquier lnea ejecutable
de cdigo. Cuando se ejecuta el programa, los puntos de interrupcin fuerzan que se detenga y el
programa entra en el modo de interrupcin cuando llega a esa lnea de cdigo. Puede obtener la
informacin que desee sobre el estado del programa en ese momento. Puede comprobar el valor de
cualquier variable, comprobar expresiones en la ventana Inmediato o realizar cambios en el cdigo
con Editar y continuar.
Cuando est en modo de interrupcin, puede recorrer el cdigo, ejecutando lnea por lnea para ver
cmo funciona. Al presionar la tecla F8, se ejecutar la lnea de cdigo actual y se detendr en la lnea
siguiente. Puede inspeccionar los valores de variables para ver cmo cambian de una lnea a la
siguiente.
Si la lnea de cdigo actual llama a una funcin o procedimiento Sub en otra parte del cdigo,
cuando presiona F8, la ejecucin se desplazar a ese procedimiento. Una vez que se haya ejecutado
ese procedimiento, el programa volver a la lnea siguiente a la que llam al procedimiento. Si no
desea recorrer un procedimiento, puede presionar MAYS+F8 para saltarlo.

Intntelo

Para observar un error lgico

1.
2.
3.

En el men Archivo, elija Nuevo proyecto.

En el panel Plantillas, en el cuadro de dilogo Nuevo proyecto, haga clic en Aplicacin para
Windows.
En el cuadro Nombre, escriba LogicErrors y haga clic en Aceptar.
Se abre un nuevo proyecto de formularios Windows Forms.

4.
5.
6.

Desde el Cuadro de herramientas, arrastre dos controles TextBox y un control Button hacia el
formulario.
Haga doble clic en Button1 para abrir el Editor de cdigo.
En el controlador de eventos Button1_Click, agregue el siguiente cdigo.
VB
Copiar

Dim minutes As Integer = CInt(Textbox1.Text)

Dim miles As Double = CDbl(Textbox2.Text)
Dim hours As Double = 0
hours = minutes / 60

MsgBox("Average speed " & GetMPH(hours, miles))

7.

Debajo de la lnea End Sub, agregue la siguiente funcin.

VB
Copiar

Function GetMPH(ByVal miles As Double, ByVal hours As Double) _

As String
GetMPH = CStr(miles / hours)
End Function

8.

Presione F5 para ejecutar el programa. En el primer cuadro de texto, escriba 10 (para

representar 10 minutos) y en el segundo cuadro de texto, escriba 5 (para representar las
millas) y, a continuacin, haga clic en Button1.
Aparecer un cuadro con el mensaje "Average speed 0.03333334" (velocidad media
0,03333334) ; no obstante, si recorre 5 millas en diez minutos, la respuesta correcta seran 30
mph.
Mantenga abierto el proyecto: en el siguiente procedimiento aprender cmo encontrar el
error lgico.

Encontrar errores lgicos

En el ltimo ejemplo, algo est obviamente mal con la lgica del programa. Segn el resultado, viaja
menos de una milla por hora, no treinta millas por hora como espera, pero dnde est el error?
En el siguiente procedimiento se establecer un punto de interrupcin y se examinar el cdigo para
encontrar el error.

Intntelo

Para establecer un punto de interrupcin y recorrer el cdigo

1.

En el Editor de cdigo, busque la lnea hours = minutes / 60 y haga clic en el margen

izquierdo.

Aparecer un punto rojo en el margen y el cdigo resaltado en rojo, lo que representa un

punto de interrupcin.
2.

Presione F5 para ejecutar el programa nuevamente. En el primer cuadro de texto, escriba 10

y en el segundo cuadro de texto, escriba 5. Haga clic en Button1.
El programa se detendr cuando llegue al punto de interrupcin. La lnea hours = minutes /
60 aparecer resaltada en amarillo.
Inspeccione los valores de las variables manteniendo el mouse sobre ellos; el valor de hours
debe ser 0 y el valor de minutes debe ser 10.

3.

Presione F8 para ejecutar la lnea hours = minutes / 60 y pasar a la siguiente lnea.

Inspeccione los valores de las variables de la lnea MsgBox("Average speed " &
GetMPH(hours, miles)), el valor de hours debe ser ahora 0.166666672 y el valor de miles
debe ser 5.0.

4.

Presione F8 de nuevo para ejecutar la lnea actual.

Observe que la ejecucin baja a la lnea Function GetMPH.
Inspeccione los valores de las variables en esta lnea; observar que el valor de miles es
ahora 0.166666672 y el de hours es 5.0, lo contrario de lo que eran en la lnea anterior. Ha
encontrado el error.
Mantenga abierto el proyecto: en el siguiente procedimiento aprender a corregir el error
lgico.

Corregir errores lgicos

En el procedimiento anterior, los valores para las variables miles y hours cambiaron de lugar. Puede
identificar la causa?
Si examina la lnea MsgBox("Average speed " & GetMPH(hours, miles)), ver que a la funcin GetMPH
se pasan dos argumentos, hours y miles, en ese orden. Si examina la declaracin de funcin Function
GetMPH(ByVal miles As Double, ByVal hours As Double)..., observar que los argumentos se
muestran como miles primero y como hours despus.
Se produjo un error en la lgica porque los argumentos se pasaron en el orden equivocado,
produciendo un clculo incorrecto. Si los argumentos hubieran sido de tipos diferentes, habra visto
un error en tiempo de ejecucin, pero como los argumentos eran del mismo tipo, no se produjo el
error. Fue un error simple, pero el error resultante fue difcil de encontrar.
En el siguiente procedimiento se establecer un punto de interrupcin y se recorrer el cdigo para
encontrar el error.

Intntelo

Para corregir el error lgico

1.

En el Editor de cdigo, cambie la lnea MsgBox("Average speed " & GetMPH(hours, miles))
para que se lea de la siguiente manera:
VB
Copiar

MsgBox("Average speed " & GetMPH(miles, hours))

2.
3.

Haga clic en el punto rojo en el margen izquierdo para borrar el punto de interrupcin.
Presione F5 para ejecutar el programa. En el primer cuadro de texto, escriba 10 y en el
segundo cuadro de texto, escriba 5. Haga clic en Button1.
Esta vez el cuadro de mensaje debe mostrar el resultado correcto, "Average speed 30"
(velocidad media 30).
Puede parecer que se corrigi el programa, pero hay otro error lgico aun ms difcil de
encontrar. Si desea probar y encontrarlo, mantenga el proyecto abierto; lo usar de nuevo
en la leccin Otro error: todava hay algo que no va bien.

Otro error: todava hay algo que no va bien

Visual Studio 2008
Otras versiones

Actualizacin: noviembre 2007

En esta leccin, aprender a encontrar un error lgico que slo se produce en situaciones
determinadas.
En la leccin anterior, Qu? Esto no debiera haber ocurrido. Encontrar errores lgicos, aprendi a
encontrar y corregir un error de lgica. En el cdigo de ejemplo de esa leccin, an existe un error
oculto: uno que es ms difcil de encontrar porque slo se produce en situaciones determinadas.

Probar un programa

Como desarrollador, se encuentra en desventaja cuando debe probar el programa para ver si se
comporta segn lo deseado. Sabe cmo debe funcionar, de modo que es improbable que se cometa
un error que pueda revelar un error lgico. Sin embargo, un usuario que no est familiarizado con el
programa puede y har cosas en las que no ha pensado.
Por ejemplo, en un programa que calcula millas por hora dividiendo el nmero de millas recorridas
por el nmero de horas que demor el viaje, qu pasa si el usuario escribe cero para las horas o las
millas? Probmoslo y vea.

Intntelo

Para probar el programa

1.

Abra el proyecto LogicErrors que se cre en la leccin anterior, Qu? Esto no debiera haber
ocurrido. Encontrar errores lgicos.

Nota:
Si no finaliz o no guard el proyecto anterior, deber regresar y finalizarlo antes de poder
continuar.

2.

Presione F5 para ejecutar el programa. En el primer cuadro de texto, escriba 0 (para

representar minutos) y en el segundo escriba 5 (para representar millas) y, a continuacin,
haga clic en Button1.
Se muestra un cuadro de mensaje con el mensaje "Velocidad media infinito."
Mantenga abierto el proyecto: en el siguiente procedimiento aprender a encontrar el error
lgico.

5 dividido por 0 = Infinito?

En el procedimiento anterior, es posible que "Infinito" no sea lo que se esperaba, pero es

matemticamente correcto: 0 cabe en 5 un nmero infinito de veces. Sin embargo, ste no es el
resultado que se desea que los usuarios del programa vean. Puede pensar en una forma de evitar
esto?
Podra pensar en agregar un controlador de errores, un procedimiento descrito en la leccin Qu
hacer cuando algo sale mal: control de errores. Sin embargo, en este caso no funcionara porque el
resultado "Infinito" no es un error, nicamente no es lo que desea.
Puesto que no es til mostrar una velocidad de cero, una manera de corregir el problema es probar
un valor de cero y advertir al usuario que debe escribir un nmero mayor. Mientras se realiza esto,
tambin se puede evitar que el usuario escriba nmeros negativos, puesto que los nmeros
negativos tambin pueden generar un resultado falso.

En el siguiente procedimiento, se modificar el cdigo en el controlador de eventos Button1_Click

para llamar slo a la funcin GetMPH si los valores son mayores que cero.

Intntelo

Para corregir el error

1.

En el Editor de cdigo, cambie el cdigo en el controlador de eventos Button1_Click de la

siguiente manera:
VB
Copiar

Dim minutes As Integer = CInt(Textbox1.Text)

Dim miles As Double = CDbl(Textbox2.Text)
Dim hours As Double = 0
If minutes <= 0 Or miles <= 0 Then
MsgBox("Please enter a number greater than zero")
Else
hours = minutes / 60
MsgBox("Average speed " & GetMPH(miles, hours))
End If

2.

Presione F5 para ejecutar el programa nuevamente. En el primer cuadro de texto, escriba 0, y

en el segundo, escriba 5. A continuacin, haga clic en Button1.
Aparecer el cuadro de mensaje indicndole que especifique un nmero mayor que 0.
Intntelo probando el programa con otras combinaciones de nmeros hasta que est
seguro de que se ha corregido el error.

Agregar notas a programas: utilizar comentarios

Visual Studio 2008
Otras versiones

Actualizacin: noviembre 2007

En esta leccin, obtendr informacin sobre cmo crear comentarios en el cdigo de sus programas.
El cdigo que forma un programa puede ser difcil de leer y entender, sobre todo si el usuario no es
la persona que lo escribi originalmente. Al utilizar comentarios, puede crear notas para s mismo o
para otros usuarios del cdigo.
Los comentarios son entradas de texto del editor de cdigo que el compilador de Visual Basic omite
cuando se ejecuta el programa. Por tanto, puede escribir una nota que explique lo que hace una
seccin determinada del programa, o bien un aviso para finalizar las tareas de programacin
incompletas.
El comentario se crea iniciando una lnea con el carcter '. El ejemplo siguiente muestra cmo crear
un comentario.
VB
Copiar

' This is a comment. WOW!

Tambin puede agregar comentarios al final de las lneas, as como usar el carcter '. Este
procedimiento suele realizar para proporcionar comentarios sobre lneas individuales de cdigo,
como se ve en el ejemplo siguiente.
VB
Copiar

MsgBox("Hello World!") ' This line causes a message box to appear.

Al igual que con los comentarios de una nica lnea, el programa omite todo lo que vaya despus del
carcter ' de esa lnea.

Utilizar comentarios para depuracin

Otro uso comn de los comentarios es evitar temporalmente que una lnea de cdigo se ejecute
mientras depura su programa. Por ejemplo, suponga que tena una lnea que mostraba un cuadro de
mensaje.
VB
Copiar

MsgBox("Hello World!")

Si quiere ejecutar el programa sin mostrar esa lnea, pero no desea eliminarla permanentemente,
utilice el carcter del comentario (') para ocultarla temporalmente de su programa, tal y como se
muestra a continuacin.
VB
Copiar

' MsgBox("Hello World!")

Como todo lo que va despus del carcter ' se omite, el programa se ejecutar sin ejecutar esa lnea.
Puede quitar el carcter ' despus y se mostrar el cuadro de mensaje.

Intntelo!

Para insertar comentarios

1.
2.
3.

En el men Archivo, elija Nuevoproyecto.

En el cuadro de dilogo Nuevo proyecto, en el panel Plantillas, haga clic en Aplicacin para
Windows.
En el cuadro Nombre, escriba Comments y, a continuacin, haga clic en Aceptar.
Se abrir un nuevo proyecto de formularios Windows Forms.

4.
5.

Haga doble clic en el formulario para abrir el Editor de cdigo.

En el controlador del evento Form1_Load, escriba el siguiente cdigo.
VB
Copiar

' This code will cause two message boxes to appear

MsgBox("This is Message Box 1") ' Display Message Box 1

MsgBox("This is Message Box 2") ' Display Message Box 2

6.

Presione F5 para ejecutar el programa.

El programa se inicia y se muestran los dos cuadros de mensaje de uno en uno.

7.
8.

En el men Depurar, elija Detener depuracin para finalizar el programa.

En el Editor de cdigo, agregue un carcter de comentario (') a la primera lnea del cuadro
de mensaje, para que se lea lo siguiente.
VB
Copiar

' MsgBox("This is MessageBox 1") ' Ignore Message Box 1

9.

Presione F5 para ejecutar el programa.

Observe que esta vez el programa omite la primera lnea del cuadro de mensaje y slo se
muestra el segundo cuadro de mensaje.

Agregar notas a programas: utilizar comentarios

Visual Studio 2008
Otras versiones

Actualizacin: noviembre 2007

En esta leccin, obtendr informacin sobre cmo crear comentarios en el cdigo de sus programas.
El cdigo que forma un programa puede ser difcil de leer y entender, sobre todo si el usuario no es
la persona que lo escribi originalmente. Al utilizar comentarios, puede crear notas para s mismo o
para otros usuarios del cdigo.
Los comentarios son entradas de texto del editor de cdigo que el compilador de Visual Basic omite
cuando se ejecuta el programa. Por tanto, puede escribir una nota que explique lo que hace una
seccin determinada del programa, o bien un aviso para finalizar las tareas de programacin
incompletas.

El comentario se crea iniciando una lnea con el carcter '. El ejemplo siguiente muestra cmo crear
un comentario.
VB
Copiar

' This is a comment. WOW!

Tambin puede agregar comentarios al final de las lneas, as como usar el carcter '. Este
procedimiento suele realizar para proporcionar comentarios sobre lneas individuales de cdigo,
como se ve en el ejemplo siguiente.
VB
Copiar

MsgBox("Hello World!") ' This line causes a message box to appear.

Al igual que con los comentarios de una nica lnea, el programa omite todo lo que vaya despus del
carcter ' de esa lnea.

Utilizar comentarios para depuracin

Otro uso comn de los comentarios es evitar temporalmente que una lnea de cdigo se ejecute
mientras depura su programa. Por ejemplo, suponga que tena una lnea que mostraba un cuadro de
mensaje.
VB
Copiar

MsgBox("Hello World!")

Si quiere ejecutar el programa sin mostrar esa lnea, pero no desea eliminarla permanentemente,
utilice el carcter del comentario (') para ocultarla temporalmente de su programa, tal y como se
muestra a continuacin.
VB
Copiar

' MsgBox("Hello World!")

Como todo lo que va despus del carcter ' se omite, el programa se ejecutar sin ejecutar esa lnea.
Puede quitar el carcter ' despus y se mostrar el cuadro de mensaje.

Intntelo!

Para insertar comentarios

1.
2.
3.

En el men Archivo, elija Nuevoproyecto.

En el cuadro de dilogo Nuevo proyecto, en el panel Plantillas, haga clic en Aplicacin para
Windows.
En el cuadro Nombre, escriba Comments y, a continuacin, haga clic en Aceptar.
Se abrir un nuevo proyecto de formularios Windows Forms.

4.
5.

Haga doble clic en el formulario para abrir el Editor de cdigo.

En el controlador del evento Form1_Load, escriba el siguiente cdigo.
VB
Copiar

' This code will cause two message boxes to appear

MsgBox("This is Message Box 1") ' Display Message Box 1
MsgBox("This is Message Box 2") ' Display Message Box 2

6.

Presione F5 para ejecutar el programa.

El programa se inicia y se muestran los dos cuadros de mensaje de uno en uno.

7.
8.

En el men Depurar, elija Detener depuracin para finalizar el programa.

En el Editor de cdigo, agregue un carcter de comentario (') a la primera lnea del cuadro
de mensaje, para que se lea lo siguiente.
VB
Copiar

' MsgBox("This is MessageBox 1") ' Ignore Message Box 1

9.

Presione F5 para ejecutar el programa.

Observe que esta vez el programa omite la primera lnea del cuadro de mensaje y slo se
muestra el segundo cuadro de mensaje.

Administrar registros: utilizar datos en un programa

Visual Studio 2008
Otras versiones

Actualizacin: noviembre 2007

La mayora de los programas utiliza los datos de una forma u otra. Por ejemplo, en una leccin
anterior, especific datos en forma de nmeros; esos datos se utilizaron en un clculo con el
resultado devuelto en un cuadro de mensajes.
En programas muy simples, los datos se representan como campos dentro del mismo programa. Sin
embargo, en los programas ms complejos, los datos se almacenan en una estructura independiente
del programa, denominada base de datos.
En este conjunto de lecciones, aprender a crear una base de datos y a utilizarla para mostrar y
actualizar datos de los programas.

En esta seccin
Almacenar y obtener acceso a datos
Explica cmo utilizar una base de datos para almacenar datos y tener acceso a ellos.
Crear la primera base de datos
Describe cmo crear una base de datos con Visual Database Tools en Visual Basic.
Obtener la informacin necesaria: conectarse a una base de datos existente
Describe cmo conectar un programa a una base de datos existente.
Mostrar informacin al usuario: mostrar datos en la interfaz de usuario

Explica cmo crear una interfaz de usuario bsica para ver los datos de una base de datos
local.
Agregar o modificar registros: actualizar datos
Muestra cmo crear un formulario de entrada de datos para actualizar los datos de una base
de datos local.
Mostrar datos relacionados
Explica cmo agregar datos de una tabla y datos de una tabla relacionada a una aplicacin
de formularios Windows Forms.
Crear clases de LINQ to SQL usando el Diseador relacional de objetos
Muestra cmo usar el Diseador relacional de objetos para crear clases LINQ to SQL y, a
continuacin, enlazar los datos a controles en un formulario Windows Forms.
Usar LINQ para enlazar datos a controles
Explica cmo escribir una consulta LINQ y enlazar los resultados a un control en un
formulario Windows Forms.
Incluir XML directamente en el cdigo: usar literales XML
Muestra cmo usar literales XML.

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

Empezar a crear un proyecto de aplicacin de Windows

Windows Forms

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

Cambiar el aspecto del formulario mediante la ventana

formulario

Propiedades.

Paso 4: Disear un formulario con un

Agregar un control TableLayoutPanel al formulario.

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

Cambiar el nombre de los botones por otros ms

de botn

significativos.

Paso 7: Agregar componentes de dilogo al

Agregar un componente OpenFileDialog y un

formulario

componente ColorDialog al formulario.

Paso 8: Escribir cdigo para el controlador

Escribir cdigo mediante la herramienta IntelliSense.

de eventos del botn Mostrar una imagen

Paso 9: Revisar, comentar y probar el

Revisar y probar el cdigo. Agregar comentarios segn sea

cdigo

necesario.

Paso 10: Crear botones adicionales y una

Escribir cdigo para hacer que funcionen otros botones y

casilla

una casilla mediante IntelliSense.

Paso 11: Ejecutar el programa y probar

Ejecutar el programa y establecer el color de fondo. Probar

otras caractersticas

con otras caractersticas, como cambiar colores, fuentes y

bordes.

Paso 1: Crear un proyecto de aplicacin de Windows

Forms
Visual Studio 2010
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.
2.
3.
4.

En el men Archivo, haga clic en Nuevo proyecto.

Si no usa Visual Studio Express, primero debe seleccionar un lenguaje. En la lista Plantillas
instaladas, seleccione C# o Visual Basic.
Haga clic en el icono Aplicacin de Windows Forms, especifique el nombre PictureViewer y
haga clic en Aceptar. Visual Studio crea automticamente la solucin.
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.
6.
7.

Asegrese de que el proyecto se guarda en una carpeta que pertenezca a la carpeta Mis
documentos.
Compruebe que est activada la casilla Crear directorio para la solucin.
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.

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

Paso 2: Ejecutar el programa

Visual Studio 2010
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

Visual Studio 2010
A continuacin, se utiliza la ventana Propiedades para cambiar la apariencia del formulario.

Para establecer las propiedades del formulario

1.
2.

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).
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 primero plano y del
fondo, el texto de ttulo que aparece en la parte superior del formulario, el tamao del
formulario y otras propiedades.

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

3.

Una vez seleccionado el formulario, desplcese hasta la parte inferior de la ventana

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 2010
En este paso, agregar un control TableLayoutPanel al formulario.

Para disear el formulario con un control TableLayoutPanel

1.

2.

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.)
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 2010
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.
2.

3.

Vaya al Cuadro de herramientas y expanda el grupo Controles comunes. Se muestran los

controles ms comunes que suelen aparecer en los formularios.
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.
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.

5.

6.

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

4.

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.
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 2010
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 Sub showButton_Click() Handles showButton.Click

End Sub

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.

6.

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.
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.
8.
9.
10.

A continuacin se muestra el nuevo cdigo que aparece en el editor de cdigo.

C#
VB
Copiar

11.
12. Private Sub clearButton_Click() Handles clearButton.Click
13.
14. End Sub
15.
16. Private Sub backgroundButton_Click() Handles backgroundButton.Click
17.
18. End Sub
19.
20. Private Sub closeButton_Click() Handles closeButton.Click
21.
22. End Sub
23.
24. Private Sub CheckBox1_CheckedChanged() Handles
CheckBox1.CheckedChanged
25.
26. End Sub
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.

Nota
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 de mtodo para dejar claro que se trata de un mtodo.

Paso 7: Agregar componentes de dilogo al

formulario
Visual Studio 2010
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.

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

Nota
Para ver un ejemplo del cuadro de dilogo Abrir archivo en una aplicacin diferente, abra el Bloc de
notas o Paint y haga clic en Abrir en el men Archivo. Observe que hay una lista desplegable de
tipo de archivo en la parte inferior. Acabamos de utilizar la propiedad Filter del componente
OpenFileDialog para configurarla. Observe 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 2010
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.

2.

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.
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:
a. Comience con el texto seleccionado true del fragmento de cdigo. Escriba op para
sobrescribirlo. (En Visual Basic, empieza con mayscula inicial, de modo que deber
escribir Op.)
b. Se abre la ventana IntelliSense y muestra openFileDialog1. Presione TAB para
seleccionarlo. (En Visual Basic, empieza con mayscula inicial, de modo que
aparecer OpenFileDialog1. Asegrese de que OpenFileDialog1 est
seleccionado.)
c. Escriba un punto (.) (En ingls se denomina period o dot.) Dado que 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, 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.

d.
e.

Icono de mtodo

f.
g.

Icono de propiedad

h.
i.

Icono de evento

j.

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.

k.

Cuando se utiliza un mtodo con un control o un componente (lo que se denomina

llamar a un mtodo), es preciso agregar parntesis. As pues, especifique los
parntesis de apertura y cierre: ()

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

l.

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.)
m. Agregue otro espacio. En cuanto haga, se abrir otra ventana IntelliSense. Empiece
a escribir DialogResult y presione la tecla TAB para agregarlo.

Nota
Cuando se escribe cdigo para llamar a un mtodo, a veces devuelve un valor. En este caso, el
mtodo ShowDialog() del componente OpenFileDialog devuelve un valor DialogResult.
DialogResult es un valor especial que 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.

n.

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

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

o.

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 Sub showButton_Click() Handles showButton.Click

If OpenFileDialog1.ShowDialog() = DialogResult.OK Then

PictureBox1.Load(OpenFileDialog1.FileName)
End If

End Sub

Paso 9: Revisar, comentar y probar el cdigo

Visual Studio 2010
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 Sub showButton_Click() Handles showButton.Click

' Show the Open File dialog. If the user clicks OK, load the
' picture that the user chose.
If OpenFileDialog1.ShowDialog() = DialogResult.OK Then
PictureBox1.Load(OpenFileDialog1.FileName)
End If

End Sub

Nota
El controlador de eventos Click del botn showButton ya est completado y funciona. Ha empezado
a escribir cdigo, comenzando por una instruccin if. Una instruccin if es la manera de ordenar al
programa: "Compruebe esto y, si se cumple, realice estas acciones". En este caso, se ordena al

programa que abra el cuadro de dilogo Abrir archivo y, si el usuario selecciona un archivo y hace
clic en el botn Aceptar, ese archivo se carga en PictureBox.

Nota
El IDE se ha creado para facilitar la tarea de escribir cdigo. Los fragmentos de cdigo constituyen
una manera de conseguirlo. Un fragmento de cdigo es un acceso directo que se expande para crear
un bloque pequeo de cdigo.
Puede ver 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.
2.

3.

Presione la tecla F5 o haga clic en el botn Iniciar depuracin de la barra de herramientas.

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

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. 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 Sub clearButton_Click() Handles clearButton.Click

' Clear the picture.
PictureBox1.Image = Nothing
End Sub

Private Sub backgroundButton_Click() Handles backgroundButton.Click

' 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 Then
PictureBox1.BackColor = ColorDialog1.Color
End If
End Sub

Private Sub closeButton_Click() Handles closeButton.Click

' Close the form.
Close()
End Sub

Private Sub CheckBox1_CheckedChanged() Handles CheckBox1.CheckedChanged

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

PictureBox1.SizeMode = PictureBoxSizeMode.StretchImage
Else
PictureBox1.SizeMode = PictureBoxSizeMode.Normal
End If
End Sub

Paso 11: Ejecutar el programa y probar otras

caractersticas
Visual Studio 2010
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.
2.

Presione F5 o haga clic en el botn Iniciar depuracin de la barra de herramientas.

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.

Tutorial 2: Crear un laberinto

Visual Studio 2010
En este tutorial, se compila un juego de laberinto, donde el usuario tiene que mover el puntero del
mouse desde la salida hasta la meta sin tocar ninguno de los muros. Aprender a:

Disear un formulario mediante un contenedor Panel.

Construir un laberinto mediante controles Label.
Escribir cdigo para mostrar un cuadro de mensaje.
Configurar controladores de eventos para los eventos del mouse.
Reproducir sonidos en el programa.
Organizar el cdigo mediante clases.

As funcionar el laberinto: el puntero del mouse se sita al principio en la esquina superior izquierda
del laberinto. El usuario navega por el laberinto, con cuidado de no tocar ninguno de los muros con
el puntero. Si el puntero toca alguno de los muros, vuelve automticamente hasta la salida. Pero si el
puntero llega a la etiqueta Meta al final del laberinto, aparece un mensaje de felicitacin y el juego
finaliza.
Cuando termine, el programa se parecer al de la ilustracin siguiente.
Juego 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.

Ttulo

Descripcin

Paso 1: Crear un proyecto y agregar

Para empezar, cree el proyecto y agregue un contenedor

un panel al formulario

Panel.

Paso 2: Compilar el laberinto

Construya un laberinto agregando numerosos controles

mediante etiquetas

Label al formulario.

Paso 3: Finalizar el juego

Haga que el juego del laberinto finalice haciendo que

funcione la etiqueta Meta.

Paso 4: Agregar un mtodo para

Escriba su propio mtodo para reiniciar el juego del

reiniciar el juego

laberinto.

Paso 5: Agregar un controlador de

Agregue un controlador de eventos para devolver el puntero

eventos MouseEnter para cada muro

del mouse del usuario a la salida si el puntero toca algn

muro.

Paso 6: Agregar un SoundPlayer

Empiece a agregar sonido al juego del laberinto.

Paso 7: Agregar cdigo al formulario

Llame a cada mtodo SoundPlayer's Play() a fin de

para reproducir sonidos

reproducir el sonido en el momento adecuado.

Paso 8: Ejecutar el programa y probar

Ejecute el programa y prubelo. Pruebe con otras

otras caractersticas

caractersticas, como cambiar sonidos y colores.

Paso 1: Crear un proyecto y agregar un panel al

formulario
Visual Studio 2010
El primer paso para crear un juego de laberinto es crear el proyecto y agregar un contenedor Panel
al formulario.

Para crear un proyecto y agregar un contenedor Panel

1.
2.
3.
4.

En el men Archivo, haga clic en Nuevo proyecto.

Si no usa Visual Studio Express, primero debe seleccionar un lenguaje. En la lista Plantillas
instaladas, seleccione C# o Visual Basic.
Haga clic en el icono Aplicacin de Windows Forms y, a continuacin, escriba el nombre
Laberinto.
Establezca las propiedades del formulario.
a. Cambie el tamao del formulario utilizando el puntero para arrastrar la esquina
inferior derecha. Observe la esquina inferior derecha del entorno de desarrollo
integrado (IDE). El tamao del formulario aparece en la barra de estado. Siga
arrastrando hasta que el formulario tenga 650 pxeles de ancho y de alto. Puede
construir un laberinto menor o mayor, as que puede crear el formulario con el
tamao que desee.
Tamao en la barra de estado

b.
c.
d.

Cuando el formulario tenga el tamao adecuado, establezca la propiedad Text en

Laberinto.
Para que el usuario no pueda cambiar el tamao del formulario, establezca la
propiedad FormBorderStyle en Fixed3D.
Deshabilite el botn Maximizar de la barra de ttulo del formulario estableciendo la
propiedad MaximizeBox en False.

Ahora tiene un formulario de tamao fijo, que el usuario no puede maximizar.

Nota
Cuando se crea un formulario nuevo, de manera predeterminada est configurado de modo que el
usuario pueda cambiar el tamao de dos maneras: el usuario puede arrastrar los lados o las esquinas
del formulario, o hacer clic el botn Maximizar para maximizar el formulario. Para asegurarse de que
un usuario no pueda cambiar el tamao del formulario, deshabilite estas dos opciones. Establecer la
propiedad FormBorderStyle en cualquiera de los estilos fijos evita que el usuario cambie su tamao,
pero todava hacer clic en el botn Maximizar. Por ello, tambin hay que deshabilitar la propiedad
MaximizeBox.

Luego, es preciso crear la pista de juegos, donde se construir el laberinto. Para ello, utilice
un control Panel. Un panel es un tipo de control contenedor que permite disponer un grupo
de controles. A diferencia de algunos de los otros contenedores (como el contenedor
TableLayoutPanel y el contenedor FlowLayoutPanel), un panel no reorganiza los controles

que contiene. Esto le ofrece libertad para colocar los controles donde desee, pero un panel
no resulta til cuando el usuario cambia el tamao de la ventana (al contrario que con los
controles TableLayoutPanel o FlowLayoutPanel).
5.

Vaya al grupo Contenedores del Cuadro de herramientas y haga doble clic en Panel para
agregar un panel al formulario. Cuando el panel est seleccionado, debera aparecer un
icono de desplazamiento en su esquina superior izquierda, como se muestra a continuacin.
Icono de desplazamiento

6.

Arrastre el panel hasta que se encuentre muy cerca de la esquina superior izquierda del
formulario. Al arrastrarlo, observar una caracterstica muy til del IDE: en cuanto el panel se
encuentre a una distancia determinada de la parte superior o del borde izquierdo del
formulario, se coloca automticamente en su lugar y una lnea de separacin azul entre el
borde del panel y el borde del formulario. Puede utilizar esto para alinear fcilmente el panel
de modo que todos sus bordes estn exactamente a la misma distancia de los bordes del
formulario. En cuanto vea las lneas de separacin azules superior e izquierda, suelte el
botn del mouse para colocar el panel en su lugar. Las lneas de separacin aparecen como
sigue.
Lneas de separacin azules

Arrastre el controlador de arrastre inferior derecho hasta que el panel se coloque en su lugar
respecto de los bordes derecho e inferior.
7.
8.

Como desea que el usuario vea el permetro del laberinto, es preciso que tenga un borde
visible. Seleccione el panel y establezca su propiedad BorderStyle en Fixed3D.
Guarde el proyecto haciendo clic en el botn Guardar todo de la barra de herramientas, que
se muestra a continuacin.
Botn Guardar todo

9.

Para ejecutar el programa, presione F5 o haga clic en el botn de Iniciar depuracin de la

barra de herramientas, que se muestra a continuacin.

Botn de la barra de herramientas Iniciar depuracin

Al ejecutarse, el formulario se debera parecer la siguiente imagen.

Formulario de laberinto inicial

10. Antes de seguir al prximo paso del tutorial, detenga el programa cerrando el formulario o
haciendo clic en el botn Detener depuracin de la barra de herramientas Depuracin.
(Mientras el programa est en ejecucin, el IDE permanece en modo de solo lectura.)

Paso 2: Compilar el laberinto mediante etiquetas

Visual Studio 2010
Ahora es el momento de construir el laberinto. Para construir el laberinto, se agregan muchos
controles Label al formulario. Normalmente, una etiqueta se utiliza para mostrar texto. Sin embargo,
en este proyecto las utilizaremos para dibujar rectngulos coloreados en el formulario, que sern los
muros del laberinto.

Para construir el laberinto mediante etiquetas

1.
2.

En el Diseador de Windows Forms, vaya al grupo Controles comunes en el Cuadro de

herramientas y haga doble clic en Label para que el IDE agregue una etiqueta al formulario.
Establezca varias propiedades para que la etiqueta se convierta en un rectngulo, cuyo
tamao pueda modificar:
Establezca la propiedad AutoSize en False.
Establezca la propiedad BackColor en cualquier color que le guste. (Para este tutorial,
se ha seleccionado RoyalBlue en la pestaa Color web).
Cambie la propiedad Text para que est vaca, seleccionando el texto label1 y
eliminndolo.
Etiqueta convertida en un rectngulo relleno

El control Label debera ser ahora un rectngulo relleno.

Nota
Esto puede parecer inusual porque un control Label est diseado para utilizarse como una etiqueta.
En este caso, utilizamos la etiqueta como bloque de dibujo, porque funciona. Una parte importante
de la programacin consiste en reconocer cundo una herramienta del cuadro de herramientas (o,
en este caso, del Cuadro de herramientas del IDE) funciona para la tarea que se desea realizar,
aunque no se haya diseado originalmente para ello.

3.

4.

Ahora, puede ser creativo al construir el laberinto. Para copiar la etiqueta, seleccinela y
haga clic en Copiar en el men Edicin (o presione Ctrl+C). A continuacin, pguela varias
veces. Seleccione Pegar en el men Edicin (o presione Ctrl+V). As deberan crearse los
muros horizontales del laberinto. Tome uno de los muros y arrstrelo para que quede alto y
estrecho. Cpielo y pguelo varias veces para crear los muros verticales.
Arrastre las etiquetas por el panel y cree el laberinto. No deje demasiado estrechos los
pasadizos, pues resultara demasiado difcil jugar. Deja espacio adicional en la esquina
superior izquierda, porque es donde el jugador empieza a recorrer el laberinto.

Nota
Como recordar, el tamao del formulario aparece en la barra de estado del IDE al cambiar su
tamao. El IDE hace lo mismo al cambiar el tamao de las etiquetas o de cualquier otro control. Si lo
desea, puede utilizar esta caracterstica para asegurarse de que todos los muros del laberinto tienen
el mismo ancho.
Las barras de alineacin del IDE que utiliz para colocar el panel tambin resultan tiles para colocar
los muros del laberinto. Tambin puede utilizar las teclas de direccin del teclado para ajustar con
precisin la posicin del control que est seleccionado actualmente. En la siguiente imagen se
muestra el tamao en la barra de estado.

5.

Tamao en la barra de estado

6.

7.

8.
9.

Despus de disear el laberinto, vaya al grupo Controles comunes del Cuadro de

herramientas y haga doble clic en Label una vez ms. Utilice la lnea (Name) de la ventana
Propiedades para denominarla finishLabel y cambie su propiedad Text a Meta.
Arrastre la nueva etiqueta Meta al final del laberinto. Este es el objetivo que usuario debe
alcanzar.
Cierre el proyecto y ejecute el programa de nuevo. A continuacin se muestra un ejemplo de
un formulario de laberinto finalizado. (Su laberinto tendr un aspecto diferente.)
Formulario de laberinto finalizado

Paso 3: Finalizar el juego

Visual Studio 2010

Para que el juego finalice, hay que hacer que funcione la etiqueta Meta. Para ello, se agrega un
controlador de eventos para el evento MouseEnter de la etiqueta.

Nota
Si ha completado el tutorial 1: Crear un visor de imagen, ya sabe qu son los controladores de
eventos. La mayora de los controles tienen muchos eventos diferentes que pueden generar. En el
visor de imagen se utilizan el evento Click del control Button y el evento CheckChanged del control
CheckBox. En este tutorial, se utiliza el evento MouseEnter del control Label, que se genera cada vez
que el puntero del mouse entra en el control. El control Label tiene ms de cuatro docenas de
eventos. La mayora de ellos tiene nombres intuitivos, como DoubleClick, Resize y TextChanged. Ms
adelante en este tutorial se proporciona una lista de nombres de evento.

Para finalizar el juego

1.

Seleccione el control finishLabel y, a continuacin, haga clic en el icono Evento en la parte

superior de la ventana Propiedades, que representa un rayo. Al hacer clic en l, aparecen los
eventos del control en lugar de sus propiedades. Puede volver a la lista de propiedades
haciendo clic en el icono de propiedad. Por ahora, mantenga la ventana Propiedades como
est, de modo que muestre todos los eventos del control finishLabel. Desplcese hacia abajo
hasta el evento MouseEnter. Los iconos y el evento MouseEnter aparecen como sigue.
Icono de evento

Icono de propiedad

Evento MouseEnter

2.

Haga doble clic en el palabra MouseEnter. Despus de hacerlo, el IDE agrega

automticamente un mtodo de control de eventos al formulario y muestra el editor de
cdigo, como sigue.
C#
VB
Copiar

Private Sub finishLabel_MouseEnter() Handles finishLabel.MouseEnter

End Sub

Este mtodo de control de eventos se ejecuta cada vez que el puntero del mouse entra en la
etiqueta.
3.

Queremos que el programa abra un cuadro de mensaje que felicite al usuario y que, a
continuacin, se cierre el programa. Para ello, se agregan lneas de cdigo (con un
comentario), como sigue.
C#
VB

Copiar

Private Sub finishLabel_MouseEnter() Handles finishLabel.MouseEnter

' Show a congratulatory MessageBox, then close the form.

MessageBox.Show("Congratulations!")
Close()
End Sub

Nota
El mtodo finishLabel_MouseEnter() tiene dos instrucciones. La primera instruccin consiste en
llamar a un mtodo denominado Show(), que abre un cuadro de mensaje que contiene cualquier
texto que haya escrito entre los parntesis.

4.

Puede obtener ms informacin sobre lo que sucede utilizando el IDE para explorar el
cdigo. Coloque el puntero del mouse de modo que se encuentre encima de la palabra
MessageBox. Debera aparecer la siguiente informacin sobre herramientas.
Tooltip

Nota
El IDE muestra que hay una clase denominada System.Windows.Forms.MessageBox, y que el
mtodo Show() al que ha llamado se encuentra dentro de esa clase. No se requieren conocimientos
completos para que el cuadro de mensaje funcione, pero la informacin adicional puede resultar til.
Con respecto a la segunda instruccin, cada formulario tiene un mtodo integrado denominado
Close() que hace que el formulario se cierre. Algunos programas tienen varias ventanas entre las que
el usuario puede alternar. Cuando se trabaja en un programa de ese tipo, este cierra la ventana
activa pero en ejecucin el resto del programa. (Por ejemplo, si tiene varios documentos de
Microsoft Office Word abiertos al mismo tiempo, al cerrar una ventana de documento se cierra ese

documento, pero Office Word permanece abierto.) Sin embargo, en un programa como este, donde
hay una sola ventana, al cerrarla se deja de ejecutar el programa; por consiguiente, al cerrar el
formulario, se cierra el programa.

5.

Guarde y ejecute el programa. Mueva el puntero del mouse sobre la etiqueta Meta. Debera
abrir el mensaje y, a continuacin, cerrar el programa.

Paso 4: Agregar un mtodo para reiniciar el juego

Visual Studio 2010
Hemos visto cmo el IDE puede agregar automticamente un mtodo de control de eventos al
programa. Tambin se pueden escribir mtodos y agregarlos al cdigo. Muchos programadores
dedican gran parte de su tiempo a agregar sus propios mtodos.

Nota
Escribir sus propios mtodos es til cuando hay un conjunto de instrucciones que se tienen que
ejecutar muchas veces, en lugares diferentes. Esto sucede con frecuencia cuando se escriben
programas.
Por ejemplo, para crear este programa de laberinto, queremos que el programa site
automticamente el puntero del mouse en la esquina superior izquierda del panel cada vez que se
inicie. Cuando el usuario mueve el puntero y toca un muro, el programa tiene que volver a colocar el
puntero en la salida. Cuando el usuario saca el puntero de la pista de juegos y vuelve a situarlo en
ella, el programa tiene que volver a colocar el puntero en la salida.
El puntero se puede colocar en la salida con tres lneas de cdigo. Pero ahorraremos tiempo si
evitamos escribir esas mismas tres lneas de cdigo en distintos lugares del programa. Si colocamos
esas tres lneas de cdigo en un mtodo (por ejemplo, un mtodo denominado MoveToStart()) solo
tendremos que escribirlas una vez. A continuacin, bastar con llamar al mtodo MoveToStart()
cada vez que haya que devolver el puntero a la esquina superior izquierda del panel.

Para agregar un mtodo para reiniciar el juego

1.
2.

Vaya al cdigo de formulario. Para ello, haga clic con el botn secundario en Form1.cs en el
Explorador de soluciones y seleccione Ver cdigo en el men.
Deber aparecer el mtodo finishLabel_MouseEnter() que agreg. Justo debajo de ese
mtodo, agregue un nuevo mtodo MoveToStart().
C#
VB

Copiar

Private Sub MoveToStart()

Dim startingPoint = Panel1.Location
startingPoint.Offset(10, 10)
Cursor.Position = PointToScreen(startingPoint)
End Sub

3.

Hay un tipo especial de comentario que puede agregar encima de cualquier mtodo, y el
IDE puede ayudarle a agregarlo. Site el cursor en la lnea que est encima del nuevo
mtodo. En Visual C#, agregue tres marcas de barra diagonal (///). En Visual Basic, agregue
tres comillas sencillas ('''). El IDE incluye automticamente el siguiente texto.
C#
VB
Copiar

''' <summary>
'''
''' </summary>
''' <remarks></remarks>
Private Sub MoveToStart()
Dim startingPoint = Panel1.Location
startingPoint.Offset(10, 10)
Cursor.Position = PointToScreen(startingPoint)
End Sub

4.

En la lnea situada entre las dos etiquetas summary, escriba el siguiente comentario.
(Despus de presionar ENTRAR, el IDE agrega automticamente una nueva lnea con tres

marcas de barra diagonal (///) o tres comillas sencillas ('''), dependiendo del lenguaje de
programacin, de modo que pueda continuar su comentario.)
C#
VB
Copiar

''' <summary>
''' Move the pointer to a point 10 pixels down and to the right
''' of the starting point in the upper-left corner of the maze.
''' </summary>

Nota
Acaba de agregar un comentario XML. Como recordar, el IDE le ha mostrado informacin en una
informacin sobre herramientas al detener el cursor sobre la palabra MessageBox. El IDE rellena
automticamente la informacin sobre herramientas de los mtodos. Cualquier cosa que escriba en
un comentario XML aparecer en la informacin sobre herramientas del IDE, as como en la ventana
IntelliSense. Cuando un programa tiene muchos mtodos, puede resultar de gran utilidad. Adems,
si coloca un muro a 10 pxeles de distancia de los bordes superior e izquierdo de la esquina superior
izquierda del panel, puede cambiar (10, 10) en el cdigo. Experimente con distintos nmeros hasta
que encuentre una salida para el puntero que sea adecuada para el laberinto.

5.

Despus de agregar el mtodo, hay que llamarlo. Dado que queremos que el programa
mueva el puntero a la salida en cuanto el programa se inicie, se debe llamar al mtodo tan
pronto como se inicia el formulario. Para Visual C#, busque el siguiente mtodo en el cdigo
del formulario.
C#
Copiar

public Form1()
{
InitializeComponent();

Para Visual Basic, agregue este mtodo al cdigo del formulario. Antes del mtodo
finishLabel_MouseEnter, escriba el siguiente cdigo.
VB
Copiar

Public Sub New()

Al presionar la tecla ENTRAR para pasar a la lnea siguiente, IntelliSense debera hacer que
apareciese el siguiente cdigo para completar el mtodo.
VB
Copiar

Public Sub New()

' This call is required by Windows Forms Designer.
InitializeComponent()
' Add any initialization after the InitializeComponent() call.
End Sub

Se trata de un mtodo especial denominado constructor. Se ejecuta una vez, al crear el

formulario. En este momento, lo nico que hace es llamar al mtodo InitializeComponent().
Vamos a agregarle una lnea para llamar al nuevo mtodo MoveToStart() que acaba de
escribir. Antes de continuar, piense qu se debe agregar al programa para que llame al
mtodo MoveToStart() inmediatamente despus de llamar al mtodo
InitializeComponent().

Nota

El mtodo InitializeComponent() del constructor del formulario es un mtodo escrito por el IDE.
Agrega todos los controles y componentes al formulario y configura sus propiedades. Cada vez que
se cambia cualquiera de las propiedades del formulario o sus controles, el IDE modifica ese mtodo.
Puede examinarlo abriendo el archivo Form1.Designer.cs en el Explorador de soluciones. No es
preciso editar el contenido del mtodo InitializeComponent(). El IDE se encarga de ello basndose
en el formulario que ha creado en la Vista de diseo.

6.

Agregue una llamada al mtodo MoveToStart() inmediatamente despus de que llame al

mtodo InitializeComponent(). El cdigo del formulario debe ser como el siguiente.
C#
VB
Copiar

Public Class Form1

Public Sub New()

' This call is required by Windows Forms Designer.
InitializeComponent()
' Add any initialization after the InitializeComponent() call.
MoveToStart()
End Sub

Private Sub finishLabel_MouseEnter() Handles

finishLabel.MouseEnter
' Show a congratulatory MessageBox, then close the form.
MessageBox.Show("Congratulations!")
Close()
End Sub

''' <summary>
''' Move the mouse pointer to a point 10 pixels down and to the
right

''' of the starting point in the upper-left corner of the maze.

''' </summary>
''' <remarks></remarks>
Private Sub MoveToStart()
Dim startingPoint = Panel1.Location
startingPoint.Offset(10, 10)
Cursor.Position = PointToScreen(startingPoint)
End Sub

End Class

Fjese en la llamada al mtodo MoveToStart() que aparece debajo de

InitializeComponent(). Si est programando en Visual C#, recuerde finalizar esa lnea con
un signo de punto y coma (;); de lo contrario, el programa no se compilar.
7.

Ahora, guarde el programa y ejectelo. En cuanto el programa se inicie, el puntero debera

situarse automticamente ligeramente por debajo y a la derecha de la esquina superior
izquierda del panel.

Paso 5: Agregar un controlador de eventos

MouseEnter para cada muro
Visual Studio 2010
El juego del laberinto sera ms divertido y supondra un reto mayor si enviase el puntero del mouse
del usuario al principio cada vez que tocase un muro. Antes de seguir leyendo, piense en cmo lo
hara.

Para agregar un controlador de eventos MouseEnter para cada muro

1.
2.

Vaya al Diseador de Windows Forms y haga clic en cualquiera de los muros recin
agregados.
Vaya a la ventana Propiedades y haga clic en el icono Evento para mostrar los eventos de
ese muro. Desplcese hacia abajo hasta el evento MouseEnter. En lugar de hacer doble clic
en l, escriba el texto wall_MouseEnter y, a continuacin, presione ENTRAR. El icono Evento
y la ventana Propiedades aparecen con el siguiente aspecto.
Icono de evento

Ventana Propiedades con el evento MouseEnter

Nota
Al escribir directamente el nombre de evento en la tabla de eventos en la ventana Propiedades, se le
ordena al IDE que cree un controlador de eventos con ese nombre y lo conecte al evento del control.
A menudo, es preferible que el IDE elija los nombres de los eventos, porque los nombres son lgicos
y el uso de nombres facilita a los dems la lectura y comprensin de su cdigo. Cuando el IDE elige
un nombre para un controlador de eventos, utiliza el nombre del control y el nombre del evento. En
este caso, no hemos modificado los nombres predeterminados de los muros, que son label4,
label18, label25, etc. As pues, al hacer clic en un muro denominado label12, el IDE habra dado al
controlador de eventos el nombre label12_MouseEnter. Al escribir el nombre wall_MouseEnter,
estamos eligiendo un nombre ms aplicable. Esto resulta especialmente importante cuando se utiliza
un mismo controlador de eventos para varios controles, que es lo que haremos ms adelante en este
tutorial.

3.

Despus de presionar ENTRAR, el IDE agrega un nuevo controlador de eventos y lo conecta

al evento MouseEnter de ese muro. El cdigo recin agregado debera aparecer en el editor
de cdigo como sigue. En Visual Basic, puede que la etiqueta concreta no sea Label8, como
se muestra en el cdigo.
C#
VB

Copiar

Private Sub wall_MouseEnter() Handles Label8.MouseEnter

End Sub

4.

A continuacin, agregue una llamada a su mtodo MoveToStart(), junto con un comentario

que lo explique. Para empezar, vaya al mtodo y agregue la instruccin MoveToStart(). Se
abre una ventana IntelliSense y aparece lo siguiente.
Ventana IntelliSense

Cuando agregamos, antes, el mtodo MoveToStart(), el IDE lo agreg a la ventana

IntelliSense. El comentario XML que agregamos aparece en la informacin sobre
herramientas. Esto resulta til cuando se escriben programas con gran cantidad de mtodos.
5.

Presione la tecla TAB para ordenar a IntelliSense que complete el nombre del mtodo. Si
est escribiendo el cdigo en Visual C#, recuerde agregar el signo de punto y coma (;) al
final de la instruccin. A continuacin, agregue un comentario encima de la instruccin. El
cdigo debe tener un aspecto parecido al siguiente. En Visual Basic, puede que la etiqueta
concreta no sea Label8, como se muestra en el cdigo.
C#
VB

Copiar

Private Sub wall_MouseEnter() Handles Label8.MouseEnter

' When the mouse pointer hits a wall or enters the panel,
' call the MoveToStart() method.
MoveToStart()
End Sub

6.

Guarde y ejecute el programa. Mueva el puntero del mouse por encima del muro al que ha
conectado el controlador de eventos. (Si no recuerda cul eligi, mueva el puntero del
mouse sobre cada muro hasta que encuentre el apropiado.) En cuanto lo toque, debera
devolver el puntero del mouse al principio.
Luego, hay que hacer lo mismo para el resto de los muros. Puede escribir el mismo
controlador de eventos MouseEnter para cada uno de ellos. Sin embargo, sera un proceso
largo, que dara lugar a varias lneas del mismo cdigo en el programa y sera difcil de
cambiar. El IDE proporciona una manera ms fcil de conectar el mismo controlador de
eventos a todos los muros.

7.
8.
9.

Vaya al Diseador de Windows Forms y haga clic en Seleccionar todo en el men Edicin.
Mantenga presionada la tecla CTRL y, a continuacin, haga clic en la etiqueta Finish para
borrar la seleccin. Deberan quedar seleccionados todos los muros y el panel.
Ahora, vaya a la tabla de eventos de la ventana Propiedades. Desplcese hacia abajo hasta
el evento MouseEnter y haga clic en el cuadro de edicin situado a su lado. Debera ver una
flecha de lista desplegable. Al hacer clic en la flecha, aparece una lista de todos los
controladores de eventos del programa que puede elegir para este evento. En este caso,
debera aparecer el controlador de eventos finishLabel_MouseEnter que agreg
anteriormente, as como el controlador wall_MouseEnter que acaba de escribir, como se
muestra en la siguiente imagen.
Evento MouseEnter con controladores de eventos

10. Seleccione wall_MouseEnter. (Si selecciona el controlador de eventos equivocado o agrega

uno nuevo accidentalmente, puede seleccionar todos los muros y el panel otra vez y, a
continuacin, elegir el mtodo correcto.)
11. Ahora, el juego del laberinto debera resultar ms divertido. Pruebe a guardarlo y ejecutarlo.
Si su puntero toca un muro o usted lo saca del laberinto y vuelve a entrar en l, el programa
debera cambiar de posicin automticamente el puntero y situarlo al principio del laberinto.

Paso 6: Agregar un SoundPlayer

Visual Studio 2010
A continuacin, vamos a agregar sonido al juego del laberinto. Debe sonar un sonido cuando el
usuario toque un muro y el programa lo enve de regreso a la salida, y otro sonido distinto cuando el
usuario gane. En este paso, agregar el sonido que sonar cuando el puntero del mouse toque un
muro. Aunque puede parecer complicado, solo se necesitan unas lneas de cdigo.

Para agregar un SoundPlayer que haga ruido

1.

Para empezar, agregue un control SoundPlayer al cdigo del formulario, justo antes del
constructor.
C#
VB
Copiar

Public Class Form1

' This SoundPlayer plays a sound whenever the player hits a wall.
Dim startSoundPlayer = New
System.Media.SoundPlayer("C:\Windows\Media\chord.wav")

Public Sub New()

' This call is required by Windows Forms Designer.
InitializeComponent()
' Add any initialization after the InitializeComponent() call.
MoveToStart()
End Sub

Nota
La primera lnea (public partial class Form1 : Form) ha aparecido ya varias veces. Es importante,
porque incluye la palabra clave de clase. La palabra clave de clase aparece muchas veces, porque una
clase es un bloque de creacin bsico de cualquier programa.

2.

Anteriormente, ha situado el puntero del mouse sobre la palabra MessageBox de la

instruccin MessageBox.Show("Congratulations!");, para que el IDE abriese una informacin
sobre herramientas. Hgalo de nuevo, pero fjese con ms atencin en la primera lnea, que
se muestra a continuacin.
Tooltip

Nota
La palabra clave de clase aparece en la primera lnea. Aparece con frecuencia porque el cdigo est
organizado en clases, como sigue: el programa tiene clases, cada clase tiene mtodos y cada mtodo
tiene instrucciones. Hay numerosas clases integradas, como MessageBox. La clase MessageBox
tiene un mtodo denominado Show(). Cuando se le llama, ejecuta instrucciones que abren un
cuadro de mensaje. Tambin ha trabajado con las clases Button, Panel y Label. Al establecer sus

propiedades, trabaj con otro aspecto de las clases: una clase puede tener propiedades adems de
mtodos. Al establecer esas propiedades, podemos hacer que la clase ejecute instrucciones que
cambian el comportamiento.

Como habr supuesto, SoundPlayer es una clase que reproduce un sonido. Al crear un
SoundPlayer con la palabra clave new, este carga un sonido de un archivo, que puede
reproducir mediante su mtodo Play(). Vamos a utilizar este SoundPlayer para reproducir el
sonido Chord de Windows cuando el jugador inicie un nuevo juego, o cuando el puntero
toque un muro y el jugador tenga que volver a empezar. (Por eso se denomina
startSoundPlayer.)
3.

Si desea utilizar otros sonidos diferentes, reemplace la ruta de acceso que figura entre las
comillas de la nueva instruccin (C:\Windows\Media\chord.wav) por la ruta de acceso del
archivo de sonido que desea utilizar.
Al compilar un formulario en el Diseador de Windows Forms, utiliza el IDE para ayudarle a
crear su propia clase, en este caso, una clase denominada Form1. Cuando agreg esa lnea
de cdigo encima del constructor, agreg un nuevo SoundPlayer al formulario, exactamente
igual que antes haba agregado un botn o una etiqueta. La instruccin se encuentra fuera
de los mtodos, para que ms de un mtodo pueda tener acceso al SoundPlayer. Por ese
motivo, ha tenido que colocar la nueva instruccin dentro del cdigo del formulario pero
fuera de sus mtodos. Lo hemos denominado startSoundPlayer, de la misma manera que
hemos denominado finishLabel uno de los controles Label.
Despus de agregar la instruccin para crear un nuevo SoundPlayer y denominarlo
startSoundPlayer, aparece en la ventana IntelliSense, exactamente igual que las etiquetas,
los botones y otros controles.
Puede que parezca complicado, pero es similar a lo que hemos hecho previamente en el IDE.
Por ejemplo, cuando utilizamos el Cuadro de herramientas del IDE para agregar un botn o
una etiqueta al formulario, el IDE agrega automticamente lneas de cdigo que se utilizan
para crear un nuevo botn o una nueva etiqueta. Ahora har lo mismo, salvo que esta vez
crear un SoundPlayer. (El segundo SoundPlayer se crea en el paso siguiente del tutorial.)

Paso 7: Agregar cdigo al formulario para reproducir

sonidos
Visual Studio 2010
Ahora, est listo para agregar un segundo SoundPlayer y, a continuacin, agregar un mtodo para
llamar a cada uno de ellos.

Para reproducir sonidos

1.

Para empezar, agregue un segundo SoundPlayer para reproducir el sonido Tada de

Windows. Su juego reproducir este sonido cuando el jugador alcance la etiqueta Meta.
C#
VB

Copiar

Public Class Form1

' This SoundPlayer plays a sound whenever the player hits a wall.
Dim startSoundPlayer = New
System.Media.SoundPlayer("C:\Windows\Media\chord.wav")

' This SoundPlayer plays a sound when the player finishes the
game.
Dim finishSoundPlayer = New
System.Media.SoundPlayer("C:\Windows\Media\tada.wav")

Public Sub New()

' This call is required by Windows Forms Designer.
InitializeComponent()
' Add any initialization after the InitializeComponent() call.
MoveToStart()
End Sub

2.

Ahora, los dos elementos SoundPlayer se han agregado al formulario. Agregue un mtodo
Play() para llamar a SoundPlayer y reproducir el sonido en el momento adecuado. El sonido
debe reproducirse cuando el usuario toque un muro. As pues, agregue la instruccin
startSoundPlayer.Play(); al mtodo MoveToStart(). Recuerde actualizar el comentario. El
mtodo final tendr el siguiente aspecto.
C#
VB
Copiar

''' <summary>

''' Play a sound, then move the mouse pointer to a point 10 pixels
down and to
''' the right of the starting point in the upper-left corner of the
maze.
''' </summary>
''' <remarks></remarks>
Private Sub MoveToStart()
startSoundPlayer.Play()
Dim startingPoint = Panel1.Location
startingPoint.Offset(10, 10)
Cursor.Position = PointToScreen(startingPoint)
End Sub

3.

Agregue la instruccin finishSoundPlayer.Play(); al controlador de eventos MouseEnter de la

etiqueta Meta. Recuerde actualizar el comentario, porque va a cambiar el cdigo, como
sigue.
C#
VB
Copiar

Private Sub finishLabel_MouseEnter() Handles finishLabel.MouseEnter

' Play a sound, show a congratulatory MessageBox, then close the
form.
finishSoundPlayer.Play()
MessageBox.Show("Congratulations!")
Close()
End Sub

Paso 8: Ejecutar el programa y probar otras

caractersticas
Visual Studio 2010
El programa est finalizado y listo para ejecutarse. Lo puede ejecutar y probar. Para aprender ms,
intente cambiar los colores y sonidos.

Para ejecutar el programa

1.
2.
3.
4.

Guarde el programa y, a continuacin, incielo.

Asegrese de que el puntero del mouse est situado al principio del laberinto.
Mueva el puntero del mouse por todo el laberinto. Toque un muro y asegrese de que
suena un sonido y el puntero se enva de regreso a la salida.
Saque el puntero del mouse del laberinto. A continuacin, vuelva a colocarlo en el panel y
compruebe que el programa lo enva de nuevo a la salida.

Nota
Al realizar las pruebas, hay que asegurarse de que todos los elementos del programa funcionan. Es
preciso estar seguro de que el controlador de eventos MouseEnter de la etiqueta Meta reproduce el
sonido Tada, abre un cuadro de mensaje de felicitacin y cierra el juego. Para no tener que recorrer
todo el laberinto, puede desactivar temporalmente el controlador de eventos MouseEnter del panel.
De ese modo, podr sacar el puntero del mouse del laberinto y colocarlo en la etiqueta Meta sin que
el programa devuelva el cursor a la salida.

5.
6.

7.

Seleccione el panel y, a continuacin, vaya a la tabla de eventos de la ventana Propiedades.

Desplcese hacia abajo hasta el evento MouseEnter y seleccione su nombre.
Presione SUPR para eliminar el nombre de controlador de eventos y, a continuacin,
presione ENTRAR. El IDE desconecta automticamente el controlador de eventos del panel.
Los muros siguen estando conectados, pero ahora puede sacar el mouse del laberinto para
llegar a la etiqueta Meta situada en la parte inferior.
Guarde y ejecute el programa, y asegrese de que la etiqueta Meta reproduce el sonido,
muestra el cuadro de mensaje y cierra el juego. Cuando est seguro de que todo funciona,
habilite el controlador de eventos MouseEnter del panel; para ello, seleccinelo, vaya a la
tabla de eventos de la ventana Propiedades, desplcese hacia abajo hasta la lnea
MouseEnter y seleccione wall_MouseEnter en la lista desplegable.

Para probar otras caractersticas

Reemplace los sonidos del juego por sonidos que le gusten ms.
Configrelo de modo que el juego reproduzca un sonido nicamente cuando el puntero del
mouse toque un muro, pero no cuando se inicie el programa.
En lugar de cerrar el programa cuando el jugador gane, haga que el puntero regrese a la
salida.
Cambie algunos de los colores de los muros y haga que el juego reproduzca sonidos distintos
segn el color de los muros.

Tutorial 3: Crear una prueba matemtica

Visual Studio 2010
En este tutorial, se compila un juego de prueba matemtica en que el jugador debe responder a
cuatro problemas aritmticos aleatorios en un tiempo especificado. Aprender a:

Generar nmeros aleatorios mediante la clase Random.

Desencadenar eventos mediante un control Timer.
Controlar el flujo del programa mediante instrucciones if else.
Realizar operaciones aritmticas bsicas.

Cuando termine, el programa se parecer al de la ilustracin siguiente.

Juego 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 y agregar

Comience por crear el proyecto, cambiar las propiedades y

etiquetas al formulario

agregar controles Label.

Paso 2: Crear un problema de suma

Cree un problema de suma que genera nmeros aleatorios

aleatoria

mediante la clase Random.

Paso 3: Agregar un temporizador de

Agregue un temporizador de cuenta atrs para poder limitar

cuenta atrs

el tiempo de la prueba.

Paso 4: Agregar el mtodo

Agregue un mtodo para comprobar si las respuestas son

CheckTheAnswer()

correctas.

Paso 5: Agregar controladores de eventos Agregue controladores de eventos para facilitar el uso del
Enter para los controles
programa.
NumericUpDown
Paso 6: Agregar un problema de resta

Agregue un problema de resta que genere nmeros

aleatorios. Compruebe que las respuestas son correctas y
utilice el temporizador.

Paso 7: Agregar problemas de

Agregue problemas de multiplicacin y divisin que generan

multiplicacin y divisin

nmeros aleatorios. Compruebe que las respuestas son

correctas y utilice el temporizador.

Paso 8: Probar otras caractersticas

Pruebe con otras caractersticas, como cambiar colores y

agregar sugerencias.

Paso 1: Crear un proyecto y agregar etiquetas al

formulario
Visual Studio 2010
El primer paso para crear una prueba matemtica es crear el proyecto y agregar etiquetas al
formulario.

Para crear un proyecto y agregar etiquetas al formulario

1.
2.
3.
4.

5.

En el men Archivo, haga clic en Nuevo proyecto.

Si no usa Visual Studio Express, primero debe seleccionar un lenguaje. En la lista Plantillas
instaladas, seleccione C# o Visual Basic.
Haga clic en el icono Aplicacin de Windows Forms y, a continuacin, escriba el nombre
Prueba matemtica.
Establezca las propiedades del formulario.
a. Cambie la propiedad Text del formulario a Prueba matemtica.
b. Cambie el tamao a 500 pxeles de ancho por 400 pxeles de alto mediante la
propiedad Size o arrastre el mouse hasta que vea el tamao correcto en la esquina
inferior izquierda del entorno de desarrollo integrado (IDE).
c. Para evitar que los usuarios cambien el tamao del formulario, cambie la propiedad
FormBorderStyle a Fixed3D y establezca la propiedad MaximizeBox en False.
Arrastre un control Label desde el cuadro de herramientas y, a continuacin, establezca sus
propiedades:

a.

b.
c.
d.
e.
f.
g.

Cambie la propiedad (Name) propiedad a timeLabel. Esta etiqueta aparece como

un cuadro en la esquina superior derecha del formulario, que muestra la cuenta
atrs en segundos de la prueba.
Cambie la propiedad AutoSize a False para poder modificar personalmente las
dimensiones del cuadro.
Cambie la propiedad BorderStyle a FixedSingle para dibujar una lnea alrededor
del cuadro.
Establezca la propiedad Size en 200, 30.
Arrastre la etiqueta hacia la esquina superior derecha del formulario hasta que
aparezcan las lneas azules de separacin.
Borre la propiedad Text haciendo clic en Text en la ventana Propiedades y
presionando la tecla RETROCESO.
Cambie el tamao de fuente a 15,75. Haga clic en el signo ms que aparece junto a
la propiedad Font en la ventana Propiedades, que muestra varias propiedades,
incluida la propiedad Size, como se muestra en la siguiente imagen.
Ventana Propiedades con el tamao de fuente

6.

7.

8.

A continuacin, arrastre otro control Label desde el Cuadro de herramientas y establezca sus
propiedades:
a. Cambie el tamao de fuente a 15,75.
b. Establezca la propiedad Text en Tiempo restante.
c. Arrstrelo para alinearlo a la izquierda de la etiqueta timeLabel.
Ahora, agregue los controles para el problema de suma. Arrastre un control Label desde el
cuadro de herramientas y, a continuacin, establezca sus propiedades:
a. Establezca la propiedad Text en ? (signo de interrogacin).
b. Establezca la propiedad AutoSize en False.
c. Establezca la propiedad Size en 60, 50.
d. Cambie el tamao de fuente a 18.
e. Cambie la propiedad TextAlign a MiddleCenter.
f. Cambie la propiedad Location a 75, 75 para colocarlo en el formulario.
g. Cambie la propiedad (Name) propiedad a plusLeftLabel.
Seleccione la etiqueta plusLeftLabel y cpiela. (Presione Ctrl+C o bien seleccione Copiar en
el men Edicin.) A continuacin, realice las acciones siguientes:
a. Pguelo tres veces. (Presione Ctrl+V, o bien seleccione Pegar en el men Edicin.)

b.

9.

Organice las tres nuevas etiquetas para que los cuadros estn en fila a la derecha de
la etiqueta plusLeftLabel, utilizando las lneas de separacin para separarlas y
alinearlas.
c. Cambie la propiedad Text de la segunda etiqueta a + (signo ms).
d. Cambie la propiedad (Name) de la tercera etiqueta a plusRightLabel.
e. Cambie la propiedad Text de la cuarta etiqueta a = (signo igual).
Arrastre un control NumericUpDown desde el Cuadro de herramientas y, a continuacin,
haga lo siguiente:
a. Cambie el tamao de fuente a 18 y, a continuacin, estrchelo para que el ancho
sea 100.
b. Arrstrelo hasta que se alinee con los controles Label del problema de suma.
c. Cambie la propiedad (Name) a suma. (Aprenderemos ms cosas acerca del control
NumericUpDown ms adelante.) Ahora, la prueba tiene una primera fila, como se
muestra en la siguiente imagen.
Primera fila de la prueba matemtica

10. Seleccione los cinco controles del problema de suma (los cuatro controles Label y el control
NumericUpDown) y cpielos. A continuacin, realice las acciones siguientes:
a. Pegue los controles, con lo que se deberan agregar cinco nuevos controles al
formulario.
b. Los controles deberan seguir estando seleccionados, de modo que pueda hacer clic
en uno de ellos y arrastrarlos a su lugar para que queden alineados debajo de los
controles de suma. Utilice las lneas de separacin para proporcionar una distancia
suficiente entre las dos filas.
c. Cambie la propiedad Text de la segunda etiqueta a - (signo menos).
d. Cambie el nombre de la primera etiqueta del signo de interrogacin a
minusLeftLabel.
e. Cambie el nombre de la segunda etiqueta de signo de interrogacin a
minusRightLabel.
f. Cambie el nombre del control NumericUpDown a diferencia.
11. Pegue los cinco controlan dos veces ms y, a continuacin, haga lo siguiente:
a. Para la tercera fila, cambie el nombre de la primera etiqueta a timesLeftLabel,
cambie la propiedad Text de la segunda etiqueta a (signo de multiplicacin),
cambie el nombre de la tercera etiqueta a timesRightLabel y cambie el nombre del
control NumericUpDown a producto.
b. Para la cuarta fila, cambie el nombre de la primera etiqueta a dividedLeftLabel,
cambie la propiedad Text de la segunda etiqueta a (signo de divisin), cambie el
nombre de la tercera etiqueta a dividedRightLabel y cambie el nombre del control
NumericUpDown a cociente.

Nota
Puede copiar el signo de multiplicacin y el signo de divisin de este tutorial y pegarlos en el
IDE.

12. Se necesita un control ms en el formulario: un botn para iniciar la prueba. Arrastre un

control Button desde el Cuadro de herramientas y, a continuacin, establezca sus
propiedades:
a. Establezca la propiedad (Name) en startButton.
b. Establezca la propiedad Text en Iniciar la prueba.
c. Establezca el tamao de fuente en 14.
d. Establezca la propiedad AutoSize en True, para que el tamao del botn se ajuste
automticamente al texto.
e. Arrastre el botn hasta la parte inferior del formulario y muvalo para que quede
centrado.
13. Por ltimo, haga clic en el control startButton y, a continuacin, haga lo siguiente:
a. Establezca la propiedad TabIndex en 1.
b. Haga clic en el control NumericUpDown de suma.
c. Establezca la propiedad TabIndex en 2.
d. Establezca los dems controles NumericUpDown: establezca la propiedad TabIndex
del control de diferencia en 3, la propiedad TabIndex del control de producto en 4,
y la propiedad TabIndex del control de cociente en 5. Ahora, el formulario debera
tener un aspecto similar a la siguiente imagen.
Formulario de prueba matemtica inicial

Nota
La finalidad de la propiedad TabIndex es establecer el orden de los controles cuando el usuario
presiona la tecla TAB. Abra cualquier cuadro de dilogo (por ejemplo, en el men Archivo,
seleccione Abrir) y presione la tecla TAB varias veces. Observe cmo se mueve el cursor de un

control a otro cada vez que se presiona la tecla TAB. Al disear este formulario originalmente, un
programador decidi el orden.

14. Para ver cmo funciona la propiedad TabIndex, guarde el programa, ejectelo y, a
continuacin, presione la tecla TAB varias veces.

Paso 2: Crear un problema de suma aleatoria

Visual Studio 2010
La prueba necesita problemas de matemticas. Si la prueba repite los mismos problemas, no supone
ningn reto. Por ello, es interesante incluir nmeros aleatorios. Agregue un mtodo denominado
StartTheQuiz() que rellena los problemas e inicia el temporizador de cuenta atrs. Para este paso,
agregaremos un problema de suma aleatoria. Los dems problemas de matemticas y el
temporizador de cuenta atrs se agregan en pasos posteriores de este tutorial.
En el tutorial 2, hemos creado varios elementos SoundPlayer para un juego de laberinto. Para la
prueba matemtica hacemos lo mismo, salvo que en lugar de la clase SoundPlayer, utilizaremos la
clase Random.

Para crear un problema de suma aleatoria

1.

Cree un objeto Random utilizando una instruccin new como la siguiente.

C#
VB
Copiar

Public Class Form1

' Create a Random object to generate random numbers.

Dim randomizer As New Random

Ahora, hemos agregado un objeto Random al formulario y lo hemos denominado

randomizer.

Nota

En el tutorial del laberinto, creamos dos componentes SoundPlayer mediante la instruccin new. Esto
hace algo similar. La nica diferencia es que, al contrario que SoundPlayer, Random no es un
componente ni un control, de modo que no podemos llamarlo as. Se denomina objeto.
Probablemente habr odo la palabra objeto antes. Obtendr ms informacin sobre lo que significa
en los prximos tutoriales. De momento, todo lo que necesita saber es que cuando el programa
utiliza una instruccin new para crear botones, etiquetas, paneles, elementos OpenFileDialog,
ColorDialog, SoundPlayer o Random, e incluso formularios, el elemento que se crea se denomina
objeto. Los tutoriales posteriores muestran mucha ms informacin sobre cmo funcionan estos
objetos.

2.

Ahora, al iniciar el formulario, crea un nuevo objeto Random y le da el nombre randomizer.

Como con los elementos SoundPlayer, si entramos en un mtodo y comenzamos a escribir
randomizer con un punto (.) a continuacin, se abre una ventana IntelliSense que muestra
todos los mtodos del objeto Random a los que se puede llamar. El mtodo Next() se
utiliza como se indica a continuacin.
Mtodo Next

Cuando se llama a random.Next(50), se obtiene un nmero aleatorio que es menor que 50

(del 0 al 49).
3.

Pronto compilaremos un mtodo para comprobar las respuestas, de modo que el programa
tiene que recordar qu nmeros ha elegido para los problemas. Agregue un valor de tipo
integer (denominado valor de tipo int en C# o Integer en Visual Basic) denominado
addend1 y otro denominado addend2 al formulario (igual que agreg el objeto Random
denominado randomizer), como sigue.
C#
VB
Copiar

' Create a Random object to generate random numbers.

Dim randomizer As New Random

' These Integers will store the numbers

' for the addition problem.
Dim addend1 As Integer
Dim addend2 As Integer

Nota
Un valor de tipo int (Integer) se utiliza para almacenar un valor numrico positivo o negativo. Puede
contener cualquier nmero comprendido entre el -2147483648 y el 2147483647. Slo puede
almacenar los nmeros enteros y no los decimales.

4.

Luego, agregue un mtodo denominado StartTheQuiz() que utiliza el mtodo Next() del
objeto Random para elegir dos nmeros y colocarlos en las etiquetas. Gradualmente ir
rellenando todos los problemas e iniciar el temporizador, as que debe agregar un
comentario. Debe tener este aspecto:
C#
VB
Copiar

''' <summary>
''' Start the quiz by filling in all of the problems
''' and starting the timer.
''' </summary>
''' <remarks></remarks>
Public Sub StartTheQuiz()
' Fill in the addition problem.

addend1 = randomizer.Next(51)
addend2 = randomizer.Next(51)

plusLeftLabel.Text = addend1.ToString
plusRightLabel.Text = addend2.ToString

sum.Value = 0
End Sub

Nota
Recuerde que ha llamado a randomizer.Next(51). El motivo de utilizar 51 y no 50 es que los dos
nmeros sumen una respuesta que est comprendida entre el 0 y el 100. Si pasa 50 al mtodo
Next(), elegir un nmero del 0 al 49, de modo que mayor respuesta posible sera 98, y no 100.
Despus de ejecutarse las dos primeras instrucciones del mtodo, cada uno de los dos valores de
tipo int (Integer), addend1 y addend2, contiene un nmero aleatorio del 0 al 50.

Fijmonos con ms atencin en estas instrucciones.

C#
VB
Copiar

plusLeftLabel.Text = addend1.ToString
plusRightLabel.Text = addend2.ToString

Las instrucciones establecen las propiedades Text de las dos etiquetas plus, plusLeftLabel y
plusRightLabel, para que muestren los dos nmeros aleatorios. Hay que utilizar el mtodo
ToString() del valor int (Integer) para convertirlo en texto (en programacin, string, o
cadena, significa texto), porque los controles Label nicamente muestran texto, y no
nmeros.

5.

El botn de inicio debe iniciar la prueba. Para ello, vaya al Diseador de Windows Forms y
haga doble clic en el botn, a fin de agregar un controlador de eventos Click. A
continuacin, agregue las dos instrucciones siguientes.
C#
VB
Copiar

Private Sub startButton_Click() Handles startButton.Click

startButton.Enabled = False
StartTheQuiz()
End Sub

Ya sabe lo que hace la segunda instruccin: llama al nuevo mtodo StartTheQuiz(). La

primera instruccin establece la propiedad Enabled del control startButton en False. Con
ello se deshabilita el botn, de modo que el usuario no pueda hacer clic en l. De esta
forma, el usuario puede hacer clic en el botn de inicio una sola vez. A continuacin, el
botn aparece atenuado y no est disponible, y el usuario debe finalizar la prueba antes de
que se agote el tiempo (o cerrar el programa).
6.

Ahora, guarde y ejecute el programa. Haga clic en el botn de inicio. Debe aparecer un
problema de suma aleatoria, como se muestra en la siguiente imagen.
Problema de suma aleatoria

Paso 3: Agregar un temporizador de cuenta atrs

Visual Studio 2010
Como esta prueba tiene lmite de tiempo, vamos a agregar un temporizador de la cuenta atrs. Es
preciso que el programa realice el seguimiento del nmero de segundos que quedan a medida que
el juego progresa.

Para agregar un temporizador de cuenta atrs

1.

Agregue un valor de tipo int (Integer) denominado timeLeft, como hemos hecho
previamente. El cdigo debe tener un aspecto parecido al siguiente.
C#
VB
Copiar

Public Class Form1

' Create a Random object to generate random numbers.

Dim randomizer As New Random

' These Integers will store the numbers

' for the addition problem.
Dim addend1 As Integer
Dim addend2 As Integer

' This Integer will keep track of the time left.

Dim timeLeft As Integer

2.

3.

Ahora, hay que agregar algo que cuente el tiempo de verdad, como un temporizador. Vaya
al Diseador de Windows Forms y arrastre un control Timer del Cuadro de herramientas (en
la categora Componentes) hasta el formulario. Aparecer en el rea gris de la parte inferior
del Diseador de Windows Forms.
Haga clic en el icono timer1 que acaba de agregar y establezca la propiedad Interval en
1000. Esto hace que el evento Tick se desencadene cada segundo. A continuacin, haga

doble clic en el icono para agregar el controlador de eventos Tick. El IDE cambiar al editor
de cdigo y saltar al nuevo mtodo de control de eventos. Agregue las instrucciones
siguientes.
C#
VB
Copiar

Private Sub Timer1_Tick() Handles Timer1.Tick

If (timeLeft > 0) Then

' Display the new time left
' by updating the Time Left label.
timeLeft = timeLeft - 1
timeLabel.Text = timeLeft & " seconds"
Else
' If the user ran out of time, stop the timer, show
' a MessageBox, and fill in the answers.
Timer1.Stop()
timeLabel.Text = "Time's up!"
MessageBox.Show("You didn't finish in time.", "Sorry")
sum.Value = addend1 + addend2
startButton.Enabled = True
End If

End Sub

Segn lo que hemos agregado, cada segundo el temporizador comprobar si se ha agotado

el tiempo. Para ello, comprueba si el valor de tipo int (Integer) de timeLeft es mayor que 0.
Si lo es, queda tiempo. En primer lugar, el temporizador resta 1 a timeLeft y, a continuacin,
actualiza la propiedad Text del control timeLabel para mostrar al usuario cuntos segundos
quedan.

Si no queda tiempo, el temporizador se detiene y cambia el texto del control timeLabel de

modo que muestre que se agot el tiempo. Aparecer un cuadro de mensaje que indicar al
usuario que la prueba ha finalizado. Se revela la respuesta. En este caso, se suman addend1 y
addend2. La propiedad Enabled del control startButton se establece en true, para que botn
vuelva a estar disponible. De ese modo, el usuario puede volver a empezar la prueba.
Hemos agregado una instruccin if else, que es la manera de indicar a los programas que
tomen decisiones. Una instruccin if else tiene el siguiente aspecto.
VB
Copiar

If (something your program will check) Then

' statements that will get executed
' if the thing that the program checked is true
Else
' statements that will get executed
' if the thing that the program checked is NOT true
End If
C#
Copiar

if (something your program will check)

{
// statements that will get executed
// if the thing that the program checked is true
}
else
{
// statements that will get executed
// if the thing that the program checked is NOT true
}
Vamos a fijarnos con ms atencin en la instruccin que hemos agregado en el bloque else,
para mostrar la respuesta al problema de suma.
C#

VB
Copiar

sum.Value = addend1 + addend2

Como probablemente sabr, addend1 + addend2 suma los dos valores.La primera parte
(sum.Value) utiliza la propiedad Value del control NumericUpDown para mostrar la
respuesta correcta.La propiedad Value se utiliza de nuevo ms tarde, para comprobar las
respuestas de la prueba.
Un control NumericUpDown facilita al usuario la escritura de nmeros. Este es el motivo por
el que se utiliza este control para las respuestas a los problemas de matemticas.Dado que
todas las respuestas son nmeros del 0 al 100, se dejan las propiedades predeterminadas
Minimum y Maximum establecidas en 0 y 100.Esto hace que el control nicamente permita
al usuario escribir un nmero del 0 al 100.Como las respuestas solo pueden ser nmeros
enteros, la propiedad DecimalPlaces se deja establecida en 0, lo que significa que el usuario
no puede escribir decimales.(Si desea permitir que el usuario escriba 3,141 pero no 3,1415,
podra establecer la propiedad DecimalPlaces en 3.)
4.

Agregue tres lneas al final de mtodo StartTheQuiz(), de modo que el cdigo tenga este
aspecto.
C#
VB
Copiar

''' <summary>
''' Start the quiz by filling in all of the problems
''' and starting the timer.
''' </summary>
''' <remarks></remarks>
Public Sub StartTheQuiz()

' Fill in the addition problem.

addend1 = randomizer.Next(51)

addend2 = randomizer.Next(51)
plusLeftLabel.Text = addend1.ToString
plusRightLabel.Text = addend2.ToString
sum.Value = 0

' Start the timer.

timeLeft = 30
timeLabel.Text = "30 seconds"
Timer1.Start()

End Sub

Ahora, al empezar la prueba, establece el valor de tipo int (Integer) de timeLeft en 30 y

cambia la propiedad Text del control timeLabel a 30 segundos. A continuacin, llama al
mtodo Start() del control Timer para iniciar la cuenta atrs. (Todava no comprueba la
respuesta, esto viene despus.)
5.

Guarde y ejecute el programa. Al hacer clic en el botn de inicio, el temporizador debera

iniciar la cuenta atrs. Cuando se agota el tiempo, la prueba finaliza y se muestra la
respuesta. En la siguiente imagen se muestra la prueba en marcha.
Prueba matemtica en marcha

Paso 4: Agregar el mtodo CheckTheAnswer()

Visual Studio 2010
Es preciso que la prueba compruebe si el usuario responde correctamente. Afortunadamente, escribir
mtodos que realizan un clculo simple, como el mtodo CheckTheAnswer(), no es difcil.

Nota
Para quienes estn realizando este tutorial en Visual Basic, cabe destacar que, como este mtodo
devuelve un valor, en lugar de la palabra clave Sub usual debern utilizar la palabra clave Function.
Realmente es as de sencillo: las subrutinas no devuelven valores, las funciones, s.

Para agregar el mtodo CheckTheAnswer()

1.

Agregue el mtodo CheckTheAnswer(), que suma addend1 y addend2, y comprueba si la

adicin es igual al valor del control NumericUpDown de suma. Si la suma es igual, el mtodo
devuelve true; si no, devuelve false. El cdigo debe tener un aspecto parecido al siguiente.
C#
VB
Copiar

''' <summary>
''' Check the answer to see if the user got everything right.
''' </summary>
''' <returns>True if the answer's correct, false otherwise.</returns>
''' <remarks></remarks>
Public Function CheckTheAnswer() As Boolean

If addend1 + addend2 = sum.Value Then

Return True
Else
Return False
End If

End Function

El programa debe llamar a este mtodo para comprobar si el usuario respondi

correctamente. Para ello, se agrega if else a la instruccin. La instruccin tiene un aspecto
parecido al siguiente.
C#
VB
Copiar

If CheckTheAnswer() Then
' statements that will get executed
' if the answer is correct
ElseIf timeLeft > 0 Then
' statements that will get executed
' if there's still time left on the timer
Else
' statements that will get executed if the timer ran out
End If

2.

Luego, se modifica el controlador de eventos Tick del temporizador para comprobar la

respuesta. El nuevo controlador de eventos con comprobacin de respuesta debera incluir
lo siguiente.
C#
VB
Copiar

Private Sub Timer1_Tick() Handles Timer1.Tick

If CheckTheAnswer() Then
' If the user got the answer right, stop the timer
' and show a MessageBox.
Timer1.Stop()
MessageBox.Show("You got all of the answers right!",
"Congratulations!")
startButton.Enabled = True
ElseIf timeLeft > 0 Then
' Decrease the time left by one second and display
' the new time left by updating the Time Left label.
timeLeft = timeLeft - 1
timeLabel.Text = timeLeft & " seconds"
Else
' If the user ran out of time, stop the timer, show
' a MessageBox, and fill in the answers.
Timer1.Stop()
timeLabel.Text = "Time's up!"
MessageBox.Show("You didn't finish in time.", "Sorry")
sum.Value = addend1 + addend2
startButton.Enabled = True
End If

End Sub

Ahora, si el controlador de eventos del temporizador detecta que el usuario respondi

correctamente, detiene el temporizador, muestra un mensaje de felicitacin y hace que el
botn de inicio vuelva a estar disponible.
3.

Guarde y ejecute el programa. Inicie el juego y escriba la respuesta correcta al problema de

suma.

Nota
Al escribir la respuesta, puede que observe algo extrao en el control NumericUpDown. Si empieza a
escribir sin seleccionar toda la respuesta, el cero no desaparece y hay que eliminarlo manualmente.
Corregiremos esto ms adelante en este tutorial.

4.

Al escribir la respuesta correcta, debe abrirse el cuadro de mensaje, detenerse el

temporizador y volver a estar disponible el botn de inicio. Haga clic de nuevo en el botn
de inicio para asegurarse de que suceda as.

Paso 5: Agregar controladores de eventos Enter para

los controles NumericUpDown
Visual Studio 2010
Posiblemente se habr fijado en que al escribir nmeros en el control NumericUpDown sucede algo
extrao. Para corregirlo, se agrega un controlador de eventos Enter.

Para ver el comportamiento del control NumericUpDown

1.
2.

Ejecute el programa e inicie el juego. El control NumericUpDown de la suma debera tener

un cursor parpadeante en su interior junto al nmero 0 (cero).
Escriba 3: aparecer 30. Escriba 5: aparecer 350. Sin embargo, despus de un segundo
cambiar a 100.
Antes de corregir este problema, piense en lo que est sucediendo. Piense por qu el 0 no
desapareci cuando escribi 3. Piense por qu 350 se ha cambiado por 100, y por qu se ha
producido un retraso antes del cambio.

Nota
Aunque puede parecer un comportamiento extrao, hay una explicacin. Al hacer clic en el botn de
inicio, la propiedad Enabled del botn est establecida en False; el botn aparece atenuado y no
est disponible. El programa busca el control con el siguiente valor de TabIndex ms bajo, el control
NumericUpDown de la suma, y cambia el foco a ese control. Cuando se presiona la tecla TAB para ir
a un control NumericUpDown, el cursor se sita automticamente al principio del control; este es el
motivo por el cual los nmeros que se escriben aparecen a la izquierda y no a la derecha. Cuando se
escribe un nmero encima de la propiedad MaximumValue, que est establecida en 100, reemplaza
el nmero escrito con el valor mximo.

Para agregar un controlador de eventos Enter para el control NumericUpDown

1.

A fin de evitar este comportamiento extrao y facilitar el uso del programa, agregue un
controlador para cada evento Enter de cada control NumericUpDown. Utilice la pgina
Eventos del el cuadro de dilogo Propiedades para agregar un controlador de eventos
Enter denominado answer_Enter para el control NumericUpDown de suma.
Cuadro de dilogo Propiedades

El cdigo debe tener este aspecto.

C#
VB
Copiar

Private Sub answer_Enter(ByVal sender As System.Object, ByVal e As

System.EventArgs) Handles sum.Enter

' Select the whole answer in the NumericUpDown control.

Dim answerBox As NumericUpDown = TryCast(sender, NumericUpDown)

If answerBox IsNot Nothing Then

Dim lengthOfAnswer As Integer =
answerBox.Value.ToString().Length

answerBox.Select(0, lengthOfAnswer)
End If

End Sub

Aunque inicialmente parezca complejo, resulta ms fcil de entender si se examina paso a

paso. En primer lugar, fjese en la parte superior del mtodo: object sender en C# o sender
As System.Object en Visual Basic. Esto significa que dentro del mtodo, cada vez que se
utiliza sender, hace referencia al control NumericUpDown cuyo evento Enter se
desencadena. As que, en la primera lnea del mtodo, se especifica que no se trata de un
simple objeto, sino que es concretamente un control NumericUpDown. (Cada control
NumericUpDown es un objeto, pero no todos los objetos son un control NumericUpDown.)
En la lnea siguiente se comprueba si se ha llevado a cabo correctamente la conversin (de
tipos) de answerBox: de un objeto a un control NumericUpDown. Si la conversin de tipos
no ha sido correcta, su valor sera null (C#) o Nothing (Visual Basic). En la tercer lnea se
busca la longitud de la respuesta que se muestra actualmente en el control
NumericUpDown. En la cuarta lnea se ordena al control NumericUpDown que seleccione la
respuesta. Ahora, cuando el usuario navega al control, desencadena este evento, lo que
provoca que se seleccione la respuesta. En cuanto el usuario empieza a escribir, se borra la
respuesta anterior y se reemplaza con la nueva.
2.

3.
4.

Una vez que se haya implementado este controlador de eventos, vaya al Diseador de
Windows Forms y seleccione el control NumericUpDown de diferencia. Vaya a la pgina
Eventos del cuadro de dilogo Propiedades, desplcese hacia abajo hasta el evento Enter y
seleccione el controlador de eventos que acaba de agregar.
A continuacin, haga lo mismo para los controles NumericUpDown del producto y del
cociente.
Guarde y ejecute el programa. El comportamiento extrao ya no se debera producir.

Paso 6: Agregar un problema de resta

Visual Studio 2010
Para agregar un problema de resta, necesita:

Almacenar los valores de resta.

Generar nmeros aleatorios para el problema (y asegurarse de que la respuesta est
comprendida entre 0 y 100).
Actualizar el mtodo que comprueba las respuestas para que compruebe tambin el nuevo
problema de resta.
Actualizar el controlador eventos Tick del temporizador para que rellene la respuesta correcta
cuando se agote el tiempo.

Para agregar un problema de resta

1.

En primer lugar, se necesita un lugar donde almacenar los valores, as que agregue dos
valores de tipo int (Enteros) para el problema de resta al formulario. El nuevo cdigo aparece
entre los enteros de suma y el entero del temporizador. El cdigo debe tener este aspecto.
C#
VB
Copiar

Public Class Form1

' Create a Random object to generate random numbers.

Dim randomizer As New Random

' These Integers will store the numbers

' for the addition problem.
Dim addend1 As Integer
Dim addend2 As Integer

' These Integers will store the numbers

' for the subtraction problem.
Dim minuend As Integer
Dim subtrahend As Integer

' This Integer will keep track of the time left.

Dim timeLeft As Integer

Nota
Los nombres de los nuevos valores int (minuend y subtrahend, minuendo y sustraendo) no son

trminos de Visual C#, ni siquiera trminos de programacin. Se trata de los nombres utilizados
tradicionalmente en aritmtica para el nmero que se resta (el substraendo) y el nmero del que se
resta (el minuendo). La diferencia es el minuendo menos el sustraendo. Puede utilizar otros nombres,
porque el programa no requiere nombres especficos para los valores de tipo int, los controles, los
componentes o los mtodos. Hay algunas reglas (por ejemplo, los nombres no pueden comenzar
con dgitos), pero en general, podra utilizar nombres como x1, x2, x3, x4, etc. Sin embargo, sera
difcil leer el cdigo y casi imposible realizar el seguimiento de los problemas. Ms adelante en este
tutorial utilizaremos los trminos tradicionales para la multiplicacin (multiplicand multiplier =
product, multiplicando multiplicador = producto) y la divisin (dividend divisor = quotient,
dividendo divisor = cociente).

2.

A continuacin, modifique el mtodo StartTheQuiz() para rellenar un problema de resta

aleatorio. El nuevo cdigo aparece tras el comentario "Fill in the subtraction problem". El
cdigo debe tener este aspecto.
C#
VB
Copiar

''' <summary>
''' Start the quiz by filling in all of the problems
''' and starting the timer.
''' </summary>
''' <remarks></remarks>
Public Sub StartTheQuiz()

' Fill in the addition problem.

addend1 = randomizer.Next(51)
addend2 = randomizer.Next(51)
plusLeftLabel.Text = addend1.ToString
plusRightLabel.Text = addend2.ToString
sum.Value = 0

' Fill in the subtraction problem.

minuend = randomizer.Next(1, 101)
subtrahend = randomizer.Next(1, minuend)
minusLeftLabel.Text = minuend.ToString
minusRightLabel.Text = subtrahend.ToString
difference.Value = 0

' Start the timer.

timeLeft = 30
timeLabel.Text = "30 seconds"
Timer1.Start()

End Sub

Este cdigo utiliza el mtodo Next() de la clase Random de una forma algo distinta. Al darle
dos valores, elige al azar uno que sea mayor o igual que el primero y menor que el segundo.
La siguiente lnea elige un nmero aleatorio del 1 al 100 y lo almacena en el minuendo.
C#
VB
Copiar

minuend = randomizer.Next(1, 101)

Se puede llamar al mtodo Next() de la clase Random de varias formas. Cuando se puede
llamar a un mtodo de ms de una manera, se denomina mtodo sobrecargado. Puede
utilizar IntelliSense para explorar esta posibilidad. Fijmonos de nuevo en la informacin
sobre herramientas de la ventana IntelliSense del mtodo Next().
Informacin sobre herramientas de la ventana IntelliSense

Observe que la informacin sobre herramientas muestra (+ 2 sobrecargas). Esto significa

que hay dos formas ms de llamar al mtodo Next(). Al escribir el nuevo cdigo para el
mtodo StartTheQuiz(), puede ver ms informacin. En cuanto escriba randomizer.Next(,
aparecer la ventana IntelliSense. Presione las teclas de direccin ARRIBA y ABAJO para
recorrer cclicamente las sobrecargas, como se muestra en la siguiente imagen.
Sobrecargas en la ventana IntelliSense

La de la imagen anterior es la que deseamos utilizar, porque permite especificar un valor

mnimo y mximo.
3.

Modifique el mtodo CheckTheAnswer() para que compruebe si la respuesta de la resta es

correcta. El cdigo debe tener este aspecto.
C#
VB
Copiar

''' <summary>
''' Check the answer to see if the user got everything right.
''' </summary>
''' <returns>True if the answer's correct, false otherwise.</returns>

''' <remarks></remarks>
Public Function CheckTheAnswer() As Boolean

If ((addend1 + addend2 = sum.Value) AndAlso (minuend - subtrahend

= difference.Value)) Then
Return True
Else
Return False
End If

End Function

&& es el operador logical and de Visual C#. En Visual Basic, el operador equivalente es
AndAlso. Equivale a decir, "Si addend1 ms addend2 es igual al valor de la suma
NumericUpDown, y si el minuendo menos el sustraendo es igual al valor de la diferencia
NumericUpDown". El mtodo CheckTheAnswer() devuelve true nicamente si el problema
de suma es correcto y el problema de resta es correcto.
4.

Cambie la ltima parte del controlador de evento Tick del temporizador de modo que
rellene la respuesta correcta cuando se agote el tiempo. El cdigo debe tener este aspecto.
C#
VB
Copiar

Else
' If the user ran out of time, stop the timer, show
' a MessageBox, and fill in the answers.
Timer1.Stop()
timeLabel.Text = "Time's up!"
MessageBox.Show("You didn't finish in time.", "Sorry")
sum.Value = addend1 + addend2
difference.Value = minuend - subtrahend

startButton.Enabled = True
End If

5.

Guarde y ejecute el cdigo. Ahora, el programa deber incluir un problema de resta, como
se muestra en la siguiente imagen.
Cuestionario de matemticas con un problema de resta

Paso 7: Agregar problemas de multiplicacin y

divisin
Visual Studio 2010
Antes de comenzar este procedimiento, piense en cmo agregar los problemas de multiplicacin y
divisin. Piense en el paso inicial, que requiere almacenar valores.

Para agregar problemas de multiplicacin y divisin

1.

Agregue cuatro valores de tipo int (Integer) al formulario. El cdigo debe tener este aspecto.
C#
VB
Copiar

Public Class Form1

' Create a Random object to generate random numbers.

Dim randomizer As New Random

' These Integers will store the numbers in the addition problem.
Dim addend1 As Integer
Dim addend2 As Integer

' These Integers will store the numbers for the subtraction
problem.
Dim minuend As Integer
Dim subtrahend As Integer

' These Integers will store the numbers for the multiplication
problem.
Dim multiplicand As Integer
Dim multiplier As Integer

' These Integers will store the numbers for the division problem.
Dim dividend As Integer
Dim divisor As Integer

' This Integer will keep track of the time left.

Dim timeLeft As Integer

2.

Al igual que antes, modifique el mtodo StartTheQuiz() para rellenar problemas de

multiplicaciones y divisiones aleatorias. El cdigo debe tener este aspecto.
C#
VB

Copiar

''' <summary>
''' Start the quiz by filling in all of the problems
''' and starting the timer.
''' </summary>
''' <remarks></remarks>
Public Sub StartTheQuiz()

' Fill in the addition problem.

addend1 = randomizer.Next(51)
addend2 = randomizer.Next(51)
plusLeftLabel.Text = addend1.ToString
plusRightLabel.Text = addend2.ToString
sum.Value = 0

' Fill in the subtraction problem.

minuend = randomizer.Next(1, 101)
subtrahend = randomizer.Next(1, minuend)
minusLeftLabel.Text = minuend.ToString
minusRightLabel.Text = subtrahend.ToString
difference.Value = 0

' Fill in the multiplication problem.

multiplicand = randomizer.Next(2, 11)
multiplier = randomizer.Next(2, 11)
timesLeftLabel.Text = multiplicand.ToString
timesRightLabel.Text = multiplier.ToString
product.Value = 0

' Fill in the division problem.

divisor = randomizer.Next(2, 11)
Dim temporaryQuotient As Integer = randomizer.Next(2, 11)
dividend = divisor * temporaryQuotient
dividedLeftLabel.Text = dividend.ToString
dividedRightLabel.Text = divisor.ToString
quotient.Value = 0

' Start the timer.

timeLeft = 30
timeLabel.Text = "30 seconds"
Timer1.Start()

End Sub

3.

Modifique el mtodo CheckTheAnswer() para que tambin compruebe los problemas de

divisin y multiplicacin. El cdigo debe tener este aspecto.
C#
VB
Copiar

''' <summary>
''' Check the answer to see if the user got everything right.
''' </summary>
''' <returns>True if the answer's correct, false otherwise.</returns>
''' <remarks></remarks>
Public Function CheckTheAnswer() As Boolean

If ((addend1 + addend2 = sum.Value) AndAlso (minuend - subtrahend

= difference.Value) AndAlso (multiplicand * multiplier =
product.Value) AndAlso (dividend / divisor = quotient.Value)) Then
Return True
Else
Return False
End If

End Function

Nota
Dado que no hay ninguna manera simple de escribir el signo de multiplicacin () y el signo de
divisin () mediante el teclado, Visual C# y Visual Basic utilizan el asterisco (*) para la multiplicacin
y la barra diagonal (/) para la divisin.

4.

Cambie la ltima parte del controlador de evento Tick del temporizador de modo que
rellene la respuesta correcta cuando se agote el tiempo. El cdigo debe tener este aspecto.
C#
VB
Copiar

Else
' If the user ran out of time, stop the timer, show
' a MessageBox, and fill in the answers.
Timer1.Stop()
timeLabel.Text = "Time's up!"
MessageBox.Show("You didn't finish in time.", "Sorry")
sum.Value = addend1 + addend2
difference.Value = minuend - subtrahend

product.Value = multiplicand * multiplier

quotient.Value = dividend / divisor
startButton.Enabled = True
End If

5.

Guarde y ejecute el programa. Ahora, hay que responder a cuatro problemas para completar
la prueba, como se muestra en la siguiente imagen.
Prueba matemtica con cuatro problemas

Paso 8: Probar otras caractersticas

Visual Studio 2010
Piense en cmo el programa crea un problema de divisin aleatoria. Piense por qu el programa no
crea un problema en que la respuesta sea una fraccin. Para aprender ms, intente cambiar el color
del control timeLabel y proporcionar al usuario alguna sugerencia.

Para probar otras caractersticas

Cambie el color del control timeLabel a rojo cuando al usuario no le queden ms que cinco
segundos, estableciendo su control BackColor (timeLabel.BackColor = Color.Red;). Restablezca
el color cuando la prueba haya terminado.
Proporcione al usuario una sugerencia reproduciendo un sonido cuando especifique una
respuesta correcta en uno de los controles NumericUpDown. (Tendr que escribir un
controlador de eventos para el evento ValueChanged de cada control, que se desencadena
cada vez que el usuario cambia el valor del control.)

Tutorial 4: Crear un juego de formar parejas

Visual Studio 2010
En este tutorial, compilar un juego de formar parejas en el que el jugador debe buscar las
coincidencias entre pares de iconos ocultos. Aprender a:

Usar un objeto List para contener objetos.

Usar un bucle foreach en Visual C# o un bucle For Each en Visual Basic.
Realizar el seguimiento del estado de un formulario mediante variables de referencia.
Compilar un controlador de eventos que se pueda usar con varios objetos.
Hacer que un temporizador se active una vez despus de iniciarse.

Cuando termine, el programa se parecer al de la ilustracin siguiente.

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

El primer paso es crear el proyecto y agregar un control

agregar una tabla a un

TableLayoutPanel.

formulario
Paso 2: Agregar un objeto

Agregar un objeto Random y un objeto List, para crear una lista de

aleatorio y una lista de iconos

iconos.

Paso 3: Asignar un icono

Asignar los iconos aleatoriamente a los controles Label.

aleatorio a cada etiqueta

Agregar un controlador de eventos Click que cambiar el color de la

controlador de eventos Click a etiqueta en la que se haga clic.
cada etiqueta
Paso 4: Agregar un

Paso 5: Agregar referencias a

Agregar variables de referencia para realizar el seguimiento de las

etiquetas

etiquetas en las que se hace clic.

Paso 6: Agregar un

Agregar un temporizador al formulario.

temporizador
Paso 7: Mantener visibles los

Mantendr los pares de iconos visibles si se selecciona una pareja

pares

coincidente.

Paso 8: Agregar un mtodo

Agregar un mtodo CheckForWinner() para comprobar si el jugador

para comprobar si el jugador

gan.

gan
Paso 9: Probar otras

Probar otras caractersticas, como cambiar los iconos y colores,

caractersticas

agregar una cuadrcula y agregar sonidos. Intentar aumentar el

tamao del tablero y ajustar el temporizador.

Paso 1: Crear un proyecto y agregar una tabla a un

formulario
Visual Studio 2010
El primer paso para crear un juego de formar parejas es crear el proyecto y agregar una tabla al
formulario.

Para crear un proyecto y agregar una tabla al formulario

1.
2.
3.
4.

5.

En el men Archivo, haga clic en Nuevo proyecto.

Si no usa Visual Studio Express, primero debe seleccionar un lenguaje. En la lista Plantillas
instaladas, seleccione C# o Visual Basic.
Haga clic en el icono Aplicacin de Windows Forms y, a continuacin, escriba el nombre
MatchingGame.
Establezca las propiedades del formulario.
a. Cambie la propiedad Text del formulario a Matching Game.
b. Cambie el tamao a 550 pxeles de ancho por 550 pxeles de alto mediante la
propiedad Size o arrastre el mouse hasta que vea el tamao correcto en la esquina
inferior izquierda del entorno de desarrollo integrado (IDE).
Arrastre un control TableLayoutPanel desde el cuadro de herramientas y, a continuacin,
establezca sus propiedades:

a.
b.

c.
d.
e.

Establezca la propiedad BackColor en CornflowerBlue. (Seleccione la pestaa Web

en el selector de colores para ver los nombres de los colores).
Establezca la propiedad Dock en Fill; para ello, haga clic en el botn de lista
desplegable situado al lado de la propiedad y haga clic en el botn grande del
medio.
Haga clic en el botn del tringulo situado en la esquina superior derecha de
TableLayoutPanel para mostrar el men de tareas.
Haga clic dos veces Agregar fila para agregar dos filas ms y, a continuacin, haga
clic dos veces en Agregar columna para agregar dos columnas ms.
Haga clic en Editar filas y columnas para abrir la ventana Estilos de columna y
fila. Seleccione cada una de las columnas, haga clic en el botn Porcentaje y
establezca el ancho de cada columna en el 25 por ciento del ancho total. A
continuacin, seleccione Filas en la lista desplegable de la parte superior de la
ventana y establezca el alto de cada fila en el 25 por ciento. Haga clic en el botn
Aceptar.

Ahora, su control TableLayoutPanel debera tener diecisis celdas cuadradas del mismo
tamao.
6.

Asegrese de que el control TableLayoutPanel est seleccionado en el editor de formularios.

Con l seleccionado, abra el cuadro de herramientas y haga doble clic en Etiqueta para
agregar un control Label al cuadrado superior izquierdo. Ahora, el control Label debera
estar seleccionado en el IDE. Establezca sus propiedades:
a. Establezca la propiedad BackColor en CornflowerBlue.
b. Establezca la propiedad AutoSize en False.
c. Establezca la propiedad Dock en Fill.
d. Establezca la propiedad TextAlign en MiddleCenter haciendo clic en el botn de
lista desplegable que se encuentra al lado de la propiedad y haciendo clic, a
continuacin, en el botn central.
e. Haga clic en la propiedad Font. Debera aparecer un botn de puntos suspensivos.
f. Haga clic en el botn de puntos suspensivos y establezca la fuente en Webdings 72
point Bold.
g. Establezca la propiedad Text en la letra c.
La celda superior izquierda de TableLayoutPanel debera contener un cuadro negro
grande centrado sobre un fondo azul.

Nota
La fuente Webdings es una fuente de iconos que se distribuye con el sistema operativo Microsoft
Windows. En el juego de formar parejas, el jugador necesita encontrar la correspondencia entre
pares de iconos, de modo que se usa esta fuente para mostrar los iconos que deben coincidir. En
lugar de colocar c en la propiedad Text, pruebe a escribir letras diferentes para ver qu iconos se
muestran. Un signo de exclamacin es una araa, una N mayscula es un ojo y una coma es una
guindilla.

7.

Seleccione el control Label y cpielo. (Presione Ctrl+C o, en el men Edicin, haga clic en
Copiar). A continuacin, pguelo. (Presione Ctrl+V o, en el men Edicin, haga clic en
Pegar). Aparecer otra etiqueta en la segunda celda de TableLayoutPanel. Vuelva a pegar el

control; aparecer otra etiqueta en la tercera celda. Siga pegando los controles Label hasta
que se llenen todas las celdas.

Nota
Si pega demasiadas veces, el IDE agrega una nueva fila a TableLayoutPanel para que haya espacio
para agregar el nuevo control Label. La accin se puede deshacer. Para quitar la nueva celda,
presione Ctrl+Z o, en el men Edicin, haga clic en Deshacer.

8. Ya tiene diseado el formulario. Debera tener este aspecto:

9. Formulario inicial del juego de formar parejas
10.

Paso 2: Agregar un objeto aleatorio y una lista de

iconos
Visual Studio 2010
Es preciso utilizar dos instrucciones new para crear dos objetos y agregarlos al formulario. El primero
es un objeto Random como el usado en el juego de la prueba de matemticas. El segundo es nuevo:
un objeto List.

Para agregar un objeto Random y una lista de iconos

1.

Antes de agregar el siguiente cdigo para crear la lista, tenga en cuenta su funcionamiento.
C#
VB
Copiar

Public Class Form1

' Use this Random object to choose random icons for the squares
Dim random As New Random

' Each of these letters is an interesting icon

' in the Webdings font,
' and each icon appears twice in this list
Dim temporaryArray() As String = {"!", "!", "N", "N", ",", ",",
"k", "k", _
"b", "b", "v", "v", "w", "w",
"z", "z"}
Dim icons As List(Of String) = temporaryArray.ToList()

2.

3.

Pase al editor de cdigo haciendo clic con el botn secundario en Form1.cs en el

Explorador de soluciones y haciendo clic a continuacin en Ver cdigo en el men.
Comience por escribir el cdigo mostrado en el paso anterior. Al escribir cdigo de Visual
C#, asegrese de que coloca el cdigo despus de la llave de apertura y justo despus de la
declaracin de clase (public partial class Form1 : Form). Al escribir cdigo de Visual Basic,
coloque el cdigo justo despus de la declaracin de clase (Public Class Form1).
Al agregar el objeto List, observe atentamente la ventana IntelliSense que se abre. El
siguiente es un ejemplo de Visual C#. Aparecer texto similar si agrega una lista en Visual
Basic.
Ventana IntelliSense

Nota
Es ms sencillo comprender el cdigo si se examina en secciones pequeas. Sus programas pueden
utilizar objetos List para hacer el seguimiento de muchos elementos. Una lista puede contener
nmeros, valores true/false, texto u otros objetos. Se puede tener un objeto List que contiene otros
objetos List. Los elementos en una lista se llaman elementos y cada lista solo contiene elementos de
un tipo. As que una lista de nmeros solo puede contener nmeros; no se puede agregar texto.
Tampoco se pueden agregar nmeros a una lista de valores true/false

Nota
Cuando crea un objeto List mediante una instruccin new, necesita indicar lo que desea que
contenga. Por eso la informacin sobre herramientas de la parte superior de la ventana IntelliSense
muestra el tipo de elementos de la lista. Adems, eso es lo que significa List<string> (en Visual C#) y
List(Of String) (en Visual Basic): es un objeto List que contiene cadenas. Una cadena es lo que su
programa utiliza para almacenar texto, que es lo que la informacin sobre herramientas de la parte
derecha de la ventana IntelliSense le indica.

4.

En Visual Basic se debe crear primero una matriz temporal, pero en Visual C#, la lista se
puede crear con una instruccin. Esto es porque Visual C# tiene inicializadores de coleccin.
En Visual Basic 2010, puede utilizar un inicializador de coleccin. Sin embargo, por
compatibilidad con la versin anterior de Visual Basic, recomendamos utilizar el cdigo
anterior.

Nota
Al utilizar un inicializador de coleccin con una instruccin new, una vez creado el nuevo objeto List,
el programa lo rellena con lo que haya entre las llaves. En este caso, se obtiene una lista de cadenas
denominadas iconos; la lista se inicializar para que contenga diecisis cadenas. Cada una de esas
cadenas es una letra nica y todas corresponden a los iconos que se mostrarn en las etiquetas. As
que el juego tendr un par de signos de exclamacin, un par de letras N en mayscula, un par de
comas, etc. El objeto List tendr diecisis cadenas en total, una por cada celda de la
TableLayoutPanel.

Nota
En Visual Basic, se obtiene el mismo resultado, pero las cadenas se colocan primero en una matriz
temporal, que se convierte despus en un objeto List. Una matriz es similar a una lista, salvo que las
matrices se crean con un tamao fijo. Las listas pueden reducir y crecer segn sea necesario, algo

que es importante en este programa.

Paso 3: Asignar un icono aleatorio a cada etiqueta

Visual Studio 2010
Si el juego siempre oculta los mismos iconos en las mismas ubicaciones, no supone ningn reto.
Debe asignar los iconos de forma aleatoria a los controles Label del formulario. Con este objetivo, se
agrega un mtodo AssignIconsToSquares().

Para asignar un icono aleatorio a cada etiqueta

1.

Antes de agregar el siguiente cdigo, considere cmo funciona el mtodo. Hay una nueva
palabra clave: foreach en Visual C# y For Each en Visual Basic. (Una de las lneas est
comentada intencionadamente; se explica al final de este procedimiento).
C#
VB
Copiar

''' <summary>
''' Assign each icon from the list of icons to a random square
''' </summary>
''' <remarks></remarks>
Private Sub AssignIconsToSquares()

' The TableLayoutPanel has 16 labels,

' and the icon list has 16 icons,
' so an icon is pulled at random from the list
' and added to each label
For Each control In TableLayoutPanel1.Controls
Dim iconLabel As Label = TryCast(control, Label)
If iconLabel IsNot Nothing Then
Dim randomNumber As Integer = random.Next(icons.Count)
iconLabel.Text = icons.ElementAt(randomNumber)

' iconLabel.ForeColor = iconLabel.BackColor

icons.RemoveAt(randomNumber)
End If
Next

End Sub

2.

Agregue el mtodo AssignIconsToSquares() tal como se indica en el paso anterior. Basta

con que lo coloque debajo del cdigo que agreg en Paso 2: Agregar un objeto aleatorio y una
lista de iconos.
Hay una novedad en el mtodo AssignIconsToSquares(): un bucle foreach en Visual C# y
For Each en Visual Basic. Un bucle foreach se usa siempre que se desea realizar la misma
accin una y otra vez. En este caso, desea ejecutar las mismas instrucciones para cada
etiqueta de TableLayoutPanel, tal y como se observa en el siguiente cdigo.
C#
VB
Copiar

For Each control In TableLayoutPanel1.Controls

' The statements you want to execute
' for each label go here
' The statements use iconLabel to access
' each label's properties and methods
Next

Nota
Se usan los nombres iconLabel y control porque son descriptivos. Sin embargo, podra reemplazarlos
con cualquier nombre sin que ello repercutiese en el funcionamiento (siempre y cuando se cambiase

el nombre en cada instruccin incluida entre llaves).

El mtodo AssignIconsToSquares() recorre cada control Label de TableLayoutPanel y

ejecuta las mismas instrucciones para cada uno de ellos. Esas instrucciones extraen un icono
aleatorio de la lista que se agreg en Paso 2: Agregar un objeto aleatorio y una lista de iconos.
(Por eso incluy dos iconos de cada en la lista, para que hubiera un par de iconos asignado a
los controles Label aleatorios.)
3.

Necesita llamar al mtodo AssignIconsToSquares() en cuanto se inicie el programa. Si

escribe cdigo de Visual C#, agregue una instruccin bajo la llamada al mtodo
InitializeComponent() en el constructor Form1, de modo que el formulario llame a su
nuevo mtodo para prepararse antes de mostrarse.
C#
Copiar

public Form1()
{
InitializeComponent();

AssignIconsToSquares();
}

Para Visual Basic, primero agregue el constructor y, a continuacin, agregue al constructor la

llamada al mtodo. Antes del mtodo AssignIconsToSquares() que acaba de crear, empiece
escribiendo el cdigo Public Sub New(). Al presionar la tecla ENTRAR para pasar a la lnea
siguiente, IntelliSense debera hacer que apareciese el siguiente cdigo para completar el
constructor.
VB
Copiar

Public Sub New()

' This call is required by Windows Form Designer
InitializeComponent()
' Add any initialization after the InitializeComponent() call

End Sub
Agregue la llamada al mtodo AssignIconsToSquares() de modo que el constructor sea
similar al siguiente.
VB
Copiar

Public Sub New()

' This call is required by Windows Form Designer
InitializeComponent()
' Add any initialization after the InitializeComponent() call
AssignIconsToSquares()
End Sub

4.
5.

Guarde el programa y ejectelo. Ahora, debera mostrar un formulario con iconos aleatorios
asignados a cada etiqueta.
Cierre el programa y, a continuacin, ejectelo de nuevo. Ahora hay iconos diferentes
asignados a cada etiqueta, como se muestra en la siguiente ilustracin.
Juego de formar parejas con iconos aleatorios

6.

Ahora detenga el programa y quite los comentarios de la lnea de cdigo dentro del bucle
foreach.
C#

VB
Copiar

iconLabel.ForeColor = iconLabel.BackColor

7.

Haga clic en el botn Guardar todo de la barra de herramientas para guardar el programa y,
a continuacin, ejectelo. Parece que los iconos han desaparecido (nicamente se muestra
un fondo azul). Sin embargo, los iconos se asignan aleatoriamente y siguen ah. Debido a
que los iconos tienen el mismo color que el fondo, no se ven.

Paso 4: Agregar un controlador de eventos Click a

cada etiqueta
Visual Studio 2010
El juego de formar parejas funciona como sigue:
1.
2.
3.

Cuando un jugador hace clic en uno de los cuadrados con icono oculto, el programa
muestra el icono al jugador cambiando a negro su color.
A continuacin, el jugador hace clic en otro icono oculto.
Si los iconos coinciden, permanecen visibles. En caso contrario, se vuelven a ocultar.

Para conseguir que un programa funcione as, agregue un controlador de eventos Click que cambie
el color de la etiqueta en la que se hace clic.

Para agregar un controlador de eventos Click a cada etiqueta

1.

2.

Vaya al Diseador de Windows Forms y haga clic en el primer control Label para
seleccionarlo. A continuacin, mantenga presionada la tecla CTRL mientras hace clic en cada
una de las otras etiquetas para seleccionarlas. Asegrese de que todas las etiquetas estn
seleccionadas.
A continuacin, vaya a la pgina Eventos de la ventana Propiedades. Desplcese hacia
abajo hasta el evento Click y escriba label_Click en el cuadro, como se muestra en la
siguiente ilustracin.
Ventana Propiedades con el evento Click

3.
4.

Presione ENTRAR. El IDE agrega al cdigo un controlador de eventos Click denominado

label_Click() y lo enlaza a cada una de las etiquetas.
Rellene el resto del cdigo como se indica a continuacin:
C#
VB
Copiar

''' <summary>
''' Every label's Click event is handled by this event handler
''' </summary>
''' <param name="sender">The label that was clicked</param>
''' <param name="e"></param>
''' <remarks></remarks>
Private Sub label_Click(ByVal sender As System.Object, ByVal e As
System.EventArgs) Handles Label9.Click, Label8.Click, Label7.Click,
Label6.Click, Label5.Click, Label4.Click, Label3.Click, Label2.Click,
Label16.Click, Label15.Click, Label14.Click, Label13.Click,
Label12.Click, Label11.Click, Label10.Click, Label1.Click

Dim clickedLabel As Label = TryCast(sender, Label)

If clickedLabel IsNot Nothing Then

' If the clicked label is black, the player clicked

' an icon that's already been revealed -' ignore the click
If (clickedLabel.ForeColor = Color.Black) Then
Return
End If

clickedLabel.ForeColor = Color.Black
End If
End Sub

Nota
Es posible que reconozca, del tutorial para crear una prueba matemtica, el elemento object sender
que se muestra en la parte superior del controlador de eventos. Enlaz distintos eventos Clic del
control Label a un nico mtodo de controlador de eventos, de modo que se llama al mismo
mtodo con independencia de la etiqueta en la que haga clic el usuario. Dado que el mtodo
necesita saber en qu etiqueta se hizo clic, usa el nombre sender para ese control Label. La primera
lnea del mtodo indica al programa que no es solo un objeto, sino que es, en concreto, un control
Label y que, a travs del nombre clickedLabel, se tiene acceso a sus propiedades y mtodos.

Este mtodo comprueba primero si clickedLabel se convirti (mediante conversin de tipos)

correctamente de un objeto en un control Label. Si no, tiene un valor Null (C#) o Nothing
(Visual Basic), y no se desea ejecutar el resto del cdigo en el mtodo. Luego, el mtodo
comprueba el color del texto de la etiqueta en la que se hizo clic mediante la propiedad
ForeColor. Si ya es negro, se ha hecho clic en el icono, de modo que el mtodo ha
terminado. (Esto es lo que hace la instruccin return: indica al programa que deje de ejecutar
el mtodo). Si no se ha hecho clic en el icono, cambia el color del texto a negro.
5.

Guarde y ejecute el programa. Debera ver un formulario vaco con un fondo azul. Haga clic
en el formulario; uno de los iconos debera volverse visible. Siga haciendo clic en distintos
lugares del formulario. A medida que hace clic en los iconos, deberan aparecer.

Paso 5: Agregar referencias a etiquetas

Visual Studio 2010
El programa necesita realizar un seguimiento de los controles Label en los que el usuario hace clic.
Despus de que se haga clic en la primera etiqueta, el programa muestra el correspondiente icono.
Despus de que se haga clic en la segunda etiqueta, el programa muestra ambos iconos durante
unos instantes y, a continuacin, los vuelve a ocultar. El programa realiza un seguimiento del control
Label en el que se hace clic en primer lugar y del control en el que se hace clic en segundo lugar
mediante variables de referencia.

Para agregar referencias de etiqueta

1.

Para agregar referencias de etiqueta a un formulario, use el siguiente cdigo.

C#
VB
Copiar

Public Class Form1

' firstClicked points to the first Label control

' that the player clicks, but it will be Nothing
' if the player hasn't clicked a label yet
Dim firstClicked As Label = Nothing

' secondClicked points to the second Label control

' that the player clicks
Dim secondClicked As Label = Nothing

Nota
Las variables de referencia parecen similares a las instrucciones usadas para agregar objetos (por
ejemplo, objetos Timer, objetos List y objetos Random) a un formulario. Sin embargo, estas
instrucciones no hacen aparecer dos controles Label adicionales en el formulario porque ninguna de

las dos instrucciones incluye new. Sin new, no se crea ningn objeto. Por ello, firstClicked y
secondClicked se denominan variables de referencia: simplemente realizan un seguimiento o hacen
referencia a objetos Label.

Nota
Cuando una variable no realiza el seguimiento de ningn objeto, se establece en un valor especial:
null en Visual C# y Nothing en Visual Basic. Por lo tanto, cuando se inicia el programa, el valor de
firstClicked y el valor de secondClicked estn establecidos en null o Nothing, lo que significa que las
variables no realizan ningn tipo de seguimiento.

2.

Modifique el controlador de eventos Click para usar la nueva variable de referencia

firstClicked. Quite la ltima instruccin del mtodo de control de eventos label_Click()
(clickedLabel.ForeColor = Color.Black;) y reemplcela por la instruccin if que figura a
continuacin. (Asegrese de incluir el comentario as como todo lo que aparezca entre
llaves.)
C#
VB
Copiar

''' <summary>
''' Every label's Click event is handled by this event handler
''' </summary>
''' <param name="sender">The label that was clicked</param>
''' <param name="e"></param>
''' <remarks></remarks>
Private Sub label_Click(ByVal sender As System.Object, ByVal e As
System.EventArgs) Handles Label9.Click, Label8.Click, Label7.Click,
Label6.Click, Label5.Click, Label4.Click, Label3.Click, Label2.Click,
Label16.Click, Label15.Click, Label14.Click, Label13.Click,
Label12.Click, Label11.Click, Label10.Click, Label1.Click

Dim clickedLabel As Label = TryCast(sender, Label)

If clickedLabel IsNot Nothing Then

' If the clicked label is black, the player clicked

' an icon that's already been revealed -' ignore the click
If (clickedLabel.ForeColor = Color.Black) Then
Return
End If

' If firstClicked is Nothing, this is the first icon

' in the pair that the player clicked,
' so set firstClicked to the label that the player
' clicked, change its color to black, and return
If (firstClicked Is Nothing) Then
firstClicked = clickedLabel
firstClicked.ForeColor = Color.Black
Return
End If
End If

End Sub

3.
4.

Guarde y ejecute el programa. Haga clic en uno de los controles Label y aparecer el
correspondiente icono.
Haga clic en el siguiente control Label y ver que no sucede nada. El programa ya est
realizando un seguimiento de la primera etiqueta en la que se hizo clic, por lo que el valor
de firstClicked no es null en Visual C# ni Nothing en Visual Basic. Cuando la instruccin if
comprueba firstClicked para determinar si su valor es null o Nothing, concluye que no tiene
ese valor y no ejecuta las instrucciones de la instruccin if. Por lo tanto, solo el primer icono
en el que se hizo clic se vuelve negro y los dems iconos se vuelven invisibles, tal y como se
muestra en la siguiente imagen.
Juego de formar parejas con un icono visible

Paso 6: Agregar un temporizador

Visual Studio 2010
A continuacin, agregar un temporizador al juego de formar parejas.

Para agregar un temporizador

1.

Vaya al cuadro de herramientas del Diseador de Windows Forms. Haga doble clic en
Temporizador (en la categora Componentes) y agregue un temporizador al formulario; su
icono aparece en un cuadro deshabilitado bajo el formulario, como se muestra en la
siguiente ilustracin.
Temporizador

2.

Haga clic en el icono timer1 para seleccionar el temporizador. Establezca la propiedad

Interval en 750, pero deje la propiedad Enabled establecida en False. La propiedad Interval
indica al temporizador cunto tiempo debe esperar entre los pasos, de modo que aqu se
indica al temporizador que espere tres cuartos de segundo (750 milisegundos) antes de
desencadenar su primer evento Tick. No desear que el temporizador se inicie cuando se
inicie el programa. En su lugar, utilizar el mtodo Start() para iniciar el temporizador
cuando el jugador haga clic en la segunda etiqueta.

3.

Haga doble clic en el icono del control Timer en el Diseador de Windows Forms para
agregar el controlador de eventos Tick, como se muestra en el siguiente cdigo.
C#
VB
Copiar

''' <summary>
''' This timer is started when the player clicks
''' two icons that don't match,
''' so it counts three quarters of a second
''' and then turns itself off and hides both icons
''' </summary>
''' <remarks></remarks>
Private Sub Timer1_Tick() Handles Timer1.Tick

' Stop the timer

Timer1.Stop()

' Hide both icons

firstClicked.ForeColor = firstClicked.BackColor
secondClicked.ForeColor = secondClicked.BackColor

' Reset firstClicked and secondClicked

' so the next time a label is
' clicked, the program knows it's the first click
firstClicked = Nothing
secondClicked = Nothing

End Sub

El controlador de eventos Tick realiza tres acciones: primero, detiene el temporizador

mediante una llamada al mtodo Stop(). A continuacin, usa las dos variables de referencia,
firstClicked y secondClicked, para recuperar las dos etiquetas en las que el jugador hizo clic y
volver a ocultar sus iconos. Finalmente, restablece las variables de referencia firstClicked y
secondClicked en null en Visual C# y Nothing en Visual Basic. Esto es importante, porque as
es como se restablece el propio programa. Ahora no realiza el seguimiento de ningn
control Label y vuelve a estar listo para el primer clic del jugador.

Nota
Un objeto Timer tiene un mtodo Start() que inicia el temporizador y un mtodo Stop() que lo
detiene. Al establecer la propiedad Enabled del temporizador en True en la ventana Propiedades,
inicia los pasos nada ms comenzar el programa. Sin embargo, si se deja establecido en False, no
inicia los pasos hasta que se llama a su mtodo Start().

Nota
Normalmente, un temporizador desencadena una y otra vez su evento Tick, utilizando la propiedad
Interval para determinar cuntos milisegundos debe esperar entre los pasos. Es posible que haya
observado cmo se llama al mtodo Stop() del temporizador dentro del evento Tick. Esto hace que
el temporizador entre en modo de un disparo, de tal forma que, cuando se llama al mtodo Start(),
espera durante el intervalo correspondiente y desencadena un nico evento Tick.

4.

Para ver el nuevo temporizador en accin, vaya al editor de cdigo y agregue el siguiente
cdigo al principio y al final del mtodo de control de eventos label_Click(). (Se agrega una
instruccin if al principio y tres instrucciones al final; el resto del mtodo no cambia).
C#
VB
Copiar

''' <summary>
''' Every label's Click event is handled by this event handler
''' </summary>
''' <param name="sender">The label that was clicked</param>
''' <param name="e"></param>
''' <remarks></remarks>

Private Sub label_Click(ByVal sender As System.Object, ByVal e As

System.EventArgs) Handles Label9.Click, Label8.Click, Label7.Click,
Label6.Click, Label5.Click, Label4.Click, Label3.Click, Label2.Click,
Label16.Click, Label15.Click, Label14.Click, Label13.Click,
Label12.Click, Label11.Click, Label10.Click, Label1.Click

' The timer is only on after two non-matching

' icons have been shown to the player,
' so ignore any clicks if the timer is running
If (Timer1.Enabled = True) Then
Return
End If

Dim clickedLabel As Label = TryCast(sender, Label)

If clickedLabel IsNot Nothing Then

' If the clicked label is black, the player clicked
' an icon that's already been revealed -' ignore the click
If (clickedLabel.ForeColor = Color.Black) Then
Return
End If

' If firstClicked is Nothing, this is the first icon

' in the pair that the player clicked,
' so set firstClicked to the label that the player
' clicked, change its color to black, and return
If (firstClicked Is Nothing) Then
firstClicked = clickedLabel
firstClicked.ForeColor = Color.Black
Return
End If

' If the player gets this far, the timer isn't

' running and firstClicked isn't Nothing,
' so this must be the second icon the player clicked
' Set its color to black
secondClicked = clickedLabel
secondClicked.ForeColor = Color.Black

' If the player gets this far, the player

' clicked two different icons, so start the
' timer (which will wait three quarters of
' a second, and then hide the icons)
Timer1.Start()
End If

End Sub

El cdigo que se encuentra al principio del mtodo comprueba si el temporizador se inici

en la propiedad Enabled. As, si el jugador hace clic en el primer y segundo control Label y
se inicia el temporizador, no suceder nada al hacer clic en un tercer control.
El cdigo al final del mtodo establece la variable de referencia secondClicked para que
realice el seguimiento del segundo control Label en el que hizo clic el jugador, y establece el
color del icono de esa etiqueta en negro para que est visible. A continuacin, inicia el
temporizador en modo de un disparo de forma que espere durante 750 milisegundos antes
de desencadenar el evento Tick. Es entonces cuando el controlador de eventos Tick del
temporizador oculta los dos iconos y restablece las variables de referencia firstClicked y
secondClicked de modo que el formulario est listo para que el jugador haga clic en otro
icono.
5.
6.

Guarde y ejecute el programa. Haga clic en un icono para que se vuelva visible.
Haga clic en otro icono. Aparece brevemente y, a continuacin, ambos iconos desaparecen.
Repita el proceso varias veces. Ahora, el formulario realiza el seguimiento del primer y
segundo icono en los que hizo clic, y usa el temporizador para realizar una pausa antes de
hacer que los iconos desaparezcan.

Paso 7: Mantener visibles los pares

Visual Studio 2010
El juego funciona bien siempre y cuando el jugador haga clic solo en los pares de iconos que no
coinciden. Sin embargo, piense qu sucedera si el jugador hace clic en una pareja coincidente. En
lugar de hacer que los iconos desaparezcan activando el temporizador (con el mtodo Start()), el
juego se debera restablecer automticamente para dejar de realizar el seguimiento de cualquier
etiqueta mediante las variables de referencia firstClicked y secondClicked, sin restablecer los colores
de las dos etiquetas en las que se hizo clic.

Para mantener las parejas visibles

1.

Agregue la siguiente instruccin if al mtodo de control de eventos label_Click(), casi al

final, justo encima de la instruccin donde se inicia el temporizador. Observe el cdigo
minuciosamente mientras lo agrega al programa. Observe cmo funciona.
C#
VB
Copiar

' If the player gets this far, the timer isn't

' running and firstClicked isn't Nothing,
' so this must be the second icon the player clicked
' Set its color to black
secondClicked = clickedLabel
secondClicked.ForeColor = Color.Black

' If the player clicked two matching icons, keep them

' black and reset firstClicked and secondClicked
' so the player can click another icon
If (firstClicked.Text = secondClicked.Text) Then
firstClicked = Nothing
secondClicked = Nothing
Return
End If

' If the player gets this far, the player

' clicked two different icons, so start the
' timer (which will wait three quarters of
' a second, and then hide the icons)
Timer1.Start()
End If
End Sub

La primera lnea de la instruccin if que acaba de agregar comprueba si el icono de la

primera etiqueta en la que el jugador hizo clic es igual que el icono de la segunda etiqueta.
Si los iconos son iguales, el programa ejecuta las tres instrucciones entre llaves en C# o las
tres instrucciones incluidas en la instruccin if en Visual Basic. Las dos primeras instrucciones
restablecen las variables de referencia firstClicked y secondClicked para que no realicen el
seguimiento de ninguna de las etiquetas. (Quizs reconozca esas dos instrucciones por el
controlador de eventos Tick del temporizador). La tercera es una instruccin return, que
indica al programa que omita el resto de las instrucciones del mtodo sin ejecutarlas.
Si programa en Visual C#, quizs haya observado que en una parte del cdigo se usa un solo
signo de igualdad (=), mientras que otras instrucciones usan dos (==). Piense por qu se usa
= en algunos lugares y == en otros.
Aqu tiene un buen ejemplo donde se ve la diferencia. Observe minuciosamente el cdigo
que se encuentra entre parntesis en la instruccin if.
VB
Copiar

firstClicked.Text = secondClicked.Text
C#
Copiar

firstClicked.Text == secondClicked.Text
A continuacin, examine con detalle la primera instruccin del bloque de cdigo situado
despus de la instruccin if.
VB
Copiar

firstClicked = Nothing

C#
Copiar

firstClicked = null;
La primera de esas dos instrucciones comprueba si dos iconos son iguales.Dado que se
comparan dos valores, el programa de Visual C# usa el operador de igualdad ==.La segunda
instruccin en realidad cambia el valor (lo que se conoce como asignacin), estableciendo la
variable de referencia firstClicked en null para restablecerlo.Por eso se usa en este caso el
operador de asignacin =.Visual C# usa = para establecer los valores y == para
compararlos.En Visual Basic se usa = tanto para la asignacin como para la comparacin.
2.

Guarde y ejecute el programa, y empiece a hacer clic en el formulario. Si hace clic en una
pareja que no coincide, se desencadena el evento Tick del temporizador, y ambos iconos
desaparecen. Si hace clic en una pareja coincidente, se ejecuta la nueva instruccin if y la
instruccin return hace que el mtodo omita el cdigo que inicia el temporizador, de modo
que los iconos se mantengan visibles, como se muestra en la siguiente ilustracin.
Juego de formar parejas con pares de iconos visibles

Paso 8: Agregar un mtodo para comprobar si el

jugador gan
Visual Studio 2010
Ha creado un juego divertido, pero necesita un elemento adicional. El juego debe finalizar cuando el
jugador gana, de modo que necesita agregar un mtodo CheckForWinner() para comprobar si el
jugador ha ganado.

Para agregar un mtodo que compruebe si el jugador gan

1.

Agregue un mtodo CheckForWinner() al formulario, tal como se muestra en el siguiente

cdigo.
C#
VB
Copiar

''' <summary>
''' Check every icon to see if it is matched, by
''' comparing its foreground color to its background color.
''' If all of the icons are matched, the player wins
''' </summary>
Private Sub CheckForWinner()

' Go through all of the labels in the TableLayoutPanel,

' checking each one to see if its icon is matched
For Each control In TableLayoutPanel1.Controls
Dim iconLabel As Label = TryCast(control, Label)
If iconLabel IsNot Nothing Then
If (iconLabel.ForeColor = iconLabel.BackColor) Then
Return
End If
End If
Next

' If the loop didnt return, it didn't find

' any unmatched icons
' That means the user won. Show a message and close the form
MessageBox.Show("You matched all the icons!", "Congratulations")

Close()

End Sub

El mtodo utiliza otro bucle foreach en Visual C# o For Each en Visual Basic para recorrer
cada etiqueta de TableLayoutPanel. Usa el operador de igualdad (== en Visual C# y = en
Visual Basic) para comprobar el color del icono de cada etiqueta y si coincide con el fondo.
Si los colores coinciden, el icono sigue siendo invisible y el jugador no ha hallado las parejas
de los iconos restantes. En ese caso, el programa utiliza una instruccin return para omitir el
resto del mtodo. Si el bucle pasa por todas las etiquetas sin ejecutar la instruccin return,
indica que se han logrado hallar todas las parejas de iconos. El programa muestra un
elemento MessageBox y, a continuacin, llama al mtodo Close() del formulario para
finalizar el juego.
2.

A continuacin, haga que el controlador del evento Click de la etiqueta llame al nuevo
mtodo CheckForWinner(). Asegrese de que el programa comprueba si existe un ganador
despus de mostrar el segundo icono en el que el jugador hace clic. Busque la lnea donde
estableci el color del segundo icono en el que se ha hecho clic y llame al mtodo
CheckForWinner() inmediatamente despus, tal como se muestra en el siguiente cdigo.
C#
VB
Copiar

' If the player gets this far, the timer isn't

' running and firstClicked isn't Nothing,
' so this must be the second icon the player clicked
' Set its color to black
secondClicked = clickedLabel
secondClicked.ForeColor = Color.Black

' Check to see if the player won

CheckForWinner()

' If the player clicked two matching icons, keep them

' black and reset firstClicked and secondClicked

' so the player can click another icon
If (firstClicked.Text = secondClicked.Text) Then
firstClicked = Nothing
secondClicked = Nothing
Return
End If

3.

Guarde y ejecute el programa. Reproduzca el juego y halle las coincidencias de todos los
iconos. Al ganar, el programa muestra un elemento MessageBox (tal como se muestra en la
siguiente imagen) y, a continuacin, cierra el cuadro.
Juego de formar parejas con MessageBox

Paso 9: Probar otras caractersticas

Visual Studio 2010
Para aprender ms, pruebe a cambiar los iconos y colores, y agregue una cuadrcula y sonidos. Para
que el juego sea ms desafiante, pruebe a aumentar el tamao del tablero y a ajustar el
temporizador.

Para probar otras caractersticas

Reemplace los iconos y colores con los que prefiera.

Agregue una cuadrcula para que aparezca alrededor de los iconos.

Agregue un sonido para cuando el jugador encuentre una coincidencia, otro sonido para
cuando destape dos iconos que no coincidan y un tercer sonido para cuando el programa
vuelva a ocultar los iconos.
Aumente el tamao del tablero para complicar ms el juego. (Sugerencia: no basta con solo
agregar filas y columnas a TableLayoutPanel).
Para que el juego sea ms desafiante, oculte el primer icono si el jugador es demasiado lento
y no hace clic en el segundo icono a tiempo.