Tutorial: Introduccin a WPF

En este tutorial se proporciona una introduccin al desarrollo de aplicaciones de Windows Presentation Foundation (WPF), que incluye los elementos comunes a la mayora de las aplicaciones de WPF: marcado Lenguaje XAML, cdigo subyacente, definiciones de aplicacin, controles, diseo, enlace de datos y estilos. Este tutorial le guiar a lo largo del desarrollo de una aplicacin bsica de WPF mediante los pasos siguientes. Definir XAML para disear la apariencia de la interfaz de usuario (UI) de la aplicacin. Escribir cdigo que determine el comportamiento de la aplicacin. Crear una definicin de aplicacin para administrar la aplicacin. Agregar controles y crear el diseo que compone la interfaz de usuario de la aplicacin. Crear estilos que aporten una apariencia coherente a toda la interfaz de usuario de una aplicacin. Enlazar la interfaz de usuario a datos para rellenar la interfaz de usuario a partir de datos y mantener los datos sincronizados con la interfaz de usuario. Cuando termine el tutorial, habr compilado una aplicacin independiente de Windows que permitir a los usuarios ver los informes de gastos de las personas seleccionadas.La aplicacin constar de varias pginas de WPF hospedadas en una ventana del estilo del explorador. El cdigo de ejemplo que se utiliza para compilar este tutorial est disponible para Microsoft Visual Basic y C#; vea Introduction to Building WPF Applications.

Requisitos previos
Necesita los componentes siguientes para completar este tutorial: Visual Studio 2012 Para obtener ms informacin sobre cmo instalar Visual Studio, vea Instalar Visual Studio.

Crear el proyecto de aplicacin

En esta seccin, crear la infraestructura de la aplicacin, que incluye una definicin de aplicacin, dos pginas y una imagen. 1. Cree un nuevo proyecto de aplicacin WPF en Visual Basic o Visual C# denominado ExpenseIt. Para obtener ms informacin, vea Cmo: Crear un nuevo proyecto de aplicacin de WPF.

Nota

