Manual aplicativo iterativo

Configurar el IDE

Al iniciar Visual Studio por primera vez, Visual Studio le pedirá que inicie sesión con una cuenta de servicio de Microsoft (MSA). Inicio de sesión en Visual Studio. No es necesario iniciar sesión y puede hacerlo más tarde.

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

Este tutorial asume que aplicó la Configuración general de desarrollo, lo que implica la menor cantidad de personalización del IDE. Si ya eligió C# o Visual Basic (ambas son opciones válidas), no debe cambiar la configuración. Si desea cambiar la configuración, puede usar el Asistente para importar y exportar configuraciones. Consulte 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 el espacio donde está la página de inicio. Cuando desarrolle una aplicación, 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 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. Puede continuar para crear un proyecto si lo desea.

Para cambiar el tema de color del IDE

1. Para abrir el cuadro de diálogo Opciones, seleccione el menú Herramientas en la parte superior y, luego, el elemento Opciones....
   
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:

El tema de color usado para las imágenes en el resto de este tutorial es el tema claro. Para obtener más información sobre cómo personalizar el IDE, consulte Personalizar la configuración de desarrollo de 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á un proyecto de Windows Presentation Foundation (WPF).

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 para hacer lo mismo.
   
2. Para elegir la plantilla Aplicación WPF de Visual C# o Visual Basic, elija en el panel izquierdo Instaladas, Plantillas, Visual C#, Windows, por ejemplo y, después, elija Aplicación WPF en el panel central. Asigne al proyecto el nombre HelloWPFApp en la parte inferior del cuadro de diálogo Nuevo proyecto.
   
   O
   

Visual Studio crea el proyecto HelloWPFApp y la solución y el Explorador de soluciones muestra los distintos archivos. WPF Designer muestra una vista de diseño y una vista XAML de MainWindow.xaml en una vista en dos paneles. Puede deslizar el divisor para mostrar más o menos de cualquiera de las vistas. Puede elegir ver solo la vista visual o solo la vista XAML. (Para obtener más información, vea Diseñador WPF 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, (que se encuentra en el menú Ver), 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 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, 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 código está anidado bajo el nodo del archivo .xaml para mostrar que están 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 diseñador (presionando la tecla Entrar mientras el nodo tiene el foco) y seleccione la barra de título de la ventana con el mouse.
3. En la ventana Propiedades, cambie el valor de la propiedad Title a Greetings.

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 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 diseño. Para ello, elija el elemento TextBlock y arrástrelo a la ventana en la superficie de diseño. 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:

<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 (con las asas de captación 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 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 eligiendo el elemento RadioButton y arrastrándolo a la ventana de la superficie de diseño dos veces. Además, mueva los botones (seleccionándolos y usando las teclas de dirección) para que los botones aparezcan uno junto al otro 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. Asegúrese de que seleccionó RadioButton y no la cuadrícula 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 después guarde los cambios presionando Ctrl-s o usando el elemento de menú Archivo. Asegúrese 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 botón de radio

1. En la superficie de diseño, abra el menú contextual de RadioButton1 presionando el botón secundario del mouse mientras selecciona RadioButton1, elija Editar texto y, luego, escriba Hello.
2. Abra el menú contextual de RadioButton2 presionando el botón 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 Botón y, después, agréguelo a la superficie de diseño en los controles RadioButton seleccionando el botón y arrastrándolo al formulario de la vista de diseño.
2. En la vista XAML, cambie el valor de Contenido del control Botón de Content=”Button” a Content=”Display” y después guarde los cambios (Ctrl-s o use el menú Archivo.
   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 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 de la siguiente manera (si el código pegado tiene una línea en zigzag roja debajo de algún nombre, probablemente no seleccionó los controles RadioButton en la superficie de diseño 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 código siguiente:
   VB

   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. Las siguientes instrucciones indican cómo compilar e iniciar el depurador, pero más adelante podría leer Compilar una aplicación de WPF (WPF) y Depurar WPF para obtener más información.

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 de Mainwindow.xaml a Greetings.xaml al comienzo de este tutorial, pero el código todavía hace referencia 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). Para ello, seleccione el archivo y presione Entrar o haga doble clic en él.
2. Cambie StartupUri="MainWindow.xaml" a StartupUri="Greetings.xaml" y después guarde los cambios con Ctrl-s.

Vuelva a iniciar el depurador (presione F5). Debería ver la ventana Greetings 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 eligiendo Depurar en el menú principal, luego Alternar puntos de interrupción 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. Presione la tecla F9 para agregar un punto de interrupción y después presione 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, mientras que las ventanas Pila de llamadas, Puntos de interrupción, Comando, Inmediato y Salida 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.
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. Presione las teclas MAYÚS + F5 (presione MAYÚS en primer lugar y, mientras la mantiene presionada, presione 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 crear una versión de lanzamiento

1. En el menú principal, seleccione Compilar y, después, Limpiar solución 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 compilación de depuración.
   
2. Cambie la configuración de compilación de HelloWPFApp de Depurar a Liberar mediante el control de lista desplegable en la barra de herramientas (dice "Depurar" actualmente).
   
3. Compile la solución con Compilar, Compilar solución o presione la tecla F6.