Tutorial: Crear una aplicacin sencilla con Visual C# o

Visual Basic
(http://msdn.microsoft.com/es-gt/library/jj153219.aspx)
Tras completar este tutorial, estar familiarizado con muchas de las herramientas, cuadros
de dilogo y diseadores que puede utilizar para desarrollar aplicaciones con Visual
Studio. Crear una aplicacin sencilla de estilo Hola a todos, disear la interfaz de
usuario, agregar cdigo y depurar errores, mientras aprende a trabajar en el entorno de
desarrollo integrado (IDE).
Este tema contiene las siguientes secciones:
Configurar el IDE
Crear una aplicacin sencilla
Depurar y probar la aplicacin
Configurar el IDE
Cuando inicie Visual Studio por primera vez, deber elegir una combinacin de opciones
que aplica un conjunto de personalizaciones predefinidas al IDE. Cada combinacin de
valores se ha diseado para que sea ms sencillo desarrollar aplicaciones.
Figura 1: Cuadro de dilogo Configuracin del entorno predeterminada
Nota
Este tutorial se basa en Visual Studio Professional, que proporciona la plantilla de
aplicacin WPF en la que crear el proyecto de este tutorial. Visual Studio Express para
escritorio de Windows tambin proporciona esa plantilla, pero no as Visual Studio
Express para Windows y Visual Studio Express para Web. Para obtener informacin
preliminar sobre cmo utilizar Visual Studio Express para Windows, visite el Centro de
desarrollo de software para aplicaciones de la Tienda Windows. Para obtener informacin
preliminar sobre cmo utilizar Visual Studio Express para Web, vea Empezar con
ASP.NET. Asimismo la edicin de Visual Studio y la configuracin que utilice
determinan los nombres y las ubicaciones de algunos elementos de la interfaz de
usuario. Vea Personalizar la configuracin de desarrollo en Visual Studio.

Este tutorial se ha creado con la Configuracin general de desarrollo aplicada, lo que
implica la menor cantidad de personalizacin del IDE. Puede cambiar la combinacin de
opciones mediante el Asistente para importar y exportar
configuraciones. Vea Personalizar la configuracin de desarrollo en Visual Studio.
Despus de abrir Visual Studio, puede identificar las ventanas de herramientas, los mens 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 aplicacin, con Inicio rpido, la
barra de mens y la barra de herramientas estndar en la parte superior. En el centro de la
ventana de la aplicacin est la Pgina principal. Cuando se carga una solucin o un
proyecto, los editores y diseadores aparecen en este espacio. Cuando desarrolle una
aplicacin, 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 tamao del texto en el editor o el tema de color del IDE, mediante el cuadro de
dilogo Opciones. Dependiendo de la combinacin de opciones que haya aplicado, puede
que algunos elementos de este cuadro de dilogo no aparezcan automticamente. Puede
asegurarse de que aparezcan todas las opciones posibles activando la casilla Mostrar todas
las configuraciones.
Figura 3: Cuadro de dilogo Opciones

En este ejemplo, cambiar el tema de color del IDE de claro a oscuro.
Para cambiar el tema de color del IDE
1. Abra el cuadro de dilogo Opciones.

2. Cambie el tema de color a Oscuro y, a continuacin, haga clic en Aceptar.

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

El tema de color usado en el resto de este tutorial es el tema de color claro. Para obtener
ms informacin acerca de cmo personalizar el IDE, vea Personalizar la configuracin de
desarrollo en Visual Studio.
Crear una aplicacin sencilla
Crear el proyecto
Cuando cree una aplicacin en Visual Studio, primero crear un proyecto y una
solucin. Para este ejemplo, crear una solucin de Windows Presentation Foundation.
Para crear el proyecto de WPF
1. Cree un nuevo proyecto. En la barra de mens, elija Archivo, Nuevo, Proyecto.

Tambin puede escribir Nuevo proyecto en el cuadro Inicio rpido.

2. Elija la plantilla de la aplicacin WPF de Visual C# o Visual Basic y despus asigne
el nombre HelloWPFApp al proyecto.

OR

Se crea el proyecto y la solucin HelloWPFApp y los distintos archivos aparecen en
el Explorador de soluciones. WPF Designer muestra una vista de diseo y una vista
XAML de MainWindow.xaml en una vista en dos paneles. (Para obtener ms informacin,
vea WPF Designer para desarrolladores de Windows Forms). Los elementos siguientes
aparecen en el Explorador de soluciones:
Figura 5: Elementos del proyecto

Despus de crear el proyecto, puede personalizarlo. Mediante la ventana Propiedades,
puede mostrar y cambiar las opciones de los elementos de proyecto, controles y otros
elementos de una aplicacin. Mediante las propiedades del proyecto y las pginas 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 ms especfico a
MainWindow. En el Explorador de soluciones, seleccione
MainWindow.xaml. Debera ver la ventana Propiedades para ese archivo debajo de
la ventana. Si no ve la ventana Propiedades, seleccione MainWindow.xaml en
el Explorador de soluciones, abra el men contextual (haciendo clic con el botn
secundario) y seleccione Propiedades. Cambie la propiedad Nombre de
archivo a Greetings.xaml.

El Explorador de soluciones muestra que el nombre de archivo es ahora
Greetings.xaml y que el nombre MainWindow.xaml.vb o MainWindow.xaml.cs es
ahora Greetings.xaml.vb o Greetings.xaml.cs.
2. En el Explorador de soluciones, abra Greetings.xaml en la vista del diseador y
seleccione la barra de ttulo de la ventana.
3. En la ventana Propiedades, cambie el valor de la propiedad Title a Greetings.
Precaucin
Este cambio produce un error que aprender a depurar y corregir en un paso posterior.
En la barra de ttulo de MainWindow.xaml se lee ahora Greetings.
Disear la interfaz de usuario (IU)
Agregaremos tres tipos de controles a esta aplicacin: un control TextBlock, dos controles
RadioButton y un control Button.
Para agregar un control TextBlock
1. Abra la ventana Cuadro de herramientas. Debe estar a la izquierda de la ventana
del diseador. Tambin puede abrirla desde el men Ver o escribiendo
CTRL+ALT+X.
2. En el Cuadro de herramientas, busque el control TextBlock.

3. Agregue un control TextBlock a la superficie de diseo y centre el control cerca de
la parte superior de la ventana.
La ventana debera ser similar a la siguiente ilustracin:
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 Diseo, ample el control
TextBlock para que se muestre todo el texto.
3. Guarde los cambios.
A continuacin, 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 diseo y muvalos de modo
que aparezcan en paralelo bajo el control TextBlock.
La ventana debe ser similar a la que se muestra a continuacin:
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) aRadioButton1.
4. En la ventana Propiedades del control RadioButton derecho, cambie la
propiedad Name a RadioButton2 y despus guarde los cambios.
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 botn de radio
1. En la superficie de diseo, abra el men contextual de RadioButton1, elija Editar
texto y, a continuacin, escriba Hello.
2. Abra el men contextual de RadioButton2, elija Editar texto y, a continuacin,
escriba Goodbye.
El ltimo elemento de la interfaz de usuario que agregar es un control Button.
Para agregar el control Button
1. En el Cuadro de herramientas busque el control Button y despus agrguelo a la
superficie de diseo, bajo los controles RadioButton.
2. En la vista XAML, cambie el valor de Content del control Button
de Content=Button a Content=Display y despus guarde los cambios.
El marcado debera ser similar al del ejemplo siguiente: <Button
Content="Display" HorizontalAlignment="Left"
VerticalAlignment="Top" Width="75" Margin="215,204,0,0"/>
La ventana debera parecerse a la de la siguiente ilustracin.
Figura 9: Interfaz de usuario final de Greetings

