Tutorial: crear su primera aplicación de WPF en Visual Studio 2019Tutorial: Create your first WPF application in Visual Studio 2019

En este artículo se muestra cómo desarrollar una aplicación de escritorio Windows Presentation Foundation (WPF) que incluya los elementos que son comunes a la mayoría de las aplicaciones de WPF: marcado de lenguaje XAML (XAML), código subyacente, definiciones de aplicación, controles, diseño, enlace de datos y estilos.This article shows you how to develop a Windows Presentation Foundation (WPF) desktop application that includes the elements that are common to most WPF applications: Extensible Application Markup Language (XAML) markup, code-behind, application definitions, controls, layout, data binding, and styles. Para desarrollar la aplicación, usará Visual Studio.To develop the application, you'll use Visual Studio.

En este tutorial aprenderá a:In this tutorial, you learn how to:

  • Cree un proyecto de WPF.Create a WPF project.
  • Use XAML para diseñar la apariencia de la interfaz de usuario (UI) de la aplicación.Use XAML to design the appearance of the application's user interface (UI).
  • Escriba código para compilar el comportamiento de la aplicación.Write code to build the application's behavior.
  • Cree una definición de aplicación para administrar la aplicación.Create an application definition to manage the application.
  • Agregue controles y cree el diseño para crear la interfaz de usuario de la aplicación.Add controls and create the layout to compose the application UI.
  • Cree estilos para un aspecto coherente en la interfaz de usuario de la aplicación.Create styles for a consistent appearance throughout the application's UI.
  • Enlace la interfaz de usuario a los datos, para rellenar la interfaz de usuario a partir de los datos y para mantener sincronizados los datos y la interfaz de usuario.Bind the UI to data, both to populate the UI from data and to keep the data and UI synchronized.

Al final del tutorial, habrá creado una aplicación de Windows independiente que permite a los usuarios ver informes de gastos para personas seleccionadas.By the end of the tutorial, you'll have built a standalone Windows application that allows users to view expense reports for selected people. La aplicación se compone de varias páginas de WPF que se hospedan en una ventana de estilo de explorador.The application is composed of several WPF pages that are hosted in a browser-style window.

Sugerencia

El código de ejemplo que se usa en este tutorial está disponible para Visual Basic y C# en el tutorial del código de ejemplo de la aplicación WPF.The sample code that is used in this tutorial is available for both Visual Basic and C# at Tutorial WPF App Sample Code.

Puede alternar el lenguaje de código del código de ejemplo entre C# y Visual Basic mediante el selector de idioma situado en la parte superior de esta página.You can toggle the code language of the sample code between C# and Visual Basic by using the language selector on top of this page.

Requisitos previosPrerequisites

Crear el proyecto de aplicaciónCreate the application project

