Inmediatamente aparece un diálogo donde debemos seleccionar el lenguaje a utilizar

(Visual C#) la versión de Framework (por ejemplo 4.5.2), elegiremos crear "Sitio web
vacío de ASP.NET" y la carpeta donde se almacenarán todas las páginas de nuestro
directorio (por ejemplo c:\aspnetya\ejercicio001):
Ahora tenemos nuestro primer sitio web vacío, solo se ha creado un archivo de
configuración llamado Web.config:
Creemos nuestra primer "Web Form" para esto debemos presionar el botón derecho del
mouse donde aparece el nombre de nuestra aplicación "ejercicio001" y en este menú
seleccionar Agregar -> Agregar nuevo elemento...:
En este diálogo seleccionamos el "Visual C#" como lenguaje base, luego "Formulario
Web Forms" y dejamos el nombre del archivo por defecto "Default.aspx":
En la parte izquierda tenemos el ?Cuadro de herramientas?, en esta aparecen las
componentes visuales (Label, TextBox, Button etc.) que tenemos disponibles para crear
nuestro formulario Web.
En el centro aparece la página en vista de código (se puede ver en ?vista de diseño?,
?Dividir? y ?Código?)
En la parte derecha disponemos del ?Explorador de soluciones? donde podemos
identificar el nombre de nuestro sitio web y los archivos contenidos en dicho sitio.
Siempre que creamos una aplicación web debemos crear al menos un formulario web
inicial y lo almacenamos en el archivo Default.aspx (la extensión aspx indica que se
trata de una página dinámica ASP.Net, así como la extensión php indica que su
contenido está programado en PHP)
Además del archivo Default.aspx se crea otro archivo llamada Default.aspx.cs (éste
archivo contiene la codificación en C# de los eventos que definamos a los controles del
formulario)
Otro archivo que veremos más adelante y que se crea en forma automático es el
Web.config.

Para nuestro primer ejemplo implementaremos el ?Hola Mundo? para ello en el

recuadro central seleccionamos la pestaña ?Diseño? y desde el cuadro de herramientas
arrastramos un control de tipo Label. Seguidamente desde el cuadro de propiedades
ubicado en la pare inferior derecha de la pantalla inicializamos la propiedad text con el
mensaje que queremos que muestre nuestra ?Label?, en nuestro caso ?Hola Mundo?.
Una vez modificada la propiedad Text con el mensaje que queremos mostrar y
presionada la tecla Enter podemos ver como se actualiza la ventana de Diseño en la
parte centrar de nuestra pantalla:
Para probar nuestra pequeña aplicación desarrollada debemos presionar el triángulo
verde que se encuentra en la barra de botones, o desde el menú de opciones: Depurar-
>Iniciar depuración, o presionar la tecla ?F5?.
Podemos ver que inmediatamente aparece el navegador configurado por defecto con el
resultado de la ejecución de la página:
El Visual Studio 2015 instala un servidor web propio que está escuchando en un puerto
desocupado. Luego de cerrar la ventana del navegador debemos detener la depuración
de nuestra aplicación para poder modificarla, para esto podemos seleccionar desde el
menú Depurar -> Detener Depuración o presionar desde la barra de botones el
cuadradito morado (luego de esto aparece el ?Cuadro de herramientas?)

Eventos

Modificaremos ahora nuestra aplicación para que muestre la fecha del servidor en una
Label. Cuando desde el navegador solicitamos una página aspx lo primero que se
ejecuta es el evento Page_Load. Para poder definir un método para dicho evento
hacemos doble clic sobre el WebForm con lo que inmediatamente se abre el archivo
Default.aspx.cs donde tenemos dicho método:

using System;
using System.Collections.Generic;
using System.Linq;
using System.Web;
using System.Web.UI;
using System.Web.UI.WebControls;

public partial class _Default : System.Web.UI.Page

{
protected void Page_Load(object sender, EventArgs e)
{

}
}
Luego codificamos dentro del método Page_Load el algoritmo que muestra la fecha
actual del servidor:

using System;
using System.Collections.Generic;
using System.Linq;
using System.Web;
using System.Web.UI;
using System.Web.UI.WebControls;

public partial class _Default : System.Web.UI.Page

{
protected void Page_Load(object sender, EventArgs e)
{
Label1.Text = DateTime.Today.ToString("d");
}
}

Mediante el objeto DateTime y accediendo a la propiedad Today y llamamos al método

ToString pasando un string con una "d" lo que hace que dicho método nos retorne el
dia, mes y año.

Si ejecutamos ahora la aplicación en el navegador se verá reflejada la hora fecha

definida en el servidor web:

Captura del evento click de un objeto de la clase Button.

Para ver como funciona la clase Button cerraremos nuestro primer sitio web y
procederemos a crearemos otros. Para cerrar el sitio actual desde el menú de opciones
elegimos Archivo -> Cerrar Solución:
Ahora damos los mismos pasos que hicimos para crear el sitio ejercicio001 pero lo
llamamos ejercicio002 (almacenarlo en la carpeta c:\aspnetya\ejercicio002):
Creamos también el Web Form Default.aspx:
En nuestro Web Form disponemos un objeto de la clase Label y un objeto de la clase
Button.
La propiedad Text de la Label la inicializamos con el valor ?0? y la propiedad Text del
objeto Button lo inicializamos con la cadena "Sumar".
El objetivo es que cada vez que se presione el botón se actualice el contenido de la
Label con el valor actual más uno.

La forma más sencilla de generar dicho evento es hacer doble clic sobre el objeto
Button. Otra forma es seleccionar dicho objeto (Button) y en la ventana de propiedades
seleccionamos el ícono del "rayo" y hacer doble clic sobre el evento Click:
Luego para el evento Button1_Click actualizamos el contenido de la propiedad Text de
la Label con el valor actual más uno:

using System;
using System.Collections.Generic;
using System.Linq;
using System.Web;
using System.Web.UI;
using System.Web.UI.WebControls;

public partial class _Default : System.Web.UI.Page

{
protected void Page_Load(object sender, EventArgs e)
{

protected void Button1_Click(object sender, EventArgs e)

{
int x = int.Parse(Label1.Text);
x++;
Label1.Text = x.ToString();
 }
}

Debemos convertir a entero el contenido de la Label mediante el método estático Parse

de la clase int:

int x = int.Parse(Label1.Text);

Incrementamos en uno la variable x y la volvemos a mostrar en la Label:

x++;
Label1.Text = x.ToString();

Cuando ejecutamos la página cada vez que presionamos el botón se incrementa en uno
el contenido de la Label:

Controles Label, Button y TextBox.

Hasta ahora hemos utilizado los controles de tipo Label y Button, ahora utilizaremos el
control TextBox. Crearemos una aplicación que nos permita ingresar dos números y
luego en una Label muestre la suma de los mismos.
(Si tenemos un sitio web abierto podemos cerrarlo seleccionando la opción: Archivo-
>Cerrar solución y luego seguir los mismos pasos que vimos anteriormente para crear
un nuevo sitio web ASP.NET)

Crearemos un sitio web llamado ejercicio003 y desarrollaremos la siguiente interfaz de

usuario:
Los textos "Ingrese primer valor:" e "Ingrese segundo valor:" los escribimos
directamente en cambio el Button, los dos TextBox y la Label las arrastramos desde el
Cuadro de herramientas.
Inicializamos la propiedad Text del objeto de tipo Button con la etiqueta "Sumar".

Luego codificamos el evento click del objeto de la clase Button (en este evento debemos
extraer el contenido de los dos controles de tipo TextBox y proceder a convertirlos a
tipo de dato entero y sumarlos):
using System;
using System.Collections.Generic;
using System.Linq;
using System.Web;
using System.Web.UI;
using System.Web.UI.WebControls;

public partial class _Default : System.Web.UI.Page

{
protected void Page_Load(object sender, EventArgs e)
{

protected void Button1_Click(object sender, EventArgs e)

{
int x1 = int.Parse(TextBox1.Text);
 int x2 = int.Parse(TextBox2.Text);
int suma = x1 + x2;
Label1.Text = "La suma de los dos valores es:" + suma;
}
}

La clase int tiene un método estático llamado Parse y que tiene por objetivo recibir un
String y retornar el valor del mismo convertido a entero.
Luego de sumar mostramos en la Label el resultado de la suma de los dos valores
ingresados (al utilizar el operador + el string y el entero tenemos que se convierte suma
automáticamente a string)

Control RadioButton.

Para probar el funcionamiento del control RadioButton crearemos un nuevo sitio web
llamado ejercicio004.
Crearemos una interfaz de usuario similar al problema anterior, con la salvedad que le
agregaremos dos controles de tipo RadioButton para poder indicar si queremos sumar o
restar los valores ingresados:

Como vemos agregamos dos controles de tipo RadioButton, inicializamos las

propiedades Text con los textos ?Sumar? y ?Restar?. Luego para indicar que los
controles RadioButton están en el mismo grupo debemos inicializar la propiedad
GroupName con el mismo valor (con esto logramos que al seleccionar un RadioButton
el otro se desmarca), si nos olvidamos inicializar la propiedad GroupName luego los
dos controles de tipo RadioButton se podrán seleccionar en forma simultánea (podemos
asignar la propiedad GroupName de ambos controles con el valor "operacion").
Si queremos que alguno de los dos RadioButton aparezca seleccionado por defecto
debemos inicializar la propiedad Checked con el valor true.

La codificación del evento click del objeto Button1 es el siguiente:

using System;
using System.Collections.Generic;
using System.Linq;
using System.Web;
using System.Web.UI;
using System.Web.UI.WebControls;

public partial class _Default : System.Web.UI.Page

{
protected void Page_Load(object sender, EventArgs e)
{

protected void Button1_Click(object sender, EventArgs e)

{
int x1 = int.Parse(TextBox1.Text);
int x2 = int.Parse(TextBox2.Text);
int resultado = x1 + x2;
if (RadioButton1.Checked)
{
resultado = x1 + x2;
Label1.Text = "La suma de los dos valores es:" +
resultado;
}
else
if (RadioButton2.Checked)
{
resultado = x1 - x2;
Label1.Text = "La diferencia de los dos valores es:" +
resultado;
}
}
}

Cuando se presiona el botón se ejecuta el método Button1_Click donde primero

extraemos el contenido de los dos controles TextBox y los convertimos a entero.
Verificamos con if cual de los dos controles RadioButton se encuentra seleccionado. La
propiedad Checked del RadioButton indica si está seleccionado el control o no.
Control CheckBox.

Los controles CheckBox permiten que más de uno sea seleccionado. Similar a los
controles RadioButton tiene dos estados (seleccionado o no seleccionado) y esto lo
sabemos según el estado de la propiedad Checked.
Codificaremos un nuevo sitio web llamado ejercicio005 que permita cargar dos valores
y luego calcule la suma y/o resta de los valores ingresados. Como podemos seleccionar
ambas operaciones utilizaremos los controles de tipo CheckBox.
La interfaz visual es la siguiente:
La codificación del evento click del botón es:

using System;
using System.Collections.Generic;
using System.Linq;
using System.Web;
using System.Web.UI;
using System.Web.UI.WebControls;

public partial class _Default : System.Web.UI.Page

{
protected void Page_Load(object sender, EventArgs e)
{

protected void Button1_Click(object sender, EventArgs e)

{
int x1 = int.Parse(TextBox1.Text);
int x2 = int.Parse(TextBox2.Text);
Label1.Text = "";
int resultado;
if (CheckBox1.Checked)
{
resultado = x1 + x2;
this.Label1.Text = "La suma de los dos valores es:" +
resultado + "<br>";
}
if (CheckBox2.Checked)
{
resultado = x1 - x2;
Label1.Text = Label1.Text + "La diferencia de los dos
valores es:" + resultado;
 }
}
}

Disponemos dos if a la misma altura ya que ambos CheckBox pueden estar

seleccionados. Previo a los if borramos el contenido de la Label en el caso que tenga el
resultado de operaciones anteriores.
Luego en el primer if verificamos si el primer CheckBox está seleccionado y
procedemos a inicializar la propiedad Text de la Label con el resultado de la suma de
los dos valores ingresados, seguidamente verificamos con un segundo if si el siguiente
CheckBox está seleccionado, en caso afirmativo agregamos al contenido actual de la
Label el resultado de la diferencia de los valores ingresados (Como vemos podemos
añadir elementos HTML a la propiedad Text de una Label, luego estas serán
interpretadas por el navegador)

En el navegador tenemos el siguiente resultado:

Control ListBox.

El control ListBox permite crear una lista de valores.

La propiedad Item permite definir los miembros de la lista (cada item define las
propiedades Text (valor a mostrar), Value (valor a retornar en caso de estar
seleccionado), Selected (con un valor lógico))
Otra propiedad muy importante del control ListBox es SelectionMode, esta admite dos
valores: Single o Multiple.
Crearemos un sitio web (ejercicio006) que permita cargar dos valores y mediante un
control ListBox poder seleccionar si queremos sumar, restar, multiplicar o dividir
dichos valores (como podemos seleccionar varias operaciones en forma simultánea
configuraremos la propiedad SelectionMode del ListBox con el valor Multiple)
cargamos en la propiedad Items las cuatro operaciones posibles.
Luego la interfaz visual a crear es la siguiente (insertamos también una Label luego del
botón ?Calcular?, con el objetivo de mostrar los resultados):

Cuando se presiona el botón calcular verificamos cual de las opciones está seleccionada
y procedemos a calcular y mostrar los resultados.

using System;
using System.Collections.Generic;
using System.Linq;
using System.Web;
using System.Web.UI;
using System.Web.UI.WebControls;

public partial class _Default : System.Web.UI.Page

{
 protected void Page_Load(object sender, EventArgs e)
{

protected void Button1_Click(object sender, EventArgs e)

{
int x1 = int.Parse(TextBox1.Text);
int x2 = int.Parse(TextBox2.Text);
Label1.Text = "";
if (ListBox1.Items[0].Selected)
{
int suma = x1 + x2;
Label1.Text = "La suma es:" + suma + "<br>";
}
if (ListBox1.Items[1].Selected)
{
int resta = x1 - x2;
Label1.Text += "La diferencia:" + resta + "<br>";
}
if (ListBox1.Items[2].Selected)
{
int multi = x1 * x2;
Label1.Text += "El producto:" + multi + "<br>";
}
if (ListBox1.Items[3].Selected)
{
int divi = x1 / x2;
Label1.Text += "La division:" + divi + "<br>";
}
}
}

Como podemos ver primero vaciamos el contenido de la Label1 y procedemos mediante

cuatro if a verificar cuales de los elementos del ListBox se encuentran seleccionados:

if (ListBox1.Items[0].Selected)
Si por ejemplo el primer elemento del ListBox se encuentra seleccionado procedemos a
sumar los dos valores almacenados en los TextBox y los agregamos a la Label:
int suma = x1 + x2;
Label1.Text = "La suma es:" + suma + "<br>";

En el navegador tenemos como resultado:

Control DropDownList.

El control DropDownList permite crear una lista de valores y luego seleccionar solo uno
de ellos, esta es la diferencia fundamental con el control ListBox.

Para probar el DropDownList implementaremos el problema propuesto con el control

ListBox, ahora la interfaz es la siguiente (crear un sitio web llamado ejercicio007):
Cargamos las cuatro operaciones básicas en el control DropDownList y para el evento
clic del botón tenemos que codificar:

using System;
using System.Collections.Generic;
using System.Linq;
using System.Web;
using System.Web.UI;
using System.Web.UI.WebControls;

public partial class _Default : System.Web.UI.Page

{
protected void Page_Load(object sender, EventArgs e)
{

protected void Button1_Click(object sender, EventArgs e)

{
int x1 = int.Parse(TextBox1.Text);
int x2 = int.Parse(TextBox2.Text);
Label1.Text = "";
 if (DropDownList1.Items[0].Selected)
{
int suma = x1 + x2;
Label1.Text = "La suma es:" + suma + "<br>";
}
else
if (DropDownList1.Items[1].Selected)
{
int resta = x1 - x2;
Label1.Text = "La diferencia:" + resta + "<br>";
}
else
if (DropDownList1.Items[2].Selected)
{
int multi = x1 * x2;
Label1.Text = "El producto:" + multi + "<br>";
}
else
if (DropDownList1.Items[3].Selected)
{
int divi = x1 / x2;
Label1.Text = "La division:" + divi + "<br>";
}
}
}

Como solo un elemento del control DropDowList puede estar seleccionado disponemos
una serie de if/else if para verificar cual de ellos es el seleccionado. Cuando
identificamos el item seleccionado procedemos a efectuar el cálculo correspondiente y
mostrarlo en la Label.

En el navegador tenemos como resultado:

Ejercicios propuestos
1 ? Confeccionar una página que solicite el ingreso del nombre y apellido de una
persona (cada elemento en un TextBox), luego al presionar un botón mostrar en una
label si alguno de los datos no se cargó.

2 ? Confeccionar una página que muestre un examen múltiple choice (disponer 4

preguntas y tres respuestas posibles por pregunta) utilizar controles de tipo RadioButton
para la selección de la respuesta correcta.
Mostrar la cantidad de respuestas correctas luego que se presiona un botón.

3 ? Disponer un conjunto de RadioButton agrupados. Mostrar en las leyendas de cada

RadioButton distintos buscadores (Google, Bing, Yahoo etc.)
Cuando se presione un botón redireccionar a dicho servidor (para redireccionar
debemos utilizar la siguiente sintaxis
Response.Redirect("http://www.google.com.ar");

4 ? Confeccionar el siguiente formulario para registrarse en un sitio web (utilizar

controles de la pestaña estandar)
En una Label mostrar los datos cargados en cada control (disponer la Label al final del
formulario) Hacer por lo menos 5 validaciones y mostrar mensajes de errores en una
Label.

Configurar el IDE
Al iniciar Visual Studio por primera vez, Visual Studio le pedirá que inicie sesión con
una cuenta de servicio de Microsoft (MSA). Inicio de sesión en Visual Studio. No es
necesario iniciar sesión y puede hacerlo más tarde.

Al iniciar Visual Studio, debe elegir una combinación de configuración que aplique un
conjunto de personalizaciones predefinidas al IDE. Cada combinación de opciones se ha
diseñado para que el desarrollo de aplicaciones le resulte más sencillo.

Este tutorial asume que aplicó la Configuración general de desarrollo, lo que implica
la menor cantidad de personalización del IDE. Si ya eligió C# o Visual Basic (ambas
son opciones válidas), no debe cambiar la configuración. Si desea cambiar la
configuración, puede usar el Asistente para importar y exportar configuraciones.
Consulte Personalizar la configuración de desarrollo en Visual Studio.

Después de abrir Visual Studio, puede identificar las ventanas de herramientas, los
menús y barras de herramientas y el espacio de la ventana principal. Las ventanas de
herramientas se acoplan a los lados izquierdo y derecho de la ventana de la aplicación,
con Inicio rápido, la barra de menús y la barra de herramientas estándar en la parte
superior. En el centro de la ventana de la aplicación está la Página principal. Cuando
se carga una solución o un proyecto, los editores y diseñadores aparecen en el espacio
donde está la página de inicio. Cuando desarrolle una aplicación, pasará la mayor parte
del tiempo en esta área central.

Figura 2: IDE de Visual Studio

Puede crear personalizaciones adicionales en Visual Studio, como cambiar el tipo de

fuente y el tamaño del texto en el editor o el tema de color del IDE, mediante el cuadro
de diálogo Opciones. Dependiendo de la combinación de opciones que haya aplicado,
puede que algunos elementos de este cuadro de diálogo no aparezcan automáticamente.
Puede asegurarse de que aparezcan todas las opciones posibles activando la casilla
Mostrar todas las configuraciones.

Figura 3: Cuadro de diálogo Opciones

En este ejemplo, cambiará el tema de color del IDE de claro a oscuro. Puede continuar
para crear un proyecto si lo desea.

Para cambiar el tema de color del IDE

1. Para abrir el cuadro de diálogo Opciones, seleccione el menú Herramientas en

la parte superior y, luego, el elemento Opciones....

2. Cambie el tema de color a Oscuro y, a continuación, haga clic en Aceptar.

Los colores de Visual Studio deben coincidir con la imagen siguiente:

El tema de color usado para las imágenes en el resto de este tutorial es el tema claro.
Para obtener más información sobre cómo personalizar el IDE, consulte Personalizar la
configuración de desarrollo de Visual Studio.
Crear una aplicación sencilla
Crear el proyecto

Cuando cree una aplicación en Visual Studio, primero creará un proyecto y una
solución. Para este ejemplo, creará un proyecto de Windows Presentation Foundation
(WPF).

Para crear el proyecto de WPF

1. Cree un nuevo proyecto. En la barra de menús, elija Archivo, Nuevo,

Proyecto....

También puede escribir Nuevo proyecto en el cuadro Inicio rápido para hacer
lo mismo.

2. Para elegir la plantilla Aplicación WPF de Visual C# o Visual Basic, elija en el

panel izquierdo Instaladas, Plantillas, Visual C#, Windows, por ejemplo y,
después, elija Aplicación WPF en el panel central. Asigne al proyecto el nombre
HelloWPFApp en la parte inferior del cuadro de diálogo Nuevo proyecto.
 O

Visual Studio crea el proyecto HelloWPFApp y la solución y el Explorador de

soluciones muestra los distintos archivos. WPF Designer muestra una vista de diseño y
una vista XAML de MainWindow.xaml en una vista en dos paneles. Puede deslizar el
divisor para mostrar más o menos de cualquiera de las vistas. Puede elegir ver solo la
vista visual o solo la vista XAML. (Para obtener más información, vea Diseñador WPF
para desarrolladores de Windows Forms). Los elementos siguientes aparecen en el
Explorador de soluciones:

Figura 5: Elementos del proyecto

Después de crear el proyecto, puede personalizarlo. Mediante la ventana Propiedades,

(que se encuentra en el menú Ver), puede mostrar y cambiar las opciones de los
elementos de proyecto, controles y otros elementos de una aplicación. Mediante las
propiedades del proyecto y las páginas de propiedades, puede mostrar y cambiar las
opciones de proyectos y soluciones.

Para cambiar el nombre de MainWindow.xaml

1. En el siguiente procedimiento, se asignará un nombre más específico a

MainWindow. En el Explorador de soluciones, seleccione MainWindow.xaml.
Debería ver la ventana Propiedades, pero, si no es así, elija el menú Ver y el
elemento Ventana de propiedades. Cambie la propiedad Nombre de archivo a
Greetings.xaml.
 El Explorador de soluciones muestra que el nombre del archivo es ahora
Greetings.xaml y, si expande el nodo MainWindow.xaml (poniendo el foco en el
nodo y presionando la tecla flecha derecha), verá que el nombre de
MainWindow.xaml.vb o MainWindow.xaml.cs es ahora Greetings.xaml.vb o
Greetings.xaml.cs. Este archivo de código está anidado bajo el nodo del archivo
.xaml para mostrar que están muy relacionados entre sí.

Advertencia

Este cambio produce un error que aprenderá a depurar y corregir en un paso

posterior.

2. En el Explorador de soluciones, abra Greetings.xaml en la vista del diseñador

(presionando la tecla Entrar mientras el nodo tiene el foco) y seleccione la barra
de título de la ventana con el mouse.
3. En la ventana Propiedades, cambie el valor de la propiedad Title a Greetings.

En la barra de título de MainWindow.xaml se lee ahora Greetings.

Diseñar la interfaz de usuario (IU)

Agregaremos tres tipos de controles a esta aplicación: un control TextBlock, dos

controles RadioButton y un control Button.

Para agregar un control TextBlock

1. Abra la ventana Cuadro de herramientas eligiendo el menú Ver y el elemento

Cuadro de herramientas.
2. En el Cuadro de herramientas, busque el control TextBlock.

3. Agregue un control TextBlock a la superficie de diseño. Para ello, elija el

elemento TextBlock y arrástrelo a la ventana en la superficie de diseño. Centre
el control cerca de la parte superior de la ventana.

La ventana debería ser similar a la siguiente ilustración:

Figura 7: Ventana Greetings con el control TextBlock

El marcado XAML debe tener un aspecto similar al siguiente:

<TextBlock HorizontalAlignment="Center" TextWrapping="Wrap"

VerticalAlignment="Center" RenderTransformOrigin="4.08,2.312"
Margin="237,57,221,238"><Run
Text="TextBlock"/><InlineUIContainer><TextBlock TextWrapping="Wrap"
Text="TextBlock"/>

Para personalizar el texto en el bloque de texto

1. En la vista XAML, busque el marcado de TextBlock y cambie el atributo de

texto: Text=”Select a message option and then choose the Display
button.”
2. Si TextBlock no se expande para ajustarse a la vista Diseño, amplíe el control
TextBlock (con las asas de captación de los bordes) para que se muestre todo el
texto.
3. Guarde los cambios presionando Ctrl-s o usando el elemento de menú Archivo.

A continuación, agregará dos controles RadioButton al formulario.

Para agregar botones de radio

1. En el Cuadro de herramientas, busque el control RadioButton.

 2. Agregue dos controles RadioButton a la superficie de diseño eligiendo el
elemento RadioButton y arrastrándolo a la ventana de la superficie de diseño dos
veces. Además, mueva los botones (seleccionándolos y usando las teclas de
dirección) para que los botones aparezcan uno junto al otro bajo el control
TextBlock.

La ventana debe ser similar a la que se muestra a continuación:

Figura 8: RadioButtons en la ventana Greetings.

3. En la ventana Propiedades del control RadioButton izquierdo, cambie la

propiedad Name (la propiedad situada en la parte superior de la ventana
Propiedades) a RadioButton1. Asegúrese de que seleccionó RadioButton y no
la cuadrícula de fondo del formulario; el campo Tipo de la ventana de
propiedades del campo Nombre debe indicar RadioButton.
4. En la ventana Propiedades del control RadioButton derecho, cambie la
propiedad Name a RadioButton2 y después guarde los cambios presionando
Ctrl-s o usando el elemento de menú Archivo. Asegúrese de haber seleccionado
RadioButton antes de cambiar y guardar.

Ahora puede agregar el texto para mostrar de cada control RadioButton. El

procedimiento siguiente actualiza la propiedad Content de un control RadioButton.

Para agregar el texto para mostrar de cada botón de radio

1. En la superficie de diseño, abra el menú contextual de RadioButton1

presionando el botón secundario del mouse mientras selecciona RadioButton1,
elija Editar texto y, luego, escriba Hello.
 2. Abra el menú contextual de RadioButton2 presionando el botón secundario del
mouse mientras selecciona RadioButton2, elija Editar texto y, luego, escriba
Goodbye.

El último elemento de la interfaz de usuario que agregará es un control Button.

Para agregar el control Button

1. En Cuadro de herramientas, busque el control Botón y, después, agréguelo a

la superficie de diseño en los controles RadioButton seleccionando el botón y
arrastrándolo al formulario de la vista de diseño.
2. En la vista XAML, cambie el valor de Contenido del control Botón de
Content=”Button” a Content=”Display” y después guarde los cambios (Ctrl-
s o use el menú Archivo.

El marcado debería ser similar al del ejemplo siguiente: <Button

Content="Display" HorizontalAlignment="Left"
VerticalAlignment="Top" Width="75" Margin="215,204,0,0"/>

La ventana debería parecerse a la de la siguiente ilustración.

Figura 9: Interfaz de usuario final de Greetings

Agregar código al botón Mostrar

Cuando se ejecuta esta aplicación, aparece un cuadro de mensaje después de que un

usuario elija un botón de radio y, a continuación, el botón Mostrar. Aparecerá un
cuadro de mensaje para Hello y otro para Goodbye. Para crear este comportamiento,
debe agregar código al evento Button_Click en Greetings.xaml.vb o Greetings.xaml.cs.

Agregar código para mostrar cuadros de mensaje

1. En la superficie de diseño, haga doble clic en el botón Mostrar.

Se abre Greetings.xaml.vb o Greetings.xaml.cs con el cursor en el evento

Button_Click. También puede agregar un controlador de eventos clic de la
siguiente manera (si el código pegado tiene una línea en zigzag roja debajo de
algún nombre, probablemente no seleccionó los controles RadioButton en la
superficie de diseño y les cambió el nombre):

Para Visual Basic, el controlador de eventos debe ser similar a:

VB

Private Sub Button_Click_1(sender As Object, e As

RoutedEventArgs)

End Sub

Para Visual C#, el controlador de eventos debe ser similar a:

C#

private void Button_Click_1(object sender, RoutedEventArgs e)

{

2. Para Visual Basic, escriba el código siguiente:

VB

If RadioButton1.IsChecked = True Then

MessageBox.Show("Hello.")
Else RadioButton2.IsChecked = True
MessageBox.Show("Goodbye.")
End If

Para Visual C#, escriba el código siguiente:

if (RadioButton1.IsChecked == true)
{
MessageBox.Show("Hello.");
}
else
{
RadioButton2.IsChecked = true;
 MessageBox.Show("Goodbye.");
}

3. Guarde la aplicación.

Depurar y probar la aplicación

A continuación, depurará la aplicación para buscar errores y probar que los dos cuadros
de mensaje aparecen correctamente. Las siguientes instrucciones indican cómo compilar
e iniciar el depurador, pero más adelante podría leer Compilar una aplicación de WPF
(WPF) y Depurar WPF para obtener más información.

Buscar y corregir errores

En este paso, buscará el error que se produjo anteriormente al cambiar el nombre del
archivo XAML de la ventana principal.

Para iniciar la depuración y buscar el error

1. Inicie el depurador seleccionando Depurar y después Iniciar depuración.

Aparece un cuadro de diálogo que indica que se ha producido una excepción

IOException: No se encuentra el recurso ‘mainwindow.xaml’.

2. Elija el botón Aceptar y después detenga el depurador.

Hemos cambiado el nombre de Mainwindow.xaml a Greetings.xaml al comienzo de
este tutorial, pero el código todavía hace referencia a Mainwindow.xaml como el URI
de inicio de la aplicación, por lo que el proyecto no puede iniciarse.

Para especificar Greetings.xaml como el URI de inicio

1. En el Explorador de soluciones, abra el archivo App.xaml (en el proyecto de

C#) o el archivo Application.xaml (en el proyecto de Visual Basic) en la vista
XAML (no puede abrirse en la vista Diseño). Para ello, seleccione el archivo y
presione Entrar o haga doble clic en él.
2. Cambie StartupUri="MainWindow.xaml" a StartupUri="Greetings.xaml"
y después guarde los cambios con Ctrl-s.

Vuelva a iniciar el depurador (presione F5). Debería ver la ventana Greetings de la

aplicación.

Para depurar con puntos de interrupción

Agregando algunos puntos de interrupción puede probar el código durante la

depuración. Puede agregar puntos de interrupción eligiendo Depurar en el menú
principal, luego Alternar puntos de interrupción o haciendo clic en el margen
izquierdo del editor junto a la línea de código donde desea que se produzca la
interrupción.

Para agregar puntos de interrupción

1. Abra Greetings.xaml.vb o Greetings.xaml.cs y seleccione la línea siguiente:

MessageBox.Show("Hello.")
2. Agregue un punto de interrupción en el menú seleccionando Depurar y después
Alternar puntos de interrupción.
 Aparece un círculo rojo al lado de la línea de código en el margen izquierdo de
la ventana del editor.

3. Seleccione la línea siguiente: MessageBox.Show("Goodbye.").

4. Presione la tecla F9 para agregar un punto de interrupción y después presione la
tecla F5 para iniciar la depuración.
5. En la ventana Greetings, elija el botón de radio Hello y después elija el botón
Mostrar.

La línea MessageBox.Show("Hello.") se resalta en amarillo. En la parte

inferior del IDE, las ventanas Automático, Variables locales e Inspección están
acopladas juntas en el lado izquierdo, mientras que las ventanas Pila de
llamadas, Puntos de interrupción, Comando, Inmediato y Salida están acopladas
juntas en el lado derecho.

6. En la barra de menús, elija Depurar, Paso a paso para salir.

La aplicación reanuda la ejecución y aparece un cuadro de mensaje con la

palabra “Hello”.

7. Elija el botón Aceptar en el cuadro de mensaje para cerrarlo.

8. En la ventana Greetings, elija el botón de radio Goodbye y después elija el
botón Mostrar.

La línea MessageBox.Show("Goodbye.") se resalta en amarillo.

 9. Elija la tecla F5 para continuar con la depuración. Cuando aparezca el cuadro de
mensaje, elija el botón Aceptar en el cuadro de mensaje para cerrarlo.
10. Presione las teclas MAYÚS + F5 (presione MAYÚS en primer lugar y, mientras
la mantiene presionada, presione F5) para detener la depuración.
11. En la barra de menús, elija Depurar, Deshabilitar todos los puntos de
interrupción.

Compilar una versión de lanzamiento de la aplicación

Ahora que ha comprobado que todo funciona, puede preparar una versión de
lanzamiento de la aplicación.

Para limpiar los archivos de solución y crear una versión de lanzamiento

1. En el menú principal, seleccione Compilar y, después, Limpiar solución para

eliminar los archivos intermedios y de salida que se crearon durante las
compilaciones anteriores. Esto no es necesario, pero se limpian las salidas de
compilación de depuración.

2. Cambie la configuración de compilación de HelloWPFApp de Depurar a

Liberar mediante el control de lista desplegable en la barra de herramientas
(dice "Depurar" actualmente).
 3. Compile la solución con Compilar, Compilar solución o presione la tecla F6.

¡Enhorabuena por completar este tutorial! Puede encontrar el .exe creado en el

directorio de soluciones y proyectos (... \HelloWPFApp\HelloWPFApp\bin\Release\).
Si desea explorar más ejemplos, vea Ejemplos de Visual Studio.