Tutorial: Creación de una aplicación WPF con Visual Basic

En este tutorial, creará una aplicación con Visual Basic en el entorno de desarrollo integrado (IDE) de Visual Studio. El programa usará el marco de interfaz de usuario de Windows Presentation Foundation (WPF). Use este tutorial para familiarizarse con muchas de las herramientas, cuadros de diálogo y diseñadores que puede usar en Visual Studio.

En este tutorial, aprenderá a:

• Creación del proyecto
• Configuración de la ventana y adición de texto
• Agregar botones y código
• Depuración y prueba de la aplicación
• Depurar con puntos de interrupción
• Compilar una versión de lanzamiento

¿Qué es WPF?

WPF o Windows Presentation Foundation es un marco de interfaz de usuario (interfaz de usuario) que crea aplicaciones cliente de escritorio. La plataforma de desarrollo de WPF admite un amplio conjunto de características de desarrollo de aplicaciones, como un modelo de aplicación, recursos, controles, gráficos, diseño, enlace de datos, documentos y seguridad.

WPF forma parte de .NET, por lo que si ha creado previamente aplicaciones con .NET mediante ASP.NET o Windows Forms, la experiencia de programación debe ser familiar. WPF usa el XAML del lenguaje de marcado de aplicaciones extensible para proporcionar un modelo declarativo para la programación de aplicaciones. Para obtener más información, vea Información general sobre .NET de WPF.

Prerrequisitos

Necesita Visual Studio para completar este tutorial. Visite la página de descargas de Visual Studio para obtener una versión gratuita.

Creación del proyecto

Al crear una aplicación en Visual Studio, primero se crea un proyecto. En este tutorial, cree un proyecto de Windows Presentation Foundation.

1. Abre Visual Studio.

2. En la ventana de inicio, elija Crear un nuevo proyecto.

   

3. En la ventana Crear un nuevo proyecto , busque "WPF" y seleccione Visual Basic en la lista desplegable Todos los lenguajes . Elija Aplicación WPF (.NET Framework) y, a continuación, elija Siguiente.

   

4. Asigne al proyecto un nombre, HelloWPFApp y seleccione Crear.

   Visual Studio crea el proyecto y la solución HelloWPFApp. 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 dividida.

Nota:

Para obtener más información sobre eXtensible Application Markup Language (XAML), consulta Introducción a XAML para WPF.

Configuración de la ventana y adición de texto

Con la ventana Propiedades , puede mostrar y cambiar opciones para elementos de proyecto, controles y otros elementos.

1. En el Explorador de soluciones, abra MainWindow.xaml.

2. En la vista XAML, cambie el valor de la propiedad Window.Title de Title="MainWindow" a Title="Greetings".

3. En el lado izquierdo del IDE de Visual Studio, seleccione la pestaña Cuadro de herramientas. Si no lo ve, seleccione Ver>Cuadro de herramientas en la barra de menús o Ctrl+Alt+X.

4. Expanda Controles comunes de WPF o escriba Texto en la barra de búsqueda para buscar TextBlock.

   

5. Seleccione el elemento TextBlock y arrástrelo a la ventana de la superficie de diseño. Puede mover el control TextBlock arrastrándolo. Use las instrucciones para colocar el control.

   

   El marcado XAML debe tener un aspecto similar al del ejemplo siguiente:

   <TextBlock HorizontalAlignment="Left" Margin="381,100,0,0" TextWrapping="Wrap" Text="TextBlock" VerticalAlignment="Top"/>
   

6. En la vista XAML, busque el marcado de TextBlock y cambie el atributo Text :

   Text="Select a message option and then choose the Display button."
   

   Vuelva a centrar el TextBlock si es necesario.

7. Para guardar la aplicación, elija el botón Guardar todas las barras de herramientas. O bien, para guardar la aplicación, elija Archivo>Guardar todo en la barra de menús o presione Ctrl+Mayús+S. Es un procedimiento recomendado para ahorrar temprano y a menudo.

Agregar botones y código

La aplicación usa dos botones de radio y un botón. Siga estos pasos para agregarlos. Agregará código de Visual Basic al botón. Ese código hace referencia a la selección del botón de radio.

1. En el Cuadro de herramientas, busque RadioButton.

   

2. Agregue dos controles RadioButton a la superficie de diseño seleccionando el elemento RadioButton y arrastrándolo a la superficie de diseño. Mueva los botones seleccionándolos y usando las teclas de dirección. Coloque los botones en paralelo bajo el control TextBlock.

   

3. En la ventana Propiedades del control RadioButton izquierdo, cambie la propiedad Name en la parte superior de la ventana Propiedades a HelloButton.

   

4. En la ventana Propiedades del control RadioButton derecho, cambie la propiedad Name a GoodbyeButton.

5. Actualice el atributo Content de HelloButton y GoodbyeButton a "Hello" y "Goodbye" en el XAML.

   <Grid>
        <TextBlock HorizontalAlignment="Left" Margin="252,47,0,0" TextWrapping="Wrap" Text="Select a message option and then choose the Display button." VerticalAlignment="Top"/>
        <RadioButton x:Name="HelloButton" Content="Hello" HorizontalAlignment="Left" Margin="297,161,0,0" VerticalAlignment="Top"/>
        <RadioButton x:Name="GoodbyeButton" Content="Goodbye" HorizontalAlignment="Left" Margin="488,161,0,0" VerticalAlignment="Top"/>
   </Grid>
   