El primer paso es crear la infraestructura de la aplicación, que incluye una definición de aplicación, dos páginas y una imagen.The first step is to create the application infrastructure, which includes an application definition, two pages, and an image.

  1. Cree un nuevo proyecto de aplicación de WPF en Visual Basic C# o Visual denominado ExpenseIt :Create a new WPF Application project in Visual Basic or Visual C# named ExpenseIt:

    1. Abra Visual Studio y seleccione crear un nuevo proyecto en el menú introducción.Open Visual Studio and select Create a new project under the Get started menu.

      Se abre el cuadro de diálogo crear nuevo proyecto .The Create a new project dialog opens.

    2. En la lista desplegable idioma , C# seleccione o Visual Basic.In the Language dropdown, select either C# or Visual Basic.

    3. Seleccione la plantilla aplicación WPF (.NET Framework) y, después, seleccione siguiente.Select the WPF App (.NET Framework) template and then select Next.

      Cuadro de diálogo Crear nuevo proyecto

      Se abre el cuadro de diálogo configurar el nuevo proyecto .The Configure your new project dialog opens.

    4. Escriba el nombre del proyecto ExpenseIt y, a continuación, seleccione crear.Enter the project name ExpenseIt and then select Create.

      Cuadro de diálogo Configurar un nuevo proyecto

      Visual Studio crea el proyecto y abre el diseñador de la ventana de la aplicación predeterminada denominada MainWindow. Xaml.Visual Studio creates the project and opens the designer for the default application window named MainWindow.xaml.

  2. Abra Application. Xaml (Visual Basic) o app. Xaml (C#).Open Application.xaml (Visual Basic) or App.xaml (C#).

    Este archivo XAML define una aplicación WPF y los recursos de la aplicación.This XAML file defines a WPF application and any application resources. También se usa este archivo para especificar la interfaz de usuario, en este caso MainWindow. Xaml, que se muestra automáticamente cuando se inicia la aplicación.You also use this file to specify the UI, in this case MainWindow.xaml, that automatically shows when the application starts.

    El código XAML debe tener un aspecto similar al siguiente en Visual Basic:Your XAML should look like the following in Visual Basic:

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

    Y similar al siguiente en C#:And like the following in C#:

    <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. Abra MainWindow. Xaml.Open MainWindow.xaml.

    Este archivo XAML es la ventana principal de la aplicación y muestra el contenido creado en las páginas.This XAML file is the main window of your application and displays content created in pages. La clase Window define las propiedades de una ventana, como su título, tamaño o icono, y controla los eventos, como el cierre o la ocultación.The Window class defines the properties of a window, such as its title, size, or icon, and handles events, such as closing or hiding.

  4. Cambie el elemento Window a una NavigationWindow, como se muestra en el código XAML siguiente:Change the Window element to a NavigationWindow, as shown in the following XAML:

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

    Esta aplicación navega a contenido diferente en función de los datos proporcionados por el usuario.This app navigates to different content depending on the user input. Este es el motivo por el que es necesario cambiar el Window principal a un NavigationWindow.This is why the main Window needs to be changed to a NavigationWindow. NavigationWindow hereda todas las propiedades de Window.NavigationWindow inherits all the properties of Window. El elemento NavigationWindow del archivo XAML crea una instancia de la clase NavigationWindow.The NavigationWindow element in the XAML file creates an instance of the NavigationWindow class. Para obtener más información, vea información general sobre navegación.For more information, see Navigation overview.

  5. Quite los elementos de Grid entre las etiquetas de NavigationWindow.Remove the Grid elements from between the NavigationWindow tags.

  6. Cambie las siguientes propiedades en el código XAML para el elemento NavigationWindow:Change the following properties in the XAML code for the NavigationWindow element:

    • Establezca la propiedad Title en "ExpenseIt".Set the Title property to "ExpenseIt".

    • Establezca la propiedad Height en 350 píxeles.Set the Height property to 350 pixels.

    • Establezca la propiedad Width en 500 píxeles.Set the Width property to 500 pixels.

    El código XAML debe tener un aspecto similar al siguiente para Visual Basic:Your XAML should look like the following for Visual Basic:

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

    Y similar al siguiente para C#:And like the following for C#:

    <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>
    
  7. Abra MainWindow. Xaml. VB o MainWindow.Xaml.CS.Open MainWindow.xaml.vb or MainWindow.xaml.cs.

    Este archivo es un archivo de código subyacente que contiene código para controlar los eventos declarados en MainWindow. Xaml.This file is a code-behind file that contains code to handle the events declared in MainWindow.xaml. Este archivo contiene una clase parcial para la ventana definida en código XAML.This file contains a partial class for the window defined in XAML.

  8. Si está utilizando C#, cambie la clase MainWindow para que se derive de NavigationWindow.If you're using C#, change the MainWindow class to derive from NavigationWindow. (En Visual Basic, esto sucede automáticamente cuando se cambia la ventana en XAML). El C# código debería tener ahora el siguiente aspecto:(In Visual Basic, this happens automatically when you change the window in XAML.) Your C# code should now look like this:

    
    using System;
    using System.Collections.Generic;
    using System.Linq;
    using System.Text;
    using System.Windows;
    using System.Windows.Controls;
    using System.Windows.Data;
    using System.Windows.Documents;
    using System.Windows.Input;
    using System.Windows.Media;
    using System.Windows.Media.Imaging;
    using System.Windows.Navigation;
    using System.Windows.Shapes;
    
    namespace ExpenseIt
    {
        /// <summary>
        /// Interaction logic for MainWindow.xaml
        /// </summary>
        public partial class MainWindow : NavigationWindow
        {
            public MainWindow()
            {
                InitializeComponent();
            }
        }
    }
    

Agregar archivos a la aplicaciónAdd files to the application

En esta sección, agregará dos páginas y una imagen a la aplicación.In this section, you'll add two pages and an image to the application.

  1. Agregue una nueva página al proyecto y asígnele el nombre ExpenseItHome.xaml :Add a new page to the project, and name it ExpenseItHome.xaml:

    1. En Explorador de soluciones, haga clic con el botón derecho en el nodo del proyecto de ExpenseIt y elija Agregar > Página.In Solution Explorer, right-click on the ExpenseIt project node and choose Add > Page.

    2. En el cuadro de diálogo Agregar nuevo elemento , la plantilla página (WPF) ya está seleccionada.In the Add New Item dialog, the Page (WPF) template is already selected. Escriba el nombre ExpenseItHome y, a continuación, seleccione Agregar.Enter the name ExpenseItHome, and then select Add.

    Esta página es la primera página que se muestra cuando se inicia la aplicación.This page is the first page that's displayed when the application is launched. Se mostrará una lista de personas de las que seleccionar, para mostrar un informe de gastos.It will show a list of people to select from, to show an expense report for.

  2. Abra ExpenseItHome.xaml .Open ExpenseItHome.xaml.

  3. Establezca el Title en "ExpenseIt - Home".Set the Title to "ExpenseIt - Home".

  4. Establezca el DesignHeight en 350 píxeles y el DesignWidth en 500 píxeles.Set the DesignHeight to 350 pixels and the DesignWidth to 500 pixels.

    El XAML aparece ahora como se indica a continuación para Visual Basic:The XAML now appears as follows for Visual Basic:

    <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/markup-compatibility/2006" 
      xmlns:d="http://schemas.microsoft.com/expression/blend/2008" 
      mc:Ignorable="d" 
      d:DesignHeight="350" d:DesignWidth="500"
      Title="ExpenseIt - Home">
        <Grid>
            
        </Grid>
    </Page>
    

    Y similar al siguiente para C#:And like the following for C#:

    <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/markup-compatibility/2006" 
          xmlns:d="http://schemas.microsoft.com/expression/blend/2008" 
          mc:Ignorable="d" 
          d:DesignHeight="350" d:DesignWidth="500"
        Title="ExpenseIt - Home">
    
        <Grid>
            
        </Grid>
    </Page>
    
  5. Abra MainWindow. Xaml.Open MainWindow.xaml.

  6. Agregue una propiedad Source al elemento NavigationWindow y establézcala en "ExpenseItHome.xaml".Add a Source property to the NavigationWindow element and set it to "ExpenseItHome.xaml".

    Esto establece ExpenseItHome.xaml como la primera página que se abre cuando se inicia la aplicación.This sets ExpenseItHome.xaml to be the first page opened when the application starts.

    XAML de ejemplo en Visual Basic:Example XAML in Visual Basic:

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

    Y en C#:And in C#:

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

    Sugerencia

    También puede establecer la propiedad origen en la categoría varios de la ventana propiedades .You can also set the Source property in the Miscellaneous category of the Properties window.

    Propiedad de origen en ventana Propiedades

  7. Agregue otra página de WPF nueva al proyecto y asígnele el nombre ExpenseReportPage. Xaml::Add another new WPF page to the project, and name it ExpenseReportPage.xaml::

    1. En Explorador de soluciones, haga clic con el botón derecho en el nodo del proyecto de ExpenseIt y elija Agregar > Página.In Solution Explorer, right-click on the ExpenseIt project node and choose Add > Page.

    2. En el cuadro de diálogo Agregar nuevo elemento , seleccione la plantilla página (WPF) .In the Add New Item dialog, select the Page (WPF) template. Escriba el nombre ExpenseReportPagey, a continuación, seleccione Agregar.Enter the name ExpenseReportPage, and then select Add.

    Esta página mostrará el informe de gastos de la persona que está seleccionada en la página ExpenseItHome .This page will show the expense report for the person that is selected on the ExpenseItHome page.

  8. Abra el archivo ExpenseReportPage.xaml.Open ExpenseReportPage.xaml.

  9. Establezca el Title en "ExpenseIt - View Expense".Set the Title to "ExpenseIt - View Expense".

  10. Establezca el DesignHeight en 350 píxeles y el DesignWidth en 500 píxeles.Set the DesignHeight to 350 pixels and the DesignWidth to 500 pixels.

    ExpenseReportPage. Xaml tiene ahora el siguiente aspecto en Visual Basic:ExpenseReportPage.xaml now looks like the following in Visual Basic:

    <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/markup-compatibility/2006" 
          xmlns:d="http://schemas.microsoft.com/expression/blend/2008" 
          mc:Ignorable="d" 
          d:DesignHeight="350" d:DesignWidth="500"
          Title="ExpenseIt - View Expense">
        <Grid>
            
        </Grid>
    </Page>
    

    Y similar al siguiente en C#:And like the following in C#:

    <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/markup-compatibility/2006" 
          xmlns:d="http://schemas.microsoft.com/expression/blend/2008" 
          mc:Ignorable="d" 
          d:DesignHeight="350" d:DesignWidth="500"
        Title="ExpenseIt - View Expense">
    
        <Grid>
            
        </Grid>
    </Page>
    
  11. Abra ExpenseItHome. Xaml. VB y ExpenseReportPage. Xaml. VBo ExpenseItHome.Xaml.CS y ExpenseReportPage.Xaml.CS.Open ExpenseItHome.xaml.vb and ExpenseReportPage.xaml.vb, or ExpenseItHome.xaml.cs and ExpenseReportPage.xaml.cs.

    Cuando se crea un nuevo archivo de paginación, Visual Studio crea automáticamente el archivo de código subyacente .When you create a new Page file, Visual Studio automatically creates its code-behind file. Estos archivos de código subyacente controlan la lógica para responder a la entrada del usuario.These code-behind files handle the logic for responding to user input.

    El código debe tener un aspecto similar al siguiente para ExpenseItHome :Your code should look like the following for ExpenseItHome:

    using System;
    using System.Collections.Generic;
    using System.Linq;
    using System.Text;
    using System.Windows;
    using System.Windows.Controls;
    using System.Windows.Data;
    using System.Windows.Documents;
    using System.Windows.Input;
    using System.Windows.Media;
    using 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();
            }
        }
    }
    
    Class ExpenseItHome
    
    End Class
    

    Y similar a lo siguiente para ExpenseReportPage:And like the following for ExpenseReportPage:

    using System;
    using System.Collections.Generic;
    using System.Linq;
    using System.Text;
    using System.Windows;
    using System.Windows.Controls;
    using System.Windows.Data;
    using System.Windows.Documents;
    using System.Windows.Input;
    using System.Windows.Media;
    using System.Windows.Media.Imaging;
    using System.Windows.Navigation;
    using System.Windows.Shapes;
    
    namespace ExpenseIt
    {
        /// <summary>
        /// Interaction logic for ExpenseReportPage.xaml
        /// </summary>
        public partial class ExpenseReportPage : Page
        {
            public ExpenseReportPage()
            {
                InitializeComponent();
            }
        }
    }
    
    Class ExpenseReportPage
    
    End Class
    
  12. Agregue una imagen denominada marca de agua. png al proyecto.Add an image named watermark.png to the project. Puede crear su propia imagen, copiar el archivo del código de ejemplo u obtenerlo del repositorio de github Microsoft/WPF-samples .You can create your own image, copy the file from the sample code, or get it from the microsoft/WPF-Samples GitHub repository.

    1. Haga clic con el botón secundario en el nodo del proyecto y seleccione agregar > elemento existenteo presione MAYÚS+Alt+A.Right-click on the project node and select Add > Existing Item, or press Shift+Alt+A.

    2. En el cuadro de diálogo Agregar elemento existente , establezca el filtro de archivos en todos los archivos o archivos de imagen, busque el archivo de imagen que desea usar y, después, seleccione Agregar.In the Add Existing Item dialog, set the file filter to either All Files or Image Files, browse to the image file you want to use, and then select Add.

