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

En este tutorial, creará una aplicación mediante 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:

¿Qué es WPF?

WPF, o Windows Presentation Foundation, es un marco de interfaz de usuario (UI) que crea aplicaciones cliente de escritorio. La plataforma de desarrollo de WPF admite un amplio conjunto de características de desarrollo de aplicaciones, entre las que se incluyen:

• Un modelo de aplicación
• Recursos
• Controles
• Gráficos
• Diseño
• Vinculación de datos
• Documentos
• Seguridad

WPF forma parte de .NET. Si creó aplicaciones previamente con .NET mediante ASP.NET o Windows Forms, la experiencia de programación debería resultar familiar. WPF usa el lenguaje de marcado extensible de aplicaciones XAML para proporcionar un modelo declarativo para la programación de aplicaciones. Para obtener más información, consulte WPF .NET overview.

Prerrequisitos

Necesita Visual Studio para completar este tutorial. Para obtener una versión gratuita, consulte Visual Studio descargas.

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.

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 Explorador de soluciones, abra el 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 Toolbox. Si no lo ve, seleccione View>Toolbox en la barra de menús o Ctrl+Alt+X.

4. Expanda Common WPF Controls o escriba Text 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.

   Captura de pantalla que muestra el control TextBlock situado en el formulario Greetings con las instrucciones visibles.

   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 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 ArchivoGuardar todo en la barra de menús o presione CtrlMayúsS. 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. Agregas código de Visual Basic a un 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.

   Captura de pantalla que muestra el formulario Greetings con un control TextBlock y dos botones de radio.

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 y a y 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 Button. 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 a .

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

   La ventana debe ser similar a la siguiente imagen.

   Captura de pantalla en la que se muestra el formulario Greetings con el control TextBlock, los botones de radio denominados "Hello" "Goodbye" y el control de botón denominado "Display" colocados en el formulario.

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 .

   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, depure 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 Explorador de soluciones, haga clic con el botón derecho en MainWindow.xaml y elija Rename. 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 produjo una excepción.

   Captura de pantalla que muestra la ventana "Excepción no controlada" con un mensaje System.IO.Exception que lee "No se puede encontrar el recurso mainwindow.xaml".

3. Detenga el depurador. Para ello, elija DepurarDetener 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 Explorador de soluciones, abra el archivo Application.xaml.

5. Cambie a .

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

   Captura de pantalla de la ventana Greetings con los controles TextBlock, RadioButtons y Button visibles. Se selecciona el botón de radio "Hello".

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 obtener más información, consulte Compile a WPF Application y Debug 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:

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

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 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 DepurarPaso 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 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 DepurarDeshabilitar todos los puntos de interrupción.

Compilar una versión de lanzamiento

Después de comprobar que todo funciona, puede preparar una compilación de lanzamiento de su aplicación.

1. Seleccione Compilarsolució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 CompilarCompilar solución.

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

Paso siguiente

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

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

• sugerencias de productividad