Tutorial: Explorar el IDE de Visual Studio con 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 más sobre cómo trabajar en el entorno de desarrollo integrado (IDE).

Este tema contiene las siguientes secciones:

Configure el control IDE

Crear una aplicación sencilla

Depurar y probar la aplicación

[!NOTA]

Este tutorial se basa en la edición Professional de Visual Studio 2012.Es posible que su copia de Visual Studio muestre nombres o ubicaciones diferentes para algunos de los elementos de la interfaz de usuario.La edición de Visual Studio que tenga y la configuración que esté usando determinan estos elementos.Para obtener más información acerca de la configuración, vea Valores de configuración de Visual Studio.

Configure el control IDE

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

Figura 1: Cuadro de diálogo Elegir configuración de 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.También puede cambiar la combinación de configuración mediante el Asistente para importar y exportar configuraciones.Para obtener más información, vea Cómo: Cambiar configuraciones seleccionadas.

Después de abrir Visual Studio, puede identificar las ventanas de herramientas, menús y barras de herramientas y el espacio de la ventana principal.Las ventanas de herramientas se acoplan en 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.Al desarrollar una aplicación, deberá pasar la mayor parte del tiempo en esta área central.

Figura 2: IDE de Visual Studio

Puede crear personalizaciones adicionales a Visual Studio, como cambiar el tipo de letra de la 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 los valores que se han aplicado, puede que algunos elementos de ese cuadro de diálogo no aparezcan automáticamente.Puede asegurarse de que aparezca.en todas las opciones posibles si elige 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.

   

2. Cambie Tema de color a Oscuro, a continuación, haga clic en Aceptar.

   

Los colores en Visual Studio deben coincidir la imagen siguiente:

El tema de color usado en el resto de este tutorial es el tema ligero.Para obtener más información acerca de cómo personalizar el IDE, vea Personalizar el entorno de desarrollo.

Crear una aplicación sencilla

Crear el proyecto

Cuando cree una aplicación en Visual Studio, cree primero 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 el nuevo proyecto en el cuadro Inicio rápido para hacer lo mismo.

   

2. Elija la plantilla de Visual Basic o de la aplicación WPF de Visual C# y después nombre al proyecto HelloWPFApp.

   

   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 dividida.(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 de 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 en 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 para ese archivo debajo 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.

   

   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 de Diseño 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 de botón.

Para agregar un control TextBlock

1. Abra la ventana del Cuadro de herramientas.Debe buscarlo a la izquierda de la ventana del diseñador.También puede abrirlo en el menú Ver o si escribe 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 el 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 una apariencia similar a lo 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 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 Nombre (la propiedad en la parte superior de la ventana Propiedades ) a RadioButton1.

4. En la ventana Propiedades del control RadioButton derecho, cambie la propiedad Nombre a RadioButton2 y después guarde los cambios.

Ahora puede agregar el texto para mostrar en cada control RadioButton.El procedimiento siguiente actualiza la propiedad Contenido 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 para RadioButton1, elija Editar texto y, a continuación, escriba Hello.

2. Abrir el menú contextual para 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 de botón

1. En el Cuadro de herramientas busque el control de botón y después agréguelo a la superficie de diseño, en los controles RadioButton.

2. En la vista XAML, cambie el valor Contenido para el control de botón de Content=”Button” a Content=”Display” y después guarde los cambios.

   El marcado debería ser similar al ejemplo siguiente: <Button Content="Display" HorizontalAlignment="Left" VerticalAlignment="Top" Width="75" Margin="215,204,0,0"/>

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

Figura 9: Interfaz de usuario final de Greetings

Agregar código para el botón Mostrar

Cuando se ejecuta dicha aplicación, aparece un cuadro de mensaje después de que un usuario elija primero un botón de radio y, a continuación, el botón Mostrar.Aparecerá un cuadro de mensaje para Hola y otro para Adiós.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.

   Con el cursor en el evento Button_Click, se abre Greetings.xaml.vb o Greetings.xaml.cs.También puede agregar un controlador de eventos click como sigue:

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

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

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

   private void Button_Click_1(object sender, RoutedEventArgs e)
   {
   
   }
   

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

   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.Para obtener más información, vea Compilar una aplicación de WPF (WPF) y Depurar WPF.

Errores de búsqueda y de corrección

En este paso, encontrará el error que se produjo anteriormente cambiando 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 un IOException: No se encuentra el recurso ‘mainwindow.xaml’.

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

   

Se ha cambiado el nombre Mainwindow.xaml a Greetings.xaml al inicio de este tutorial, pero la solución todavía está destinada a Mainwindow.xaml como 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 Saludos 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 si elige Depurar, Alternar puntos de interrupción en la barra de menús o si hace 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 abierto 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áticos, 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 “Hola”.

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

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 compilar una versión de lanzamiento

1. Seleccione Compilación, 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 para HelloWPFApp de Depurar a Liberar.

   

3. Compile la solución.

   

¡Enhorabuena por completar este tutorial!Si desea explorar más ejemplos, vea Ejemplos de Visual Studio.

Vea también

Conceptos

Novedades de Visual Studio 2012

Introducción a Visual Studio

Sugerencias de productividad para Visual Studio