Agregar cdigo al botn Mostrar
Cuando se ejecuta esta aplicacin, aparece un cuadro de mensaje despus de que un usuario
elija un botn de radio y, a continuacin, el botn Mostrar. Aparecer un cuadro de
mensaje para Hello y otro para Goodbye. Para crear este comportamiento, debe agregar
cdigo al evento Button_Click en Greetings.xaml.vb o Greetings.xaml.cs.
Agregar cdigo para mostrar cuadros de mensaje
1. En la superficie de diseo, haga doble clic en el botn Mostrar.
Se abre Greetings.xaml.vb o Greetings.xaml.cs con el cursor en el evento
Button_Click. Tambin puede agregar un controlador de eventos clic del modo
siguiente:
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 cdigo siguiente:
VB
If RadioButton1.IsChecked = True Then
MessageBox.Show("Hello.")
Else RadioButton2.IsChecked = True
MessageBox.Show("Goodbye.")
End If

Para Visual C#, escriba el cdigo siguiente:
if (RadioButton1.IsChecked == true)
{
MessageBox.Show("Hello.");
}
else
{
RadioButton2.IsChecked = true;
MessageBox.Show("Goodbye.");
}
3. Guarde la aplicacin.
Depurar y probar la aplicacin
A continuacin, depurar la aplicacin para buscar errores y probar que los dos cuadros de
mensaje aparecen correctamente. Para obtener ms informacin, vea Compilar una
aplicacin de WPF (WPF) y Depurar WPF.
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 depuracin y buscar el error
1. Inicie el depurador seleccionando Depurar y despus Iniciar depuracin.

