Tutorial: Crear una aplicacin sencilla

con Visual C# o Visual Basic

Visual Studio 2015
Otras versiones

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
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 usar Visual Studio Express para Windows, visite el Centro de
desarrollo de software para aplicaciones de la Tienda Windows. Para obtener
informacin preliminar sobre cmo usar Visual Studio Express para Web, consulte Get
Started with ASP.NET (Introduccin a 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. Consulte Personalizar la configuracin de
desarrollo en Visual Studio.

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

Al iniciar Visual Studio, debe elegir una combinacin de configuracin que aplique un
conjunto de personalizaciones predefinidas al IDE. Cada combinacin de opciones se ha
diseado para que el desarrollo de aplicaciones le resulte ms sencillo.
Este tutorial asume que aplic la Configuracin general de desarrollo, lo que implica
la menor cantidad de personalizacin del IDE. Si ya eligi C# o Visual Basic (ambas
son opciones vlidas), no debe cambiar la configuracin. Si desea cambiar la
configuracin, puede usar el Asistente para importar y exportar configuraciones.
Consulte 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 el espacio
donde est la pgina de inicio. 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. Puede continuar
para crear un proyecto si lo desea.

Para cambiar el tema de color del IDE

1. Para abrir el cuadro de dilogo Opciones, seleccione el men Herramientas en
la parte superior y, luego, el elemento 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 para las imgenes en el resto de este tutorial es el tema claro.
Para obtener ms informacin sobre cmo personalizar el IDE, consulte Personalizar la
configuracin de desarrollo de 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 un proyecto de Windows Presentation Foundation
(WPF).
Para crear el proyecto de WPF
1. Crear un nuevo proyecto. En la barra de mens, elija Archivo, Nuevo,
Proyecto....

Tambin puede escribir Nuevo proyecto en el cuadro Inicio rpido para hacer
lo mismo.

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

panel izquierdo Instaladas, Plantillas, Visual C#, Windows, por ejemplo y,
despus, elija Aplicacin WPF en el panel central. Asigne al proyecto el nombre
HelloWPFApp en la parte inferior del cuadro de dilogo Nuevo proyecto.

Visual Studio crea el proyecto HelloWPFApp y la solucin y el Explorador de

soluciones muestra los distintos archivos. WPF Designer muestra una vista de diseo y
una vista XAML de MainWindow.xaml en una vista en dos paneles. Puede deslizar el
divisor para mostrar ms o menos de cualquiera de las vistas. Puede elegir ver solo la
vista visual o solo la vista XAML. (Para obtener ms informacin, vea Diseador WPF

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,

(que se encuentra en el men Ver), 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, 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 cdigo est anidado bajo el nodo del
archivo .xaml para mostrar que estn 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 diseador
(presionando la tecla Entrar mientras el nodo tiene el foco) y seleccione la barra
de ttulo de la ventana con el mouse.
3. En la ventana Propiedades, cambie el valor de la propiedad Title a Greetings.
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 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 diseo. Para ello, elija el

elemento TextBlock y arrstrelo a la ventana en la superficie de diseo. 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 (con las asas de captacin 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 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 eligiendo el

elemento RadioButton y arrastrndolo a la ventana de la superficie de diseo dos
veces. Adems, mueva los botones (seleccionndolos y usando las teclas de
direccin) para que los botones aparezcan uno junto al otro 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) a RadioButton1. Asegrese de que seleccion RadioButton y no
la cuadrcula 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 despus guarde los cambios presionando
Ctrl-s o usando el elemento de men Archivo. Asegrese 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 botn de radio
1. En la superficie de diseo, abra el men contextual de RadioButton1
presionando el botn secundario del mouse mientras selecciona RadioButton1,
elija Editar texto y, luego, escriba Hello.
2. Abra el men contextual de RadioButton2 presionando el botn 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 Botn y, despus, agrguelo a
la superficie de diseo en los controles RadioButton seleccionando el botn y
arrastrndolo al formulario de la vista de diseo.
2. En la vista XAML, cambie el valor de Contenido del control Botn de
Content=Button a Content=Display y despus guarde los cambios (Ctrl-s o
use el men Archivo.
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 de la
siguiente manera (si el cdigo pegado tiene una lnea en zigzag roja debajo de
algn nombre, probablemente no seleccion los controles RadioButton en la
superficie de diseo 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 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. Las siguientes instrucciones indican cmo compilar
e iniciar el depurador, pero ms adelante podra leer Compilar una aplicacin de WPF
(WPF) y Depurar WPF para obtener ms informacin.

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 de Mainwindow.xaml a Greetings.xaml al comienzo de este

tutorial, pero el cdigo todava hace referencia 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). Para ello, seleccione el archivo y
presione Entrar o haga doble clic en l.

2. Cambie StartupUri="MainWindow.xaml" a StartupUri="Greetings.xaml" y

despus guarde los cambios con Ctrl-s.
Vuelva a iniciar el depurador (presione F5). 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 en el men
principal, luego Alternar puntos de interrupcin 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. Presione la tecla F9 para agregar un punto de interrupcin y despus presione 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, mientras que las ventanas Pila de llamadas, Puntos
de interrupcin, Comando, Inmediato y Salida 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. Presione las teclas MAYS + F5 (presione MAYS en primer lugar y, mientras
la mantiene presionada, presione F5) para detener la depuracin.
11. En la barra de mens, elija Depurar, Deshabilitar todos los puntos de
interrupcin.

Compilar 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. En el men principal, seleccione Compilar y, despus, Limpiar solucin 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
compilacin de depuracin.

2. Cambie la configuracin de compilacin de HelloWPFApp de Depurar a

Liberar mediante el control de lista desplegable en la barra de herramientas
(dice "Depurar" actualmente).

3. Compile la solucin con Compilar, Compilar solucin 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 ms ejemplos, vea Ejemplos de Visual Studio.