En este tutorial se utiliza el control DataGrid que est disponible en .NET Framework 4. Asegrese d Framework 4. Para obtener ms informacin, vea Cmo: Usar como destino una versin de .NET Fra
2. Abra Application.xaml (Visual Basic) o App.xaml (C#). Este archivo XAML define una aplicacin WPF y los recursos de la aplicacin. Tambin se utiliza este archivo para especificar la interfaz de usuario que se muestra automticamente cuando se inicia la aplicacin; en este caso, MainWindow.xaml.

Su XAML se debera parecer a lo siguiente en Visual Basic: XAML

<Application x:Class="Application" xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation" xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml" StartupUri="MainWindow.xaml"> <Application.Resources> </Application.Resources> </Application>

O as en C#: XAML

<Application x:Class="ExpenseIt.App" xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation" xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml" StartupUri="MainWindow.xaml"> <Application.Resources> </Application.Resources> </Application>

3.

4.

5.

Abra MainWindow.xaml. Este archivo de cdigo XAML es la ventana principal de la aplicacin y muestra contenido creado en pginas. La clase Window define las propiedades de una ventana, como su ttulo, tamao o icono, y controla los eventos, como cerrarse u ocultarse. Cambie el elemento Window por NavigationWindow. Esta aplicacin navegar a contenido diferente segn la interaccin del usuario. Por consiguiente, Window principal necesita cambiar a NavigationWindow.NavigationWindow hereda todas las propiedades de Window. El elemento NavigationWindow del archivo XAML crea una instancia de la clase NavigationWindow.Para obtener ms informacin, consulte Informacin general sobre navegacin. Cambie las siguientes propiedades en el elemento NavigationWindow: o Establezca la propiedad Title en "ExpenseIt". o Establezca la propiedad Width en 500 pxeles. o Establezca la propiedad Height en 350 pxeles.

o Quite los elementos Grid entre las etiquetas NavigationWindow. Su XAML se debera parecer a lo siguiente en Visual Basic: XAML

<NavigationWindow x:Class="MainWindow" xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation" xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml" Title="ExpenseIt" Height="350" Width="500"> </NavigationWindow>

O as en C#: XAML

<NavigationWindow x:Class="ExpenseIt.MainWindow" xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation" xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml" Title="ExpenseIt" Height="350" Width="500"> </NavigationWindow>

6.

7.

Abra MainWindow.xaml.vb o MainWindow.xaml.cs. Este archivo es un archivo de cdigo subyacente que contiene el cdigo para controlar los eventos declarados en MainWindow.xaml. Este archivo contiene una clase parcial para la ventana definida en XAML. Si est utilizando C#, cambie la clase MainWindow para que se derive de NavigationWindow. En Visual Basic, esto sucede automticamente al cambiar la ventana en XAML. El cdigo debe ser similar al que se muestra a continuacin. C# VB

using using using using using

System; System.Collections.Generic; System.Linq; System.Text; System.Windows;

using using using using using using using using

System.Windows.Controls; System.Windows.Data; System.Windows.Documents; System.Windows.Input; System.Windows.Media; System.Windows.Media.Imaging; System.Windows.Navigation; System.Windows.Shapes;

namespace ExpenseIt { /// <summary> /// Interaction logic for MainWindow.xaml /// </summary> public partial class MainWindow : NavigationWindow { public MainWindow() { InitializeComponent(); } } }

Agregar archivos a la aplicacin

En esta seccin, agregar dos pginas y una imagen a la aplicacin. 1. Agregue una nueva pgina (WPF) al proyecto denominada ExpenseItHome.xaml. Para obtener ms informacin, consulte Cmo: Agregar nuevos elementos a un proyecto de WPF. Esta pgina es la primera pgina que se muestra cuando se inicia la aplicacin. Mostrar una lista de personas y el usuario podr seleccionar en esa lista la persona cuyo informe de gastos desee mostrar. 2. Abra ExpenseItHome.xaml. 3. Establezca Title en "ExpenseIt - Home". Su XAML se debera parecer a lo siguiente en Visual Basic: XAML

<Page x:Class="ExpenseItHome" xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation" xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml" xmlns:mc="http://schemas.openxmlformats.org/markupcompatibility/2006" xmlns:d="http://schemas.microsoft.com/expression/blend/2008" mc:Ignorable="d"

d:DesignHeight="300" d:DesignWidth="300" Title="ExpenseIt - Home"> <Grid> </Grid> </Page>

O a esto en C#: XAML

<Page x:Class="ExpenseIt.ExpenseItHome" xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation" xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml" xmlns:mc="http://schemas.openxmlformats.org/markupcompatibility/2006" xmlns:d="http://schemas.microsoft.com/expression/blend/2008" mc:Ignorable="d" d:DesignHeight="300" d:DesignWidth="300" Title="ExpenseIt - Home"> <Grid> </Grid> </Page>

4. 5.

Abra MainWindow.xaml. Establezca la propiedad Source de NavigationWindow en "ExpenseItHome.xaml". Esto establece ExpenseItHome.xaml como la primera pgina que se abre cuando se inicia la aplicacin. Su XAML se debera parecer a lo siguiente en Visual Basic: XAML

<NavigationWindow x:Class="MainWindow" xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation" xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml" Title="ExpenseIt" Height="350" Width="500" Source="ExpenseItHome.xaml"> </NavigationWindow>

O a esto en C#: XAML

<NavigationWindow x:Class="ExpenseIt.MainWindow" xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation" xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml" Title="ExpenseIt" Height="350" Width="500" Source="ExpenseItHome.xaml"> </NavigationWindow>

6.

7. 8.

Agregue una nueva pgina (WPF) al proyecto denominada ExpenseReportPage.xaml. Esta pgina mostrar el informe de gastos de la persona que est seleccionada en ExpenseItHome.xaml. Abra ExpenseReportPage.xaml. Establezca Title en "ExpenseIt - View Expense". Su XAML se debera parecer a lo siguiente en Visual Basic: XAML

<Page x:Class="ExpenseReportPage" xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation" xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml" xmlns:mc="http://schemas.openxmlformats.org/markupcompatibility/2006" xmlns:d="http://schemas.microsoft.com/expression/blend/2008" mc:Ignorable="d" d:DesignHeight="300" d:DesignWidth="300" Title="ExpenseIt - View Expense"> <Grid> </Grid> </Page>

O a esto en C#: XAML

<Page x:Class="ExpenseIt.ExpenseReportPage" xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation" xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml" xmlns:mc="http://schemas.openxmlformats.org/markupcompatibility/2006" xmlns:d="http://schemas.microsoft.com/expression/blend/2008" mc:Ignorable="d" d:DesignHeight="300" d:DesignWidth="300" Title="ExpenseIt - View Expense"> <Grid> </Grid> </Page>

9.

Abra ExpenseItHome.xaml.vb y ExpenseReportPage.xaml.vb o ExpenseItHome.xaml.cs y ExpenseReportPage.xaml.cs. Al crear un nuevo archivo de paginacin, Visual Studio crea automticamente un cdigo subyacente. Estos archivos de cdigo subyacente controlan la lgica para responder a los datos proporcionados por el usuario. El cdigo debe ser similar al que se muestra a continuacin. VB

Class ExpenseItHome End Class

C#

using using using using using using using using using using using

System; System.Collections.Generic; System.Linq; System.Text; System.Windows; System.Windows.Controls; System.Windows.Data; System.Windows.Documents; System.Windows.Input; System.Windows.Media; System.Windows.Media.Imaging;

using System.Windows.Navigation; using System.Windows.Shapes; namespace ExpenseIt { /// <summary> /// Interaction logic for ExpenseItHome.xaml /// </summary> public partial class ExpenseItHome : Page { public ExpenseItHome() { InitializeComponent(); } } }

VB

Class ExpenseReportPage End Class

C#

using using using using using using using using using using using using using

System; System.Collections.Generic; System.Linq; System.Text; System.Windows; System.Windows.Controls; System.Windows.Data; System.Windows.Documents; System.Windows.Input; System.Windows.Media; System.Windows.Media.Imaging; System.Windows.Navigation; System.Windows.Shapes;

namespace ExpenseIt { /// <summary> /// Interaction logic for ExpenseReportPage.xaml

/// </summary> public partial class ExpenseReportPage : Page { public ExpenseReportPage() { InitializeComponent(); } } }

10. Agregue una imagen denominada watermark.png al proyecto. Puede crear su propia imagen o copiar el archivo del cdigo de ejemplo. Para obtener ms informacin, vea How to: Add Existing Items to a Project.

Compilar y ejecutar la aplicacin

En esta seccin, se compila y ejecuta la aplicacin. 1. Compile y ejecute la aplicacin presionando F5 o seleccione Iniciar depuracin en el men Debug. La siguiente ilustracin muestra la aplicacin con los botones NavigationWindow.

2.

Cierre la aplicacin para volver a Visual Studio.

Crear el diseo
El diseo proporciona un modo ordenado de colocar los elementos de la interfaz de usuario, y tambin controla el tamao y la posicin de los mismos cuando la interfaz de usuario cambia de tamao. Normalmente se crea un diseo con uno de los controles de diseo siguientes: Canvas DockPanel Grid StackPanel VirtualizingStackPanel WrapPanel Cada uno de estos controles de diseo admite un tipo de diseo especial para sus elementos secundarios. Es posible cambiar de tamao las pginas de ExpenseIt, y cada pgina tiene elementos

organizados horizontal y verticalmente junto con otros elementos. Por lo tanto, Grid es el elemento de diseo ideal para la aplicacin.

Nota

Para obtener ms informacin sobre los elementos Panel, vea Informacin general sobre elementos Panel. Pa vea Diseo.
En la seccin, cree una tabla con una columna nica con tres filas y un margen de 10 pxeles agregando definiciones de columna y de fila a la Grid de ExpenseItHome.xaml. 1. Abra ExpenseItHome.xaml. 2. Establezca la propiedad Margin en el elemento Grid en "10,0,10,10", que corresponde a los mrgenes izquierdo, superior, derecho e inferior. 3. Agregue el siguiente XAML entre las etiquetas Grid para crear las definiciones de columna y fila. XAML

<Grid.ColumnDefinitions> <ColumnDefinition /> </Grid.ColumnDefinitions> <Grid.RowDefinitions> <RowDefinition Height="Auto"/> <RowDefinition /> <RowDefinition Height="Auto"/> </Grid.RowDefinitions>

El Height de dos filas est establecido en Auto, lo que quiere decir que las filas se dimensionarn segn su contenido. El Height predeterminado es Star, que significa que la fila ser una proporcin ponderada del espacio disponible. Por ejemplo si cada una de dos filas tiene un alto de "*", ambas tendrn un alto que es la mitad del espacio disponible. Su Grid debe tener la apariencia siguiente: XAML

<Grid Margin="10,0,10,10"> <Grid.ColumnDefinitions> <ColumnDefinition /> </Grid.ColumnDefinitions> <Grid.RowDefinitions> <RowDefinition Height="Auto"/> <RowDefinition /> <RowDefinition Height="Auto"/> </Grid.RowDefinitions>

</Grid>

Agregar controles
En esta seccin, se actualiza la interfaz de usuario de la pgina principal para mostrar una lista de personas y los usuarios pueden seleccionar el nombre de la persona cuyo informe de gastos desean ver. Los controles son objetos de interfaz de usuario que permiten a los usuarios interactuar con una aplicacin. Para obtener ms informacin, vea Controles. Para crear esta interfaz de usuario, se han agregado los elementos siguientes a ExpenseItHome.xaml: Un control ListBox (para la lista de personas). Un control Label (para el encabezado de la lista). Un control Button (para hacer clic con objeto de ver el informe de gastos de la persona que est seleccionada en la lista). Cada control se coloca en una fila de la Grid estableciendo la propiedad adjunta Grid.Row. Para obtener ms informacin sobre propiedades adjuntas, vea Informacin general sobre propiedades asociadas. 1. Abra ExpenseItHome.xaml. 2. Agregue el cdigo XAML siguiente entre las etiquetas Grid. XAML

<!-- People list --> <Border Grid.Column="0" Grid.Row="0" Height="35" Padding="5" Background="#4E87D4"> <Label VerticalAlignment="Center" Foreground="White">Names</Label> </Border> <ListBox Name="peopleListBox" Grid.Column="0" Grid.Row="1"> <ListBoxItem>Mike</ListBoxItem> <ListBoxItem>Lisa</ListBoxItem> <ListBoxItem>John</ListBoxItem> <ListBoxItem>Mary</ListBoxItem> </ListBox> <!-- View report button --> <Button Grid.Column="0" Grid.Row="2" Margin="0,10,0,0" Width="125" Height="25" HorizontalAlignment="Right">View</Button>

3. Compile y ejecute la aplicacin. La siguiente ilustracin muestra los controles que crea el XAML en esta seccin.

Agregar una imagen y un ttulo

En esta seccin, la interfaz de usuario de la pgina principal se actualiza con una imagen y un ttulo de pgina. 1. Abra ExpenseItHome.xaml. 2. Agregue otra columna a ColumnDefinitions con un Width fijo de 230 pxeles. XAML

<Grid.ColumnDefinitions> <ColumnDefinition Width="230" /> <ColumnDefinition /> </Grid.ColumnDefinitions>

3.

Agregue otra fila a RowDefinitions. XAML

<Grid.RowDefinitions> <RowDefinition/> <RowDefinition Height="Auto"/> <RowDefinition /> <RowDefinition Height="Auto"/> </Grid.RowDefinitions>

4.

Mueva los controles a la segunda columna estableciendo Grid.Column en 1. Baje cada control una fila aumentando Grid.Row en 1. XAML

<Border Grid.Column="1" Grid.Row="1" Height="35" Padding="5" Background="#4E87D4"> <Label VerticalAlignment="Center" Foreground="White">Names</Label> </Border> <ListBox Name="peopleListBox" Grid.Column="1" Grid.Row="2"> <ListBoxItem>Mike</ListBoxItem> <ListBoxItem>Lisa</ListBoxItem> <ListBoxItem>John</ListBoxItem> <ListBoxItem>Mary</ListBoxItem> </ListBox> <!-- View report button --> <Button Grid.Column="1" Grid.Row="3" Margin="0,10,0,0" Width="125" Height="25" HorizontalAlignment="Right">View</Button>

5.

Establezca Background de Grid para que sea el archivo de imagen watermark.png. XAML

<Grid.Background> <ImageBrush ImageSource="watermark.png"/> </Grid.Background>

6.

Antes de Border, agregue Label con el contenido "View Expense Report" para que sea el ttulo de la pgina. XAML

<Label Grid.Column="1" VerticalAlignment="Center" FontFamily="Trebuchet MS" FontWeight="Bold" FontSize="18" Foreground="#0066cc"> View Expense Report </Label>

7. Compile y ejecute la aplicacin. En la ilustracin siguiente se muestra el resultado de esta seccin.

Agregar cdigo para controlar eventos

1. 2. Abra ExpenseItHome.xaml. Agregue el controlador de eventos Click al elemento Button. Para obtener ms informacin, vea Cmo: Crear controladores de eventos simples. XAML

<!-- View report button --> <Button Grid.Column="1" Grid.Row="3" Margin="0,10,0,0" Width="125" Height="25" HorizontalAlignment="Right" Click="Button_Click">View</Button>

3. 4.

Abra ExpenseItHome.xaml.vb o ExpenseItHome.xaml.cs. Agregue el siguiente cdigo al controlador de eventos Click, que hace que la ventana navegue hasta el archivo ExpenseReportPage.xaml. C# VB

private void Button_Click(object sender, RoutedEventArgs e)

{ // View Expense Report ExpenseReportPage expenseReportPage = new ExpenseReportPage(); this.NavigationService.Navigate(expenseReportPage); }

Crear la interfaz de usuario para ExpenseReportPage

ExpenseReportPage.xaml muestra el informe de gastos de la persona que se seleccion en ExpenseItHome.xaml. En esta seccin se agregan los controles y se crea la interfaz de usuario para ExpenseReportPage.xaml. Tambin se agrega un fondo y colores de relleno a los distintos elementos de la interfaz de usuario. 1. Abra ExpenseReportPage.xaml. 2. Agregue el cdigo XAML siguiente entre las etiquetas Grid. Esta interfaz de usuario es similar a la interfaz de usuario creada en ExpenseItHome.xaml, con la salvedad de que los datos del informe se muestran en DataGrid. XAML

<Grid.Background> <ImageBrush ImageSource="watermark.png" /> </Grid.Background> <Grid.ColumnDefinitions> <ColumnDefinition Width="230" /> <ColumnDefinition /> </Grid.ColumnDefinitions> <Grid.RowDefinitions> <RowDefinition Height="Auto" /> <RowDefinition /> </Grid.RowDefinitions>

<Label Grid.Column="1" VerticalAlignment="Center" FontFamily="Trebuchet MS" FontWeight="Bold" FontSize="18" Foreground="#0066cc"> Expense Report For: </Label> <Grid Margin="10" Grid.Column="1" Grid.Row="1"> <Grid.ColumnDefinitions> <ColumnDefinition /> <ColumnDefinition /> </Grid.ColumnDefinitions> <Grid.RowDefinitions>

<RowDefinition Height="Auto" /> <RowDefinition Height="Auto" /> <RowDefinition /> </Grid.RowDefinitions> <!-- Name --> <StackPanel Grid.Column="0" Grid.ColumnSpan="2" Grid.Row="0" Orientation="Horizontal"> <Label Margin="0,0,0,5" FontWeight="Bold">Name:</Label> <Label Margin="0,0,0,5" FontWeight="Bold"></Label> </StackPanel> <!-- Department --> <StackPanel Grid.Column="0" Grid.ColumnSpan="2" Grid.Row="1" Orientation="Horizontal"> <Label Margin="0,0,0,5" FontWeight="Bold">Department:</Label> <Label Margin="0,0,0,5" FontWeight="Bold"></Label> </StackPanel> <Grid Grid.Column="0" Grid.ColumnSpan="2" Grid.Row="2" VerticalAlignment="Top" HorizontalAlignment="Left"> <!-- Expense type and Amount table --> <DataGrid AutoGenerateColumns="False" RowHeaderWidth="0" > <DataGrid.ColumnHeaderStyle> <Style TargetType="{x:Type DataGridColumnHeader}"> <Setter Property="Height" Value="35" /> <Setter Property="Padding" Value="5" /> <Setter Property="Background" Value="#4E87D4" /> <Setter Property="Foreground" Value="White" /> </Style> </DataGrid.ColumnHeaderStyle> <DataGrid.Columns> <DataGridTextColumn Header="ExpenseType" /> <DataGridTextColumn Header="Amount" /> </DataGrid.Columns> </DataGrid> </Grid> </Grid>

3.

Compile y ejecute la aplicacin.

Nota

Si obtiene un error que indica que DataGrid no se encuentra o no existe, asegrese de que el proyecto 4. Para obtener ms informacin, vea Cmo: Usar como destino una versin de .NET Framework.
Haga clic en el botn Ver. Aparecer la pgina de informe de gastos. La ilustracin siguiente muestra los elementos de la interfaz de usuario agregados a ExpenseReportPage.xaml. Observe que el botn de navegacin hacia atrs est habilitado. 4.

Estilo de los controles

Es habitual que todos los elementos del mismo tipo de una interfaz de usuario presenten la misma apariencia. interfaz de usuario utiliza estilos para permitir la reutilizacin de las distintas apariencias en diversos elementos. Esta posibilidad de reutilizar los estilos ayuda a simplificar la creacin y la administracin de XAML. Para obtener ms informacin acerca de los estilos, consulte Aplicar estilos y plantillas. En esta seccin se reemplazan por estilos los atributos que se definieron en pasos anteriores para los distintos elementos. 1. Abra Application.xaml o App.xaml. 2. Agregue el cdigo XAML siguiente entre las etiquetas Application.Resources: XAML

<!-- Header text style --> <Style x:Key="headerTextStyle"> <Setter Property="Label.VerticalAlignment" Value="Center"></Setter> <Setter Property="Label.FontFamily" Value="Trebuchet MS"></Setter> <Setter Property="Label.FontWeight" Value="Bold"></Setter> <Setter Property="Label.FontSize" Value="18"></Setter> <Setter Property="Label.Foreground" Value="#0066cc"></Setter> </Style>

<!-- Label style --> <Style x:Key="labelStyle" TargetType="{x:Type Label}"> <Setter Property="VerticalAlignment" Value="Top" /> <Setter Property="HorizontalAlignment" Value="Left" /> <Setter Property="FontWeight" Value="Bold" /> <Setter Property="Margin" Value="0,0,0,5" /> </Style> <!-- DataGrid header style --> <Style x:Key="columnHeaderStyle" TargetType="{x:Type DataGridColumnHeader}"> <Setter Property="Height" Value="35" /> <Setter Property="Padding" Value="5" /> <Setter Property="Background" Value="#4E87D4" /> <Setter Property="Foreground" Value="White" /> </Style> <!-- List header style --> <Style x:Key="listHeaderStyle" TargetType="{x:Type Border}"> <Setter Property="Height" Value="35" /> <Setter Property="Padding" Value="5" /> <Setter Property="Background" Value="#4E87D4" /> </Style> <!-- List header text style --> <Style x:Key="listHeaderTextStyle" TargetType="{x:Type Label}"> <Setter Property="Foreground" Value="White" /> <Setter Property="VerticalAlignment" Value="Center" /> <Setter Property="HorizontalAlignment" Value="Left" /> </Style> <!-- Button style --> <Style x:Key="buttonStyle" TargetType="{x:Type Button}"> <Setter Property="Width" Value="125" /> <Setter Property="Height" Value="25" /> <Setter Property="Margin" Value="0,10,0,0" /> <Setter Property="HorizontalAlignment" Value="Right" /> </Style>

Este XAML agrega los estilos siguientes: o headerTextStyle: para dar formato al control Label de ttulo de pgina. o labelStyle: para dar formato a los controles Label. o columnHeaderStyle: para dar formato a DataGridColumnHeader. o listHeaderStyle: para dar formato a los controles Border de encabezado de lista. o listHeaderTextStyle: para dar formato a los controles Label de encabezado de lista.

3. 4.

o buttonStyle: para dar formato a Button en "ExpenseItHome.xaml". Observe que los estilos son recursos y elementos secundarios del elemento de propiedad Application.Resources. En esta ubicacin, los estilos se aplican a todos los elementos de una aplicacin. Para obtener un ejemplo del uso de los recursos en una aplicacin de .NET Framework, consulte Cmo: Usar recursos de aplicaciones. Abra ExpenseItHome.xaml. Reemplace todo lo que hay entre los elementos Grid por el siguiente XAML. XAML

<Grid.Background> <ImageBrush ImageSource="watermark.png" </Grid.Background> <Grid.ColumnDefinitions> <ColumnDefinition Width="230" /> <ColumnDefinition /> </Grid.ColumnDefinitions> <Grid.RowDefinitions> <RowDefinition/> <RowDefinition Height="Auto"/> <RowDefinition /> <RowDefinition Height="Auto"/> </Grid.RowDefinitions> <!-- People list -->

/>

<Label Grid.Column="1" Style="{StaticResource headerTextStyle}" > View Expense Report </Label> <Border Grid.Column="1" Grid.Row="1" Style="{StaticResource listHeaderStyle}"> <Label Style="{StaticResource listHeaderTextStyle}">Names</Label> </Border> <ListBox Name="peopleListBox" Grid.Column="1" Grid.Row="2"> <ListBoxItem>Mike</ListBoxItem> <ListBoxItem>Lisa</ListBoxItem> <ListBoxItem>John</ListBoxItem> <ListBoxItem>Mary</ListBoxItem> </ListBox> <!-- View report button --> <Button Grid.Column="1" Grid.Row="3" Click="Button_Click" Style="{StaticResource buttonStyle}">View</Button>

5. 6.

Las propiedades como VerticalAlignment y FontFamily que definen la apariencia de cada control se quitan y reemplazan aplicando los estilos. Por ejemploheaderTextStyle se aplica a Label "View Expense Report". Abra ExpenseReportPage.xaml. Reemplace todo lo que hay entre los elementos Grid por el siguiente XAML. XAML

<Grid.Background> <ImageBrush ImageSource="watermark.png" /> </Grid.Background> <Grid.ColumnDefinitions> <ColumnDefinition Width="230" /> <ColumnDefinition /> </Grid.ColumnDefinitions> <Grid.RowDefinitions> <RowDefinition Height="Auto" /> <RowDefinition /> </Grid.RowDefinitions>

<Label Grid.Column="1" Style="{StaticResource headerTextStyle}"> Expense Report For: </Label> <Grid Margin="10" Grid.Column="1" Grid.Row="1"> <Grid.ColumnDefinitions> <ColumnDefinition /> <ColumnDefinition /> </Grid.ColumnDefinitions> <Grid.RowDefinitions> <RowDefinition Height="Auto" /> <RowDefinition Height="Auto" /> <RowDefinition /> </Grid.RowDefinitions> <!-- Name --> <StackPanel Grid.Column="0" Grid.ColumnSpan="2" Grid.Row="0" Orientation="Horizontal"> <Label Style="{StaticResource labelStyle}">Name:</Label> <Label Style="{StaticResource labelStyle}"></Label> </StackPanel> <!-- Department --> <StackPanel Grid.Column="0" Grid.ColumnSpan="2" Grid.Row="1" Orientation="Horizontal">

<Label Style="{StaticResource labelStyle}">Department:</Label> <Label Style="{StaticResource labelStyle}"></Label> </StackPanel> <Grid Grid.Column="0" Grid.ColumnSpan="2" Grid.Row="2" VerticalAlignment="Top" HorizontalAlignment="Left"> <!-- Expense type and Amount table --> <DataGrid ColumnHeaderStyle="{StaticResource columnHeaderStyle}" AutoGenerateColumns="False" RowHeaderWidth="0" > <DataGrid.Columns> <DataGridTextColumn Header="ExpenseType" /> <DataGridTextColumn Header="Amount" /> </DataGrid.Columns> </DataGrid> </Grid> </Grid>

7.

Esto agrega estilos a los elementos Border y Label. Compile y ejecute la aplicacin. Despus de agregar el marcado XAML de esta seccin, la aplicacin presenta la misma apariencia que tena antes de actualizarla con los estilos.

Enlazar datos a controles

En esta seccin se crean los datos XML que se enlazan a varios controles. 1. Abra ExpenseItHome.xaml. 2. Despus del elemento inicial Grid, agregue el siguiente XAML para crear un XmlDataProvider que contenga los datos de cada persona. Los datos se crean como un recurso Grid. Normalmente esto se cargara como un archivo, pero por sencillez los datos se agregan alineados. XAML

<Grid.Resources>

...

<!-- Expense Report Data --> <XmlDataProvider x:Key="ExpenseDataSource" XPath="Expenses"> <x:XData> <Expenses xmlns="">

<Person Name="Mike" Department="Legal"> <Expense ExpenseType="Lunch" ExpenseAmount="50" /> <Expense ExpenseType="Transportation" ExpenseAmount="50" /> </Person> <Person Name="Lisa" Department="Marketing"> <Expense ExpenseType="Document printing" ExpenseAmount="50"/> <Expense ExpenseType="Gift" ExpenseAmount="125" /> </Person> <Person Name="John" Department="Engineering"> <Expense ExpenseType="Magazine subscription" ExpenseAmount="50"/> <Expense ExpenseType="New machine" ExpenseAmount="600" /> <Expense ExpenseType="Software" ExpenseAmount="500" /> </Person> <Person Name="Mary" Department="Finance"> <Expense ExpenseType="Dinner" ExpenseAmount="100" /> </Person> </Expenses> </x:XData> </XmlDataProvider>

...

</Grid.Resources>

3.

En el recurso Grid, agregue la siguiente DataTemplate, que define cmo mostrar los datos en ListBox. Para obtener ms informacin sobre plantillas de datos, veaInformacin general sobre plantillas de datos. XAML

<Grid.Resources>

...

<!-- Name item template --> <DataTemplate x:Key="nameItemTemplate">

<Label Content="{Binding XPath=@Name}"/> </DataTemplate>

...

</Grid.Resources>

4.

Reemplace ListBox por el siguiente XAML. XAML

<ListBox Name="peopleListBox" Grid.Column="1" Grid.Row="2" ItemsSource="{Binding Source={StaticResource ExpenseDataSource}, XPath=Person}" ItemTemplate="{StaticResource nameItemTemplate}"> </ListBox>

Este XAML enlaza la propiedad ItemsSource de ListBox al origen de datos y aplica la plantilla de datos como ItemTemplate.

Conectar los datos a los controles

En esta seccin, escribir el cdigo que recupera el elemento actual que est seleccionado en la lista de personas de la pgina ExpenseItHome.xaml y que pasa su referencia al constructor de ExpenseReportPage durante la creacin de instancias. ExpenseReportPage establece su contexto de datos con el elemento que se pasa, que es el elemento con el que se enlazarn los controles definidos en ExpenseReportPage.xaml. 1. Abra ExpenseReportPage.xaml.vb o ExpenseReportPage.xaml.cs. 2. Agregue un constructor que tome un objeto de modo que pueda pasar los datos del informe de gastos de la persona seleccionada. C# VB

public partial class ExpenseReportPage : Page { public ExpenseReportPage() { InitializeComponent(); }

// Custom constructor to pass expense report data public ExpenseReportPage(object data):this() { // Bind to expense report data. this.DataContext = data; } }

3. 4.

Abra ExpenseItHome.xaml.vb o ExpenseItHome.xaml.cs. Cambie el controlador de eventos Click para llamar al nuevo constructor que pasa los datos del informe de gastos de la persona seleccionada. C# VB

private void Button_Click(object sender, RoutedEventArgs e) { // View Expense Report ExpenseReportPage expenseReportPage = new ExpenseReportPage(this.peopleListBox.SelectedItem); this.NavigationService.Navigate(expenseReportPage); }

Dar estilos a los datos con plantillas de datos

En esta seccin, actualizar la interfaz de usuario para cada elemento de las listas enlazadas a datos utilizando las plantillas de datos. 1. Abra ExpenseReportPage.xaml. 2. Enlace el contenido de elementos Label "Department" y "Name" a la propiedad de origen de datos adecuada. Para obtener ms informacin sobre el enlace de datos, vea Informacin general sobre el enlace de datos. XAML

<!-- Name --> <StackPanel Grid.Column="0" Grid.ColumnSpan="2" Grid.Row="0" Orientation="Horizontal"> <Label Style="{StaticResource labelStyle}">Name:</Label>

<Label Style="{StaticResource labelStyle}" Content="{Binding XPath=@Name}"></Label> </StackPanel> <!-- Department --> <StackPanel Grid.Column="0" Grid.ColumnSpan="2" Grid.Row="1" Orientation="Horizontal"> <Label Style="{StaticResource labelStyle}">Department:</Label> <Label Style="{StaticResource labelStyle}" Content="{Binding XPath=@Department}"></Label> </StackPanel>

3.

Despus de abrir el elemento Grid, agregue las siguientes plantillas de datos, que definen cmo mostrar los datos del informe de gastos. XAML

<!--Templates to display expense report data--> <Grid.Resources> <!-- Reason item template --> <DataTemplate x:Key="typeItemTemplate"> <Label Content="{Binding XPath=@ExpenseType}"/> </DataTemplate> <!-- Amount item template --> <DataTemplate x:Key="amountItemTemplate"> <Label Content="{Binding XPath=@ExpenseAmount}"/> </DataTemplate> </Grid.Resources>

4.

Aplique las plantillas a las columnas de DataGrid que muestran los datos del informe de gastos. XAML

<!-- Expense type and Amount table --> <DataGrid ItemsSource="{Binding XPath=Expense}" ColumnHeaderStyle="{StaticResource columnHeaderStyle}" AutoGenerateColumns="False" RowHeaderWidth="0" > <DataGrid.Columns> <DataGridTextColumn Header="ExpenseType" Binding="{Binding XPath=@ExpenseType}" />

<DataGridTextColumn Header="Amount" Binding="{Binding XPath=@ExpenseAmount}" /> </DataGrid.Columns> </DataGrid>

5. Compile y ejecute la aplicacin. 6. Seleccione una persona y haga clic en el botn Ver. En la siguiente ilustracin se muestran las dos pginas de la aplicacin ExpenseIt con los controles, el diseo, los estilos, el enlace de datos y las plantillas de datos aplicados.