Compilar y ejecutar la aplicaciónBuild and run the application

  1. Para compilar y ejecutar la aplicación, presione F5 o seleccione iniciar depuración en el menú depurar .To build and run the application, press F5 or select Start Debugging from the Debug menu.

    En la ilustración siguiente se muestra la aplicación con los botones NavigationWindow:The following illustration shows the application with the NavigationWindow buttons:

    Aplicación después de compilarla y ejecutarla.

  2. Cierre la aplicación para volver a Visual Studio.Close the application to return to Visual Studio.

Crear el diseñoCreate the layout

El diseño proporciona una manera ordenada de colocar los elementos de la interfaz de usuario y también administra el tamaño y la posición de dichos elementos cuando se cambia el tamaño de una interfaz de usuario.Layout provides an ordered way to place UI elements, and also manages the size and position of those elements when a UI is resized. Normalmente, se crea un diseño con uno de los controles de diseño siguientes:You typically create a layout with one of the following layout controls:

  • Canvas: define un área en la que se pueden colocar explícitamente los elementos secundarios usando coordenadas relativas al área del lienzo.Canvas - Defines an area within which you can explicitly position child elements by using coordinates that are relative to the Canvas area.
  • DockPanel: define un área en la que puede organizar los elementos secundarios de forma horizontal o vertical, en relación unos con otros.DockPanel - Defines an area where you can arrange child elements either horizontally or vertically, relative to each other.
  • Grid: define un área de cuadrícula flexible que consta de columnas y filas.Grid - Defines a flexible grid area that consists of columns and rows.
  • StackPanel: organiza los elementos secundarios en una sola línea que se puede orientar horizontal o verticalmente.StackPanel - Arranges child elements into a single line that can be oriented horizontally or vertically.
  • VirtualizingStackPanel: organiza y virtualiza el contenido en una sola línea orientada horizontal o verticalmente.VirtualizingStackPanel - Arranges and virtualizes content on a single line that is oriented either horizontally or vertically.
  • WrapPanel: coloca los elementos secundarios en una posición secuencial de izquierda a derecha, dividiendo el contenido en la línea siguiente en el borde del cuadro contenedor.WrapPanel - Positions child elements in sequential position from left to right, breaking content to the next line at the edge of the containing box. La ordenación subsiguiente se realiza secuencialmente de arriba abajo o de derecha a izquierda, en función del valor de la propiedad Orientation.Subsequent ordering happens sequentially from top to bottom or from right to left, depending on the value of the Orientation property.

