Diseñar una interfaz de usuario para una aplicación de WPF

Artículo
10/07/2008

Actualización: noviembre 2007

Puede diseñar una interfaz de usuario para una aplicación de Windows Presentation Foundation (WPF) al igual que puede hacerlo para una aplicación de formularios Windows Forms. Los controles se arrastran desde el Cuadro de herramientas hasta la superficie de diseño. El entorno de desarrollo integrado (IDE) es diferente para las aplicaciones de WPF. Además de tener una ventana Propiedades y un Cuadro de herramientas, el IDE de WPF tiene un editor de XAML. XAML es un lenguaje de marcado de aplicaciones extensible que se puede utilizar para crear una interfaz de usuario. La ilustración siguiente muestra la ubicación del editor de XAML. Para obtener más información, vea Tutorial: Editar XAML en WPF Designer.

Editor de XAML

Así como es posible crear un control escribiendo manualmente el código en el desarrollo con formularios Windows Forms, también puede utilizar el marcado XAML para crear los controles. En la mayoría de los casos, no escribirá XAML para crear controles; es mucho más fácil arrastrar los controles desde el Cuadro de herramientas y dejar que Visual C# Express genere el XAML. Después, puede modificar el marcado XAML para cambiar atributos del control, tales como su Alto o Texto. Por ejemplo, el siguiente marcado XAML se asemeja al marcado que se genera al hacer doble clic en un control Button para agregarlo a una ventana de WPF.

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

De forma predeterminada, los atributos que puede modificar, como el ancho y alto, aparecen en color de fuente rojo. Puede cambiar los valores directamente en el marcado XAML, como se muestra en el ejemplo siguiente.

<Button Height="30" HorizontalAlignment="Left" Margin="10,10,0,0" 
    Name="Button1" VerticalAlignment="Top" Width="60">Submit</Button>

Para crear una aplicación de WPF

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

Se crea un nuevo proyecto WPF. Aparece una nueva ventana denominada Ventana1, y su marcado XAML se puede ver en el editor de XAML del IDE de Visual C# Express.
Haga clic en Ventana1 para seleccionarlo.
En la vista XAML,cambie el Title atributo del elemento Window a WPF Application.

El texto en la barra de título de Ventana1 cambia a Aplicación WPF.

Agregar controles a la ventana de WPF

Puede agregar controles a la ventana de WPF arrastrándolos desde el Cuadro de herramientas. Para obtener más información, vea Controles comunes de WPF.

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.
Haga clic en el control TextBox para seleccionarlo.
En la ventana Propiedades, haga clic en la primera flecha (Izquierda) para la propiedad HorizontalAlignment, como se muestra en la ilustración siguiente.

Propiedad HorizontalAlignment

Mueve el control TextBox del lado derecho de la ventana de WPF al lado izquierdo.
Establezca las siguientes propiedades para TextBox.

Propiedad

Valor

VerticalAlignment

Top

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 la ubicación de TextBox cambian tras escribir los nuevos valores.
Agregue un control Button a la ventana de WPF, al lado de TextBox.
Cambie el texto entre las etiquetas 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 escribir 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 aunque puede hacer clic en el botón y escribir en el cuadro de texto, no ocurre nada al hacerlo. Debe agregar controladores de eventos a los controles y, a continuación, escribir el código que indique al equipo qué acciones debe realizar cuando se hace clic en el botón. Para obtener más información, vea Cómo: Crear controladores de eventos para los controles de WPF.