Diseñar una interfaz de usuario para una aplicación de WPF (Visual Basic)

Artículo
10/07/2008

Actualización: noviembre 2007

En esta lección, obtendrá información sobre cómo crear una aplicación de WPF y cómo agregar controles a la interfaz de usuario.

Diseñar una aplicación de Windows Presentation Foundation (WPF) es como diseñar una aplicación de formularios Windows Forms: los controles se agregan a una superficie de diseño. Sin embargo, hay varias diferencias. Además de tener un diseñador, la ventana Propiedades y el Cuadro de herramientas, hay una ventana que contiene XAML. XAML significa Extensible Application Markup Language (Lenguaje de marcado de aplicaciones extensible). Éste es un lenguaje de marcado que se utiliza para crear una interfaz de usuario. La ilustración siguiente muestra la ubicación predeterminada del editor XAML. Para obtener más información, vea Tutorial: Editar XAML en WPF Designer.

Editor XAML

Al crear una aplicación de formularios Windows Forms convencional, puede arrastrar un control del Cuadro de herramientas a un formulario Windows Forms o, si lo desea, puede escribir el código para crear el control. Al arrastrar el control al formulario, el código se genera automáticamente. De igual forma, al crear una aplicación WPF, puede crear un control escribiendo el marcado XAML o puede arrastrar el control a una ventana de WPF.

El marcado XAML se organiza en elementos que aparecen en un formato jerárquico. Los elementos se encierran entre corchetes angulares, y hay normalmente un elemento de apertura y cierre. Por ejemplo, puede tener un elemento Button simple que aparece del modo siguiente: <Button></Button>. Se describe normalmente cómo aparece un elemento mediante la definición de atributos, como su ubicación, alto y ancho. Los atributos de un elemento parecen propiedades de un objeto porque son descripciones del aspecto físico o estado. Los atributos aparecen dentro de corchetes de apertura y cierre del elemento de apertura. Están compuestos del nombre del atributo, el símbolo de asignación (=) y el valor del atributo entre comillas. Puede especificar el alto, por ejemplo de un elemento Button del modo siguiente: <Button Height="23"></Button>.

Al arrastrar los controles de WPF del Cuadro de herramientas al diseñador, Visual Basic Express genera automáticamente el marcado XAML para el control. Por ejemplo, al hacer doble clic en un control System.Windows.Controls.Button para agregarlo a una ventana de WPF, se genera un marcado XAML similar al siguiente.

<Button Height="23" HorizontalAlignment="Left" Margin="10,10,0,0" 
    Name="Button1" VerticalAlignment="Top" Width="75">Button</Button>

Observe que el elemento Button tiene el atributo Height establecido en "23" y el elemento HorizontalAlignment establecido en "Left". Hay también varios otros atributos que describen el elemento. Puede cambiar estos atributos modificando directamente los valores en el marcado XAML. (De manera predeterminada, estos atributos aparecen en color rojo.) También puede cambiar las propiedades del control mediante la ventana Propiedades.

Inténtelo.

Para crear una aplicación WPF

En el menú Archivo, haga clic en Nuevo proyecto.
En el cuadro de diálogo Nuevo proyecto, en el panel Plantillas, haga clic en Aplicación WPF.
En el cuadro Nombre, escriba VentanaWPF y, a continuación, haga clic en Aceptar.

Se crea un nuevo proyecto de Windows Presentation Foundation. Aparece una nueva ventana denominada Ventana1. Su marcado XAML se muestra en el editor XAML del entorno de desarrollo integrado (IDE) de Visual Basic y aparece del modo siguiente:
```
<Window x:Class="Window1"

xmlns="https://schemas.microsoft.com/winfx/2006/xaml/presentation"
    xmlns:x="https://schemas.microsoft.com/winfx/2006/xaml"
    Title="Window1" Height="300" Width="300">
    <Grid>

    </Grid>
</Window>
```
Haga clic en Ventana1 para seleccionarlo.
En el editor XAML, cambie el atributo Title del elemento Window de Window1 a WPF Application.

El marcado XAML aparecerá ahora del modo siguiente:
```
<Window x:Class="Window1"
    xmlns="https://schemas.microsoft.com/winfx/2006/xaml/presentation"
    xmlns:x="https://schemas.microsoft.com/winfx/2006/xaml"
    Title="WPF Application" Height="300" Width="300">
    <Grid>

    </Grid>
</Window>
```
El texto en la barra de título de Ventana1 cambia a Aplicación WPF.

Pruebe a cambiar otros atributos de la ventana, como Width y Height. Cuando esté listo, continúe con el siguiente procedimiento.

Agregar controles a la ventana de WPF

En este procedimiento, agregará controles a su aplicación. Para ello, debe hacer clic en el control del Cuadro de herramientas, que suele estar situado en el lado izquierdo del IDE de Visual Basic, y arrastrar a continuación el control a la ventana de WPF. Debe establecer algunas propiedades para el control y, a continuación, ajustar el marcado XAML para cambiar el texto y tamaño del control.

Para agregar un control a la ventana de WPF

En el Cuadro de herramientas, arrastre un control TextBox al lado derecho superior de la ventana de WPF.
Seleccione el control TextBox.
En la ventana Propiedades, haga clic en la primera flecha (izquierda) de la propiedad HorizontalAlignment, como se muestra en la ilustración siguiente.

Propiedad HorizontalAlignment

Así, TextBox se mueve del lado derecho de la ventana de WPF al lado izquierdo.
Establezca las siguientes propiedades para TextBox.

Propiedad

Valor

VerticalAlignment

Superior

Width

75

Height

26
En el editor XAML, cambie el atributo Width del elemento TextBox a 140 y cambie el elemento Margin a 30, 56, 0, 0, como se muestra en el ejemplo siguiente.
```
<TextBox Height="26" HorizontalAlignment="Left" Margin="30,56,0,0" 
    Name="TextBox1" VerticalAlignment="Top" Width="140" />
```
El ancho y ubicación de TextBox cambian tras escribir los nuevos valores.
Agregue un control Button a la ventana de WPF, junto a TextBox.
Cambie el texto entre las etiquetas de Button de apertura y cierre de Button a Submit, como se muestra en el ejemplo siguiente.
```
<Button Height="23" HorizontalAlignment="Right" Margin="0,59,35,0" 
    Name="Button1" VerticalAlignment="Top" 
    Width="75">Submit</Button>
```
El texto del botón cambia después de especificar el nuevo valor.
Presione F5 para ejecutar el programa. Aparece una ventana con el cuadro de texto y el botón que acaba de agregar. Observe que puede hacer clic en el botón y escribir en el cuadro de texto. Debe agregar controladores de eventos y, a continuación, escribir código que indique al equipo qué hacer cuando se haga clic en el botón.

Propiedad	Valor
VerticalAlignment	Superior
Width	75
Height	26

Pasos siguientes

En esta lección, aprendió a crear una aplicación WPF y agregarle controles. También aprendió a establecer propiedades de los controles en la ventana Propiedades y a cambiar los atributos de la ventana de WPF y los controles en la vista XAML. En la lección siguiente, obtendrá información sobre algunos de los demás controles disponibles en el Cuadro de herramientas.

Siguiente lección: Usar controles comunes de WPF