Cada uno de estos controles de diseño admite un tipo determinado de diseño para sus elementos secundarios.Each of these layout controls supports a particular type of layout for its child elements. se puede cambiar el tamaño de las páginas ExpenseIt, y cada página tiene elementos que se organizan horizontal y verticalmente junto con otros elementos.ExpenseIt pages can be resized, and each page has elements that are arranged horizontally and vertically alongside other elements. En este ejemplo, el Grid se utiliza como elemento de diseño para la aplicación.In this example, the Grid is used as layout element for the application.

Sugerencia

Para obtener más información sobre los elementos de Panel, consulte información generalde los paneles.For more information about Panel elements, see Panels overview. Para obtener más información sobre el diseño, vea diseño.For more information about layout, see Layout.

En esta sección, creará una tabla de una sola columna con tres filas y un margen de 10 píxeles agregando definiciones de columna y fila al Grid en ExpenseItHome.xaml .In this section, you create a single-column table with three rows and a 10-pixel margin by adding column and row definitions to the Grid in ExpenseItHome.xaml.

  1. En ExpenseItHome.xaml , establezca la propiedad Margin del elemento Grid en "10, 0, 10, 10", que corresponde a los márgenes izquierdo, superior, derecho e inferior:In ExpenseItHome.xaml, set the Margin property on the Grid element to "10,0,10,10", which corresponds to left, top, right and bottom margins:

    <Grid Margin="10,0,10,10">
    

    Sugerencia

    También puede establecer los valores de margen en la ventana propiedades , en la categoría diseño :You can also set the Margin values in the Properties window, under the Layout category:

    Valores de margen en ventana Propiedades

  2. Agregue el código XAML siguiente entre las etiquetas de Grid para crear las definiciones de fila y de columna:Add the following XAML between the Grid tags to create the row and column definitions:

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

    La Height de dos filas se establece en Auto, lo que significa que el tamaño de las filas se basa en el contenido de las filas.The Height of two rows is set to Auto, which means that the rows are sized based on the content in the rows. El Height predeterminado es Star el ajuste de tamaño, lo que significa que el alto de fila es una proporción ponderada del espacio disponible.The default Height is Star sizing, which means that the row height is a weighted proportion of the available space. Por ejemplo, si dos filas tienen un Height de "*", cada una tiene un alto que es la mitad del espacio disponible.For example if two rows each have a Height of "*", they each have a height that is half of the available space.

    El Grid debe contener ahora el código XAML siguiente:Your Grid should now contain the following 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 controlesAdd controls

