11/10/2014 Tutorial: Crear una aplicación sencilla con Visual C# o Visual Basic

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

Traducción Original

ImprimirExpandir todo

Este artículo se tradujo de forma

manual. Mueva el puntero sobre las

frases del artículo para ver el texto

original. Más información.

Tutorial: Crear unaaplicación sencilla conVisual C# o Visual Basic

Tras completar este tutorial, estará familiarizado con muchas de las

herramientas, cuadros de diálogo y diseñadores que puede utilizar para

desarrollar aplicaciones con Visual Studio. Creará una aplicación sencilla de

estilo “Hola a todos”, diseñará la interfaz de usuario, agregará código 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 aplicación sencilla

Depurar y probar la aplicación

Nota

Este tutorial se basa en Visual Studio Professional, que proporciona la

plantilla de aplicación WPF en la que creará el proyecto de este tutorial.

Visual Studio Express para escritorio de Windows también proporciona

esa plantilla, pero no así Visual Studio Express para Windows y Visual

Studio Express para Web. Para obtener información preliminar sobre

cómo utilizar Visual Studio Express para Windows, visite el Centro de

desarrollo de software para aplicaciones de la Tienda Windows. Para

obtener información preliminar sobre cómo utilizar Visual Studio

Express para Web, vea Empezar con ASP.NET. Asimismo la edición de

Visual Studio y la configuración que utilice determinan los nombres y las

ubicaciones de algunos elementos de la interfaz de usuario. Vea

Personalizar la configuración de desarrollo en Visual Studio.

Configurar el IDE

Developer Network

Suscripciones a MSDN Obtener herramientas Iniciar sesión

Tecnologías Descargas Programas Comunidad Documentación Ejemplos

Síganos

MSDN Library

Herramientas y lenguajes de

desarrollo

Visual Studio 2013

Introducción

Introducción a Visual C# y Visual

Basic

Tutorial: Crear una

aplicación 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

Visual Studio 2013 Otras versiones

11/10/2014 Tutorial: Crear una aplicación sencilla con Visual C# o Visual Basic

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

Configurar el IDE

Cuando inicie Visual Studio por primera vez, deberá elegir una

combinación de opciones que aplica un conjunto de personalizaciones

predefinidas al IDE. Cada combinación de valores se ha diseñado para

que sea más sencillo desarrollar aplicaciones.

Figura 1: Cuadro de diálogo Configuración del entorno predeterminada

Este tutorial se ha creado con la Configuración general de desarrollo

aplicada, lo que implica la menor cantidad de personalización del IDE.

Puede cambiar la combinación de opciones mediante el Asistente para

importar y exportar configuraciones. Vea 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 este espacio. Cuando desarrolle una

aplicación, pasará la mayor parte del tiempo en esta área central.

Figura 2: IDE de Visual Studio

11/10/2014 Tutorial: Crear una aplicación sencilla con Visual C# o Visual Basic

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

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.

Para cambiar el tema de color del IDE

1. Abra el cuadro de diálogo Opciones.

11/10/2014 Tutorial: Crear una aplicación sencilla con Visual C# o Visual Basic

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

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:

11/10/2014 Tutorial: Crear una aplicación sencilla con Visual C# o Visual Basic

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

El tema de color usado en el resto de este tutorial es el tema de color

claro. Para obtener más información acerca de cómo personalizar el IDE,

vea Personalizar la configuración de desarrollo en 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á una solución de Windows

Presentation Foundation.

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.

2. Elija la plantilla de la aplicación WPF de Visual C# o Visual Basic y

después asigne el nombre HelloWPFApp al proyecto.

11/10/2014 Tutorial: Crear una aplicación sencilla con Visual C# o Visual Basic

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

OR

Se crea el proyecto y la solución HelloWPFApp y los distintos archivos

aparecen en el Explorador de soluciones. WPF Designer muestra una

vista de diseño y una vista XAML de MainWindow.xaml en una vista en