Aparece un cuadro de dilogo que indica que se ha producido una excepcin
IOException: No se encuentra el recurso mainwindow.xaml.
2. Elija el botn Aceptar y despus detenga el depurador.

Hemos cambiado el nombre Mainwindow.xaml a Greetings.xaml al comienzo de este
tutorial, pero la solucin todava apunta a Mainwindow.xaml como el URI de inicio de la
aplicacin, 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 Diseo).
2. Cambie StartupUri="MainWindow.xaml" a StartupUri="Greetings.xam
l" y despus guarde los cambios.
Inicie otra vez el depurador. Debera ver la ventana Greetings de la aplicacin.
Para depurar con puntos de interrupcin
Agregando algunos puntos de interrupcin puede probar el cdigo durante la
depuracin. Puede agregar puntos de interrupcin eligiendo Depurar, Alternar puntos de
interrupcin en la barra de mens o haciendo clic en el margen izquierdo del editor junto a
la lnea de cdigo donde desea que se produzca la interrupcin.
Para agregar puntos de interrupcin
1. Abra Greetings.xaml.vb o Greetings.xaml.cs y seleccione la lnea
siguiente: MessageBox.Show("Hello.")
2. Agregue un punto de interrupcin en el men seleccionando Depurar y
despus Alternar puntos de interrupcin.

Aparece un crculo rojo al lado de la lnea de cdigo en el margen izquierdo de la
ventana del editor.
3. Seleccione la lnea siguiente: MessageBox.Show("Goodbye.").
4. Elija la tecla F9 para agregar un punto de interrupcin y despus elija la tecla F5
para iniciar la depuracin.
5. En la ventana Greetings, elija el botn de radio Hello y despus elija el
botn Mostrar.
La lnea MessageBox.Show("Hello.") se resalta en amarillo. En la parte
inferior del IDE, las ventanas Automtico, Variables locales e Inspeccin estn
acopladas juntas en el lado izquierdo, y las ventanas Pila de llamadas, Puntos de
interrupcin, Comando, Inmediato y Resultados estn acopladas juntas en el lado
derecho.
6. En la barra de mens, elija Depurar, Paso a paso para salir.
La aplicacin reanuda la ejecucin y aparece un cuadro de mensaje con la palabra
Hello.
7. Elija el botn Aceptar en el cuadro de mensaje para cerrarlo.
8. En la ventana Greetings, elija el botn de radio Goodbye y despus elija el
botn Mostrar.
La lnea MessageBox.Show("Goodbye.") se resalta en amarillo.
9. Elija la tecla F5 para continuar con la depuracin. Cuando aparezca el cuadro de
mensaje, elija el botn Aceptar en el cuadro de mensaje para cerrarlo.
10. Elija las teclas MAYS + F5 para detener la depuracin.
11. En la barra de mens, elija Depurar, Deshabilitar todos los puntos de
interrupcin.


Crear una versin de lanzamiento de la aplicacin
Ahora que ha comprobado que todo funciona, puede preparar una versin de lanzamiento
de la aplicacin.
Para limpiar los archivos de solucin y crear una versin de
lanzamiento
1. Seleccione Compilar y despus Limpiar solucin para eliminar los archivos
intermedios y de salida que se crearon durante las compilaciones anteriores.

2. Cambie la configuracin de compilacin de HelloWPFApp de Debug a Release.

3. Compile la solucin.

Enhorabuena por completar este tutorial! Si desea explorar ms ejemplos, vea Ejemplos de
Visual Studio.
Vea tambin
Conceptos
Novedades de Visual Studio 2013
Introduccin a Visual Studio
Sugerencias de productividad para Visual Studio
Adiciones de comunidad