En esta sección, actualizará la interfaz de usuario de la Página principal para mostrar una lista de personas, donde puede seleccionar una persona para mostrar el informe de gastos.In this section, you'll update the home page UI to show a list of people, where you select one person to display their expense report. Los controles son objetos de interfaz de usuario que permiten a los usuarios interactuar con su aplicación.Controls are UI objects that allow users to interact with your application. Para obtener más información, consulte Controles.For more information, see Controls.

Para crear esta interfaz de usuario, agregará los siguientes elementos a ExpenseItHome.xaml :To create this UI, you'll add the following elements to ExpenseItHome.xaml:

  • ListBox (para la lista de personas).A ListBox (for the list of people).
  • Label (para el encabezado de la lista).A Label (for the list header).
  • Un Button (para ver el informe de gastos de la persona que está seleccionada en la lista).A Button (to click to view the expense report for the person that is selected in the list).

Cada control se coloca en una fila del Grid estableciendo la propiedad adjunta Grid.Row.Each control is placed in a row of the Grid by setting the Grid.Row attached property. Para obtener más información sobre las propiedades adjuntas, vea información general sobre las propiedades adjuntas.For more information about attached properties, see Attached Properties Overview.

  1. En ExpenseItHome.xaml , agregue el código XAML siguiente en algún lugar entre las etiquetas de Grid:In ExpenseItHome.xaml, add the following XAML somewhere between the Grid tags:

    
    <!-- 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>
    

    Sugerencia

    También puede crear los controles arrastrándolos desde la ventana cuadro de herramientas hasta la ventana de diseño y, a continuación, estableciendo sus propiedades en la ventana propiedades .You can also create the controls by dragging them from the Toolbox window onto the design window, and then setting their properties in the Properties window.

  2. Compile y ejecute la aplicación.Build and run the application.

    En la ilustración siguiente se muestran los controles que ha creado:The following illustration shows the controls you created:

Captura de pantalla de ejemplo ExpenseIt en la que se muestra una lista de nombres

Agregar una imagen y un títuloAdd an image and a title

En esta sección, actualizará la interfaz de usuario de la Página principal con una imagen y un título de página.In this section, you'll update the home page UI with an image and a page title.

  1. En ExpenseItHome.xaml , agregue otra columna al ColumnDefinitions con un Width fijo de 230 píxeles:In ExpenseItHome.xaml, add another column to the ColumnDefinitions with a fixed Width of 230 pixels:

    
        <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/markup-compatibility/2006" 
          xmlns:d="http://schemas.microsoft.com/expression/blend/2008" 
          mc:Ignorable="d" 
          d:DesignHeight="350" d:DesignWidth="500"
        Title="ExpenseIt - Home">
    
        <Grid Margin="10,0,10,10">
           
            <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>
                
                <!-- Name item template -->
                <DataTemplate x:Key="nameItemTemplate">
                    <Label Content="{Binding XPath=@Name}"/>
                </DataTemplate>
                
            </Grid.Resources>
          
            <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" 
                     ItemsSource="{Binding Source={StaticResource ExpenseDataSource}, XPath=Person}"
                     ItemTemplate="{StaticResource nameItemTemplate}">
            </ListBox>
         
            <!-- View report button -->
            <Button Grid.Column="1" Grid.Row="3" Click="Button_Click" Style="{StaticResource buttonStyle}">View</Button>
       
    
        </Grid>
    
    </Page>
     
    
  2. Agregue otra fila al RowDefinitionspara un total de cuatro filas:Add another row to the RowDefinitions, for a total of four rows:

    
        <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/markup-compatibility/2006" 
          xmlns:d="http://schemas.microsoft.com/expression/blend/2008" 
          mc:Ignorable="d" 
          d:DesignHeight="350" d:DesignWidth="500"
        Title="ExpenseIt - Home">
    
        <Grid Margin="10,0,10,10">
           
            <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>
                
                <!-- Name item template -->
                <DataTemplate x:Key="nameItemTemplate">
                    <Label Content="{Binding XPath=@Name}"/>
                </DataTemplate>
                
            </Grid.Resources>
          
            <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" 
                     ItemsSource="{Binding Source={StaticResource ExpenseDataSource}, XPath=Person}"
                     ItemTemplate="{StaticResource nameItemTemplate}">
            </ListBox>
         
            <!-- View report button -->
            <Button Grid.Column="1" Grid.Row="3" Click="Button_Click" Style="{StaticResource buttonStyle}">View</Button>
       
    
        </Grid>
    
    </Page>
     
    
  3. Mueva los controles a la segunda columna estableciendo la propiedad Grid.Column en 1 en cada uno de los tres controles (borde, cuadro de lista y botón).Move the controls to the second column by setting the Grid.Column property to 1 in each of the three controls (Border, ListBox, and Button).

  4. Baje cada control una fila incrementando su Grid.Row valor en 1 para cada uno de los tres controles (borde, cuadro de lista y botón) y para el elemento Border.Move each control down a row by incrementing its Grid.Row value by 1 for each of the three controls (Border, ListBox, and Button) and for the Border element.

    El código XAML de los tres controles tiene ahora el siguiente aspecto:The XAML for the three controls now looks like the following:

      <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 la propiedad Panel.Background en el archivo de imagen de marca de agua. png agregando el siguiente código XAML en cualquier lugar entre las etiquetas <Grid> y </Grid>:Set the Panel.Background property to the watermark.png image file, by adding the following XAML anywhere between the <Grid> and </Grid> tags:

    <Grid.Background>
        <ImageBrush ImageSource="watermark.png"/>
    </Grid.Background>
    
  6. Antes del elemento Border, agregue un Label con el contenido "ver informe de gastos".Before the Border element, add a Label with the content "View Expense Report". Esta etiqueta es el título de la página.This label is the title of the page.

    <Label Grid.Column="1" VerticalAlignment="Center" FontFamily="Trebuchet MS" 
            FontWeight="Bold" FontSize="18" Foreground="#0066cc">
        View Expense Report
    </Label>
    
  7. Compile y ejecute la aplicación.Build and run the application.