dos paneles. (Para obtener más información, vea WPF Designer 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, 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

11/10/2014 Tutorial: Crear una aplicación sencilla con Visual C# o Visual Basic

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

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

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 botón

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 diseñador y seleccione la barra de título de la ventana.

3. En la ventana Propiedades, cambie el valor de la propiedad Title

a Greetings.

Precaución

Este cambio produce un error que aprenderá a depurar y

corregir en un paso posterior.

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. Debe estar a la

izquierda de la ventana del diseñador. También puede abrirla

11/10/2014 Tutorial: Crear una aplicación sencilla con Visual C# o Visual Basic

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

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 diseño y 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:

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 para que se muestre todo el texto.

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

11/10/2014 Tutorial: Crear una aplicación sencilla con Visual C# o Visual Basic

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

amplíe el control TextBlock para que se muestre todo el texto.

3. Guarde los cambios.

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 y

muévalos de modo que aparezcan en paralelo 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.

4. En la ventana Propiedades del control RadioButton derecho,

cambie la propiedad Name a RadioButton2 y después 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.

11/10/2014 Tutorial: Crear una aplicación sencilla con Visual C# o Visual Basic

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

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, elija Editar texto y, a continuación, escriba Hello.

2. Abra el menú contextual de RadioButton2, elija Editar texto y, a

continuación, 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

después agréguelo a la superficie de diseño, bajo los controles

RadioButton.

2. En la vista XAML, cambie el valor de Content del control Button

de Content=”Button” a Content=”Display” y después guarde

los cambios.

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

11/10/2014 Tutorial: Crear una aplicación sencilla con Visual C# o Visual Basic

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

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 del modo siguiente:

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

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

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

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

Private Sub Button_Click_1(sender As Object, e As RoutedEventArgs)

End Sub

private void Button_Click_1(object sender, RoutedEventArgs e)

{

}

If RadioButton1.IsChecked = True Then

MessageBox.Show("Hello.")

Else RadioButton2.IsChecked = True

MessageBox.Show("Goodbye.")

End If

if (RadioButton1.IsChecked == true)

{

MessageBox.Show("Hello.");

}

else

{

RadioButton2.IsChecked = true;

MessageBox.Show("Goodbye.");

}

VB

C#

VB

11/10/2014 Tutorial: Crear una aplicación sencilla con Visual C# o Visual Basic

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

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. Para obtener más

información, vea Compilar una aplicación 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 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 Mainwindow.xaml a Greetings.xaml al

comienzo de este tutorial, pero la solución todavía apunta 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).

2. Cambie StartupUri="MainWindow.xaml" a

StartupUri="Greetings.xaml" y después guarde los cambios.

Inicie otra vez el depurador. Debería ver la ventana Greetings de la

aplicación.

}

11/10/2014 Tutorial: Crear una aplicación sencilla con Visual C# o Visual Basic

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

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, Alternar puntos de interrupción en la barra de menús 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. Elija la tecla F9 para agregar un punto de interrupción y después

elija 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, y las

ventanas Pila de llamadas, Puntos de interrupción, Comando,

Inmediato y Resultados 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.

11/10/2014 Tutorial: Crear una aplicación sencilla con Visual C# o Visual Basic

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

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. Elija las teclas MAYÚS + F5 para detener la depuración.

11. En la barra de menús, elija Depurar, Deshabilitar todos los

puntos de interrupción.

Crear 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. Seleccione Compilar y después Limpiar solución para eliminar

los archivos intermedios y de salida que se crearon durante las

compilaciones anteriores.

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

Debug a Release.

3. Compile la solución.

11/10/2014 Tutorial: Crear una aplicación sencilla con Visual C# o Visual Basic

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

Adiciones de comunidad AGREGAR

¡Enhorabuena por completar este tutorial! Si desea explorar más

ejemplos, vea Ejemplos de Visual Studio.

Vea también

Conceptos

Novedades de Visual Studio 2013

Introducción a Visual Studio

Sugerencias de productividad para Visual Studio

Centros de desarrollo

Windows

Office

Visual Studio

Nokia

Microsoft Azure

Más...

Recursos de aprendizaje

Microsoft Virtual Academy

Channel 9

Puentes de interoperabilidad

MSDN Magazine

Comunidad

Foros

Blogs

Codeplex

Soporte técnico

Autosoporte

Programas

BizSpark (para nuevas empresas)

DreamSpark

Imagine Cup

España (Español) Boletín Privacidad y cookies Términos de uso

Marcas comerciales © 2014 Microsoft

11/10/2014 Tutorial: Crear una aplicación sencilla con Visual C# o Visual Basic

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