11/10/2014

Tutorial: Crear una aplicacin sencilla con Visual C# o Visual Basic

Suscripciones a MSDN

Obtener herramientas

Iniciar sesin

Developer Network
Tecnologas

Descargas

Programas

Comunidad

Documentacin

Ejemplos
Sganos
Expandir todo

MSDN Library
Herramientas y lenguajes de
desarrollo
Visual Studio 2013
Introduccin
Introduccin a Visual C# y Visual
Basic
Tutorial: Crear una
aplicacin sencilla con Visual
C# o Visual Basic
Tutorial 1: Create a Picture
Viewer
Tutorial 2: Create a Timed Math
Quiz
Tutorial 3: Create a Matching
Game

Este artculo se tradujo de forma

manual. Mueva el puntero sobre las
frases del artculo para ver el texto
original. Ms informacin.

Traduccin

Imprimir

Original

Tutorial: Crear una

aplicacin sencilla con
Visual C# o Visual Basic
Visual Studio 2013

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

Configurar el IDE
http://msdn.microsoft.com/es-es/library/jj153219.aspx

1/16

11/10/2014

Configurar el IDE

Tutorial: Crear una aplicacin sencilla con Visual C# o Visual Basic

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

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

http://msdn.microsoft.com/es-es/library/jj153219.aspx

2/16

11/10/2014

Tutorial: Crear una aplicacin sencilla con Visual C# o Visual Basic

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.

http://msdn.microsoft.com/es-es/library/jj153219.aspx

3/16

11/10/2014

Tutorial: Crear una aplicacin sencilla con Visual C# o Visual Basic

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:

http://msdn.microsoft.com/es-es/library/jj153219.aspx

4/16

11/10/2014

Tutorial: Crear una aplicacin sencilla con Visual C# o Visual Basic

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.

http://msdn.microsoft.com/es-es/library/jj153219.aspx

5/16

11/10/2014

Tutorial: Crear una aplicacin sencilla con Visual C# o Visual Basic

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

http://msdn.microsoft.com/es-es/library/jj153219.aspx

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

6/16

11/10/2014

Tutorial: Crear una aplicacin sencilla con Visual C# o Visual Basic

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
http://msdn.microsoft.com/es-es/library/jj153219.aspx

7/16

11/10/2014

Tutorial: Crear una aplicacin sencilla con Visual C# o Visual Basic

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

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.
http://msdn.microsoft.com/es-es/library/jj153219.aspx

8/16

11/10/2014

Tutorial: Crear una aplicacin sencilla con Visual C# o Visual Basic

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) a RadioButton1.
4. En la ventana Propiedades del control RadioButton derecho,
cambie la propiedad Name a RadioButton2y 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.
http://msdn.microsoft.com/es-es/library/jj153219.aspx

9/16

11/10/2014

Tutorial: Crear una aplicacin sencilla con Visual C# o Visual Basic

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=Buttona Content=Displayy 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

http://msdn.microsoft.com/es-es/library/jj153219.aspx

Cuando se ejecuta esta aplicacin, aparece un cuadro de mensaje

10/16

11/10/2014

Tutorial: Crear una aplicacin sencilla con Visual C# o Visual Basic

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 RoutedEve

End Sub

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

C#
private void Button_Click_1(object sender, RoutedEventArgs
{
}

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:

http://msdn.microsoft.com/es-es/library/jj153219.aspx

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

11/16

11/10/2014

Tutorial: Crear una aplicacin sencilla con Visual C# o Visual Basic

}
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.xaml"y despus guarde los cambios.
Inicie otra vez el depurador. Debera ver la ventana Greetings de la
aplicacin.
http://msdn.microsoft.com/es-es/library/jj153219.aspx

12/16

11/10/2014

Tutorial: Crear una aplicacin sencilla con Visual C# o Visual Basic

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.
http://msdn.microsoft.com/es-es/library/jj153219.aspx

13/16

11/10/2014

Tutorial: Crear una aplicacin sencilla con Visual C# o Visual Basic

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.

http://msdn.microsoft.com/es-es/library/jj153219.aspx

14/16

11/10/2014

Tutorial: Crear una aplicacin sencilla con Visual C# o Visual Basic

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

Centros de desarrollo
Windows
Office

AGREGAR

Recursos de aprendizaje

Comunidad

Soporte tcnico

Microsoft Virtual Academy

Foros

Autosoporte

Channel 9

Blogs

Puentes de interoperabilidad

Codeplex

Programas

MSDN Magazine

BizSpark (para nuevas empresas)

Visual Studio

DreamSpark
Imagine Cup

Nokia
Microsoft Azure
Ms...

Espaa (Espaol)

Boletn

Privacidad y cookies

Marcas comerciales

http://msdn.microsoft.com/es-es/library/jj153219.aspx

Trminos de uso
2014 Microsoft

15/16

11/10/2014

http://msdn.microsoft.com/es-es/library/jj153219.aspx

Tutorial: Crear una aplicacin sencilla con Visual C# o Visual Basic

16/16