En la ilustración siguiente se muestran los resultados de lo que acaba de agregar:The following illustration shows the results of what you just added:

Captura de pantalla de ejemplo ExpenseIt que muestra el nuevo fondo de imagen y el título de la página

Agregar código para controlar eventosAdd code to handle events

  1. En ExpenseItHome.xaml , agregue un controlador de eventos Click al elemento Button.In ExpenseItHome.xaml, add a Click event handler to the Button element. Para obtener más información, vea Cómo: crear un controlador de eventos simple.For more information, see How to: Create a simple event handler.

      <!-- 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>
    
  2. Abra ExpenseItHome.xaml.vb o ExpenseItHome.xaml.cs .Open ExpenseItHome.xaml.vb or ExpenseItHome.xaml.cs.

  3. Agregue el código siguiente a la clase ExpenseItHome para agregar un controlador de eventos de clic de botón.Add the following code to the ExpenseItHome class to add a button click event handler. El controlador de eventos abre la página ExpenseReportPage .The event handler opens the ExpenseReportPage page.

    private void Button_Click(object sender, RoutedEventArgs e)
    {
        // View Expense Report
        ExpenseReportPage expenseReportPage = new ExpenseReportPage();
        this.NavigationService.Navigate(expenseReportPage);
    
    }
    
    Private Sub Button_Click(ByVal sender As Object, ByVal e As RoutedEventArgs)
        ' View Expense Report
        Dim expenseReportPage As New ExpenseReportPage()
        Me.NavigationService.Navigate(expenseReportPage)
    
    End Sub
    

Crear la interfaz de usuario para ExpenseReportPageCreate the UI for ExpenseReportPage

ExpenseReportPage. Xaml muestra el informe de gastos de la persona que está seleccionada en la página ExpenseItHome .ExpenseReportPage.xaml displays the expense report for the person that's selected on the ExpenseItHome page. En esta sección, creará la interfaz de usuario para ExpenseReportPage.In this section, you'll create the UI for ExpenseReportPage. También agregará colores de fondo y relleno a los distintos elementos de la interfaz de usuario.You'll also add background and fill colors to the various UI elements.

  1. Abra el archivo ExpenseReportPage.xaml.Open ExpenseReportPage.xaml.

  2. Agregue el código XAML siguiente entre las etiquetas de Grid:Add the following XAML between the Grid tags:

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

    Esta interfaz de usuario es similar a ExpenseItHome.xaml , salvo que los datos del informe se muestran en un DataGrid.This UI is similar to ExpenseItHome.xaml, except the report data is displayed in a DataGrid.

  3. Compile y ejecute la aplicación.Build and run the application.

  4. Seleccione el botón Ver .Select the View button.

    Se mostrará la página de informe de gastosThe expense report page appears. Observe también que el botón de navegación hacia atrás está habilitado.Also notice that the back navigation button is enabled.

En la ilustración siguiente se muestran los elementos de la interfaz de usuario agregados a ExpenseReportPage. Xaml.The following illustration shows the UI elements added to ExpenseReportPage.xaml.

Captura de pantalla de ejemplo ExpenseIt que muestra la interfaz de usuario que se acaba de crear para el ExpenseReportPage.

Controles de estiloStyle controls

La apariencia de varios elementos suele ser la misma para todos los elementos del mismo tipo en una interfaz de usuario.The appearance of various elements is often the same for all elements of the same type in a UI. La interfaz de usuario usa estilos para que los aspectos se puedan volver a usar en varios elementos.UI uses styles to make appearances reusable across multiple elements. La reutilización de los estilos ayuda a simplificar la creación y administración de XAML.The reusability of styles helps to simplify XAML creation and management. En esta sección se reemplazan los atributos de cada elemento que se definieron en pasos anteriores por estilos.This section replaces the per-element attributes that were defined in previous steps with styles.

  1. Abra Application. Xaml o app. Xaml.Open Application.xaml or App.xaml.

  2. Agregue el código XAML siguiente entre las etiquetas de Application.Resources:Add the following XAML between the Application.Resources tags:

    
    <!-- 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 código XAML agrega los estilos siguientes:This XAML adds the following styles:

    • headerTextStyle: para dar formato al título de la página Label.headerTextStyle: To format the page title Label.

    • labelStyle: para dar formato a los controles Label .labelStyle: To format the Label controls.

    • columnHeaderStyle: para dar formato a DataGridColumnHeader.columnHeaderStyle: To format the DataGridColumnHeader.

    • listHeaderStyle: para dar formato a los controles del encabezado de lista Border .listHeaderStyle: To format the list header Border controls.

    • listHeaderTextStyle: para dar formato al encabezado de la lista Label.listHeaderTextStyle: To format the list header Label.

    • buttonStyle: para dar formato al Button en ExpenseItHome.xaml.buttonStyle: To format the Button on ExpenseItHome.xaml.

    Observe que los estilos son recursos y secundarios del elemento de propiedad Application.Resources.Notice that the styles are resources and children of the Application.Resources property element. En esta ubicación, los estilos se aplican a todos los elementos de una aplicación.In this location, the styles are applied to all the elements in an application. Para obtener un ejemplo del uso de recursos en una aplicación .NET, consulte usar recursos de aplicación.For an example of using resources in a .NET app, see Use Application Resources.

  3. En ExpenseItHome.xaml , reemplace todo lo que haya entre los elementos Grid por el código XAML siguiente:In ExpenseItHome.xaml, replace everything between the Grid elements with the following 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>
    

    Las propiedades como VerticalAlignment y FontFamily que definen la apariencia de cada control se quitan y reemplazan aplicando los estilos.The properties such as VerticalAlignment and FontFamily that define the look of each control are removed and replaced by applying the styles. Por ejemplo, el headerTextStyle se aplica al Label"ver informe de gastos".For example, the headerTextStyle is applied to the "View Expense Report" Label.

  4. Abra el archivo ExpenseReportPage.xaml.Open ExpenseReportPage.xaml.

  5. Reemplace todo lo que haya entre los elementos Grid con el código XAML siguiente:Replace everything between the Grid elements with the following 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>
    

    Este código XAML agrega estilos a los elementos Label y Border.This XAML adds styles to the Label and Border elements.

  6. Compile y ejecute la aplicación.Build and run the application. La apariencia de la ventana es la misma que antes.The window appearance is the same as previously.

    Captura de pantalla de ejemplo ExpenseIt con el mismo aspecto que en la última sección.

  7. Cierre la aplicación para volver a Visual Studio.Close the application to return to Visual Studio.

Enlazar datos a un controlBind data to a control

En esta sección, creará los datos XML que se enlazan a varios controles.In this section, you'll create the XML data that is bound to various controls.

  1. En ExpenseItHome.xaml , después del elemento de Grid de apertura, agregue el código XAML siguiente para crear un XmlDataProvider que contenga los datos de cada persona:In ExpenseItHome.xaml, after the opening Grid element, add the following XAML to create an XmlDataProvider that contains the data for each person:

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

    Los datos se crean como un recurso de Grid.The data is created as a Grid resource. Normalmente, estos datos se cargan como un archivo, pero para simplificar, los datos se agregan en línea.Normally this data would be loaded as a file, but for simplicity the data is added inline.

  2. En el elemento <Grid.Resources>, agregue el siguiente elemento <xref:System.Windows.DataTemplate>, que define cómo mostrar los datos en el ListBox, después del elemento <XmlDataProvider>:Within the <Grid.Resources> element, add the following <xref:System.Windows.DataTemplate> element, which defines how to display the data in the ListBox, after the <XmlDataProvider> element:

    <Grid.Resources>
        <!-- Name item template -->
        <DataTemplate x:Key="nameItemTemplate">
            <Label Content="{Binding XPath=@Name}"/>
        </DataTemplate>
    </Grid.Resources>
    

    Para obtener más información acerca de las plantillas de datos, vea información general sobre plantillas de datos.For more information about data templates, see Data templating overview.

  3. Reemplace el ListBox existente por el código XAML siguiente:Replace the existing ListBox with the following XAML:

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

    Este código XAML enlaza la propiedad ItemsSource de la ListBox con el origen de datos y aplica la plantilla de datos como ItemTemplate.This XAML binds the ItemsSource property of the ListBox to the data source and applies the data template as the ItemTemplate.

Conectar datos a controlesConnect data to controls