6. En la vista XAML, busque el marcado para HelloButton y agregue un atributo IsChecked :

   IsChecked="True"
   

   El atributo IsChecked con el valor True significa que HelloButton está activado de forma predeterminada. Esta configuración significa que el botón de radio siempre está seleccionado, incluso cuando se inicia el programa.

7. En el Cuadro de herramientas, busque el control Botón y, a continuación, arrastre un botón a la superficie de diseño bajo los controles RadioButton.

8. En la vista XAML, cambie el valor de Contenido del control Button de Content="Button" a Content="Display".

   <Button Content="Display" HorizontalAlignment="Left" VerticalAlignment="Top" Width="75" Margin="215,204,0,0"/>
   

   La ventana debe ser similar a la siguiente imagen.

   

9. En la superficie de diseño, haga doble clic en el botón Mostrar .

   MainWindow.xaml.vb se abre, con el cursor en el evento Button_Click.

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

10. Agregue el código siguiente:

    If HelloButton.IsChecked = True Then
        MessageBox.Show("Hello.")
    ElseIf GoodbyeButton.IsChecked = True Then
        MessageBox.Show("Goodbye.")
    End If
    

Depuración y prueba de la aplicación

A continuación, depurarás la aplicación para buscar errores y probar que ambos cuadros de mensaje aparecen correctamente. Para ver cómo funciona este proceso, el primer paso introduce deliberadamente un error en el programa.

1. En el Explorador de soluciones, haga clic con el botón derecho en MainWindow.xaml y elija Cambiar nombre. Cambie el nombre del archivo a Greetings.xaml.

2. Inicie el depurador presionando F5 o seleccionando Depurar y, a continuación, Iniciar depuración.

   Aparece una ventana Modo de interrupción y la ventana Salida indica que se ha producido una excepción.

   

3. Detenga el depurador. Para ello, elija Depurar>Detener depuración.

   Ha cambiado el nombre de MainWindow.xaml a Greetings.xaml al principio de esta sección. 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 se puede iniciar.

4. En el Explorador de soluciones, abra el archivo Application.xaml .

5. Cambie StartupUri="MainWindow.xaml" a StartupUri="Greetings.xaml".

6. Vuelva a iniciar el depurador (presione F5). Ahora debería ver la ventana Greetings de la aplicación.

   

7. Seleccione Hola y el botón Mostrar y, a continuación, Adiós y el botón Mostrar . Use el icono de cierre que está en la esquina superior derecha para detener la depuración.

Para más información, consulte los artículos sobre cómo compilar una aplicación de WPF y cómo depurar WPF.

Depurar con puntos de interrupción

Puede probar el código durante la depuración. Para ello, agregue algunos puntos de interrupción.

1. Abra Greetings.xaml.vb y seleccione la línea siguiente: MessageBox.Show("Hello.")

2. Agregue un punto de ruptura presionando F9 o seleccionando Debug, luego Alternar punto de ruptura.

   Aparece un círculo rojo junto a la línea de código en el margen izquierdo de la ventana del editor.

3. Seleccione la siguiente línea: MessageBox.Show("Goodbye.").

4. Presione la tecla F9 para agregar un punto de interrupción y presione F5 para iniciar la depuración.

5. En la ventana Greetings (Saludos ), seleccione el botón Hello (Hola ) y, a continuación, seleccione Display (Mostrar).

   La línea MessageBox.Show("Hello.") está resaltada en amarillo. En la parte inferior del IDE, las ventanas Automático, Variables locales e Inspección se acoplan juntas a la izquierda. Las ventanas Pila de llamadas, Puntos de interrupción, Configuración de excepciones, Comando, Inmediato y Salida se acoplan juntos a la derecha.

   

6. En la barra de menús, elija Depurar>Paso a paso para salir.

   La aplicación se inicia de nuevo. Aparece un cuadro de diálogo con la palabra "Hello".

7. Elija el botón Aceptar para cerrar el cuadro de diálogo.

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.") está resaltada en amarillo.

9. Elija la tecla F5 para continuar con la depuración. Cuando aparezca el cuadro de diálogo, elija Aceptar para cerrar el cuadro de diálogo.

10. Cierre la ventana de la aplicación 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

Ahora que ha comprobado que todo funciona, puede preparar una compilación de lanzamiento de su aplicación.

1. Seleccione Compilar>solución limpia para eliminar archivos intermedios y archivos de salida que se crearon durante las compilaciones anteriores.

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.

3. Seleccione Compilar>Compilar solución.

Enhorabuena por completar este tutorial. Puede encontrar el .exe creado en el directorio de soluciones y proyectos (...\HelloWPFApp\bin\Release).

Pasos siguientes

Pase al siguiente artículo para aprender a crear una aplicación de Windows Forms en Visual Studio con Visual Basic.

Creación de una aplicación de Windows Forms

Vínculos relacionados

Para obtener más información sobre Visual Studio, consulte estos recursos:

• sugerencias de productividad