A continuación, agregará código para recuperar el nombre seleccionado en la página de ExpenseItHome y pasarlo al constructor de ExpenseReportPage.Next, you'll add code to retrieve the name that's selected on the ExpenseItHome page and pass it to the constructor of ExpenseReportPage. ExpenseReportPage establece su contexto de datos con el elemento pasado, que es de lo que se enlazan los controles definidos en ExpenseReportPage. Xaml .ExpenseReportPage sets its data context with the passed item, which is what the controls defined in ExpenseReportPage.xaml bind to.

  1. Abra ExpenseReportPage.xaml.vb o ExpenseReportPage.xaml.cs.Open ExpenseReportPage.xaml.vb or ExpenseReportPage.xaml.cs.

  2. Agregue un constructor que acepte un objeto, para que pueda pasar los datos del informe de gastos de la persona seleccionada.Add a constructor that takes an object so you can pass the expense report data of the selected person.

    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;
        }
    
    }
    
    Partial Public Class ExpenseReportPage
        Inherits Page
        Public Sub New()
            InitializeComponent()
        End Sub
    
        ' Custom constructor to pass expense report data
        Public Sub New(ByVal data As Object)
            Me.New()
            ' Bind to expense report data.
            Me.DataContext = data
        End Sub
    
    End Class
    
  3. Abra ExpenseItHome.xaml.vb o ExpenseItHome.xaml.cs .Open ExpenseItHome.xaml.vb or ExpenseItHome.xaml.cs.

  4. Cambie el controlador de eventos Click para llamar al nuevo constructor que pasa los datos del informe de gastos de la persona seleccionada.Change the Click event handler to call the new constructor passing the expense report data of the selected person.

    private void Button_Click(object sender, RoutedEventArgs e)
    {
        // View Expense Report
        ExpenseReportPage expenseReportPage = new ExpenseReportPage(this.peopleListBox.SelectedItem);
        this.NavigationService.Navigate(expenseReportPage);
    
    }
    
    Private Sub Button_Click(ByVal sender As Object, ByVal e As RoutedEventArgs)
        ' View Expense Report
        Dim expenseReportPage As New ExpenseReportPage(Me.peopleListBox.SelectedItem)
        Me.NavigationService.Navigate(expenseReportPage)
    
    End Sub
    

Estilo de datos con plantillas de datosStyle data with data templates

En esta sección, actualizará la interfaz de usuario para cada elemento de las listas enlazadas a datos mediante plantillas de datos.In this section, you'll update the UI for each item in the data-bound lists by using data templates.

  1. Abra el archivo ExpenseReportPage.xaml.Open ExpenseReportPage.xaml.

  2. Enlace el contenido de los elementos "Name" y "Department" Label a la propiedad de origen de datos adecuada.Bind the content of the "Name" and "Department" Label elements to the appropriate data source property. Para obtener más información sobre el enlace de datos, vea información generalsobre el enlace de datos.For more information about data binding, see Data binding overview.

    <!-- 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. Después del elemento de Grid de apertura, agregue las siguientes plantillas de datos, que definen cómo mostrar los datos del informe de gastos:After the opening Grid element, add the following data templates, which define how to display the expense report data:

    <!--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. Reemplace los elementos DataGridTextColumn por DataGridTemplateColumn en el elemento DataGrid y aplíqueles las plantillas.Replace the DataGridTextColumn elements with DataGridTemplateColumn under the DataGrid element and apply the templates to them.

    <!-- Expense type and Amount table -->
    <DataGrid ItemsSource="{Binding XPath=Expense}" ColumnHeaderStyle="{StaticResource columnHeaderStyle}" AutoGenerateColumns="False" RowHeaderWidth="0" >
       
        <DataGrid.Columns>
            <DataGridTemplateColumn Header="ExpenseType" CellTemplate="{StaticResource typeItemTemplate}" />
            <DataGridTemplateColumn Header="Amount" CellTemplate="{StaticResource amountItemTemplate}" />
        </DataGrid.Columns>
        
    </DataGrid>
    
  5. Compile y ejecute la aplicación.Build and run the application.

  6. Seleccione una persona y, a continuación, seleccione el botón Ver .Select a person and then select the View button.

En la ilustración siguiente se muestran las dos páginas de la aplicación ExpenseIt con los controles, el diseño, los estilos, el enlace de datos y las plantillas de datos aplicados:The following illustration shows both pages of the ExpenseIt application with controls, layout, styles, data binding, and data templates applied:

Ambas páginas de la aplicación muestran la lista de nombres y un informe de gastos.

Nota

Este ejemplo muestra una característica específica de WPF y no sigue todos los procedimientos recomendados para cosas como seguridad, localización y accesibilidad.This sample demonstrates a specific feature of WPF and doesn't follow all best practices for things like security, localization, and accessibility. Para obtener una completa cobertura de WPF y los procedimientos recomendados de desarrollo de aplicaciones .NET, vea los temas siguientes:For comprehensive coverage of WPF and the .NET app development best practices, see the following topics:

Pasos siguientesNext steps

En este tutorial ha aprendido varias técnicas para crear una interfaz de usuario mediante Windows Presentation Foundation (WPF).In this walkthrough you learned a number of techniques for creating a UI using Windows Presentation Foundation (WPF). Ahora debería tener un conocimiento básico de los bloques de creación de una aplicación .NET enlazada a datos.You should now have a basic understanding of the building blocks of a data-bound .NET app. Para más información sobre los modelos de programación y arquitectura de WPF, vea los temas siguientes:For more information about the WPF architecture and programming models, see the following topics:

Para más información sobre la creación de aplicaciones, vea los temas siguientes:For more information about creating applications, see the following topics:

Vea tambiénSee also