Información general sobre Windows Presentation Foundation

  • Artículo

Actualización: noviembre 2007

Este tutorial proporciona una introducción básica al desarrollo de una aplicación de Windows Presentation Foundation (WPF), que incluye los elementos comunes a la mayoría de las aplicaciones de WPF: marcado Lenguaje de marcado de aplicaciones extensible (XAML), código subyacente, definiciones de aplicación, controles, diseño, enlace de datos y estilos.

Este tema contiene las secciones siguientes.

  • Resumen
  • Requisitos previos
  • Crear los archivos de código de la aplicación
  • Generar y ejecutar la aplicación
  • Agregar el diseño
  • Agregar controles
  • Agregar una imagen y un título
  • Agregar código para controlar los eventos
  • Crear la interfaz de usuario para ExpenseReportPage
  • Agregar código para aplicar estilo a un control
  • Enlazar datos a un control.
  • Conectar los datos a los controles
  • Agregar estilo a los datos con plantillas de datos
  • Procedimientos recomendados
  • Pasos adicionales
  • Temas relacionados

Resumen

Este tutorial le guiará a lo largo del desarrollo de una aplicación básica de WPF mediante los pasos siguientes.

  • Definir el marcado XAML para diseñar la apariencia de la interfaz de usuario (UI) de la aplicación.

  • Escribir código que determine el comportamiento de la aplicación.

  • Crear una definición de aplicación para administrar la aplicación.

  • Agregar controles y diseño para crear la interfaz de usuario de la aplicación.

  • Crear estilos que aporten una apariencia coherente a toda la interfaz de usuario de una aplicación.

  • 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á generado una aplicación independiente de Windows que permitirá a los usuarios ver los informes de gastos de las personas seleccionadas. La aplicación constará de varias páginas de WPF hospedadas en una ventana del estilo del explorador.

El código de ejemplo que se utiliza para generar este tutorial está disponible para C# y para Microsoft Visual Basic .NET; consulte Introducción a la compilación de aplicaciones de Windows Presentation Foundation.

Requisitos previos

Para poder generar la aplicación que se desarrolla durante este tutorial, necesitará tener instalado Microsoft .NET Framework y Kit de desarrollo de software de Windows (SDK).

Cuando tenga instalados estos programas, podrá generar la aplicación desde una ventana de comandos (aunque puede utilizar un Entorno de desarrollo integrado (IDE) como Microsoft Visual Studio si lo desea). Para poder generar la aplicación desde el símbolo del sistema, necesita utilizar la ventana de comandos que se instala con Kit de desarrollo de software de Windows (SDK). Puede encontrarla en la ubicación de menú siguiente:

  • Menú Inicio | Todos los programas | Microsoft Windows SDK | CMD Shell

También puede abrir el símbolo del sistema de Windows siguiendo estos pasos:

  1. En el menú Inicio, seleccione Ejecutar.

  2. Escriba lo siguiente:

    C:\WINDOWS\system32\cmd.exe /E:ON /V:ON /T:0E /K "C:\Program Files\Microsoft SDKs\Windows\v6.0\Bin\SetEnv.Cmd"

  3. Presione Aceptar.

Tenga en cuenta que SetEnv.cmd configura el entorno necesario para generar aplicaciones de WPF desde el símbolo del sistema.

Crear los archivos de código de la aplicación

En este paso, creará la infraestructura de la aplicación, que incluye una definición de aplicación, dos páginas y una imagen.

  1. Cree un nuevo archivo de marcado XAML denominado App.xaml. Este archivo define una aplicación de WPF y también se utiliza para especificar la interfaz de usuario que debe mostrarse automáticamente cuando se inicia la aplicación; en este caso, HomePage.xaml (que se creará en el paso siguiente). El marcado XAML debe ser similar al que se muestra a continuación:

    <Application 
  xmlns="https://schemas.microsoft.com/winfx/2006/xaml/presentation"
  StartupUri="HomePage.xaml">
</Application>

  2. Cree un nuevo archivo de marcado XAML denominado HomePage.xaml, que será la primera página que se muestre cuando se inicie la aplicación. HomePage.xaml mostrará una lista de personas y el usuario podrá seleccionar en esa lista la persona cuyo informe de gastos desee mostrar. Agregue un elemento Page a HomePage.xaml, con la configuración siguiente:

    • La barra de título del explorador es "ExpenseIt".

    • El ancho de la ventana del explorador es de 550 píxeles independientes del dispositivo.

    • El alto de la ventana del explorador es de 350 píxeles independientes del dispositivo.

    • El título de la página es "ExpenseIt - Home".

    El marcado XAML debe ser similar al que se muestra a continuación:

    <Page 
  xmlns="https://schemas.microsoft.com/winfx/2006/xaml/presentation"
  xmlns:x="https://schemas.microsoft.com/winfx/2006/xaml"
  x:Class="ExpenseIt.HomePage"
  WindowTitle="ExpenseIt"
  Title="ExpenseIt - Home" 
  WindowWidth="550" WindowHeight="380">
</Page>

  3. Cree un nuevo archivo de código denominado HomePage.xaml.cs. Este archivo será el archivo de código subyacente que contiene el código para controlar los eventos declarados en HomePage.xaml. El código debe ser similar al que se muestra a continuación:

    using System;
using System.Windows;
using System.Windows.Controls;
using System.Windows.Navigation;
namespace ExpenseIt
{
    public partial class HomePage : Page
    {
        public HomePage()
        {
            InitializeComponent();
        }
    }
}

  4. Cree un nuevo archivo de marcado XAML denominado ExpenseReportPage.xaml. Agregue un elemento Page y establezca "ExpenseIt - View Expense Report" como título de página. Esta página mostrará el informe de gastos de la persona que esté seleccionada en HomePage.xaml. El marcado XAML debe ser similar al que se muestra a continuación:

    <Page 
  xmlns="https://schemas.microsoft.com/winfx/2006/xaml/presentation"
  xmlns:x="https://schemas.microsoft.com/winfx/2006/xaml"
  x:Class="ExpenseIt.ExpenseReportPage"
  Title="ExpenseIt - View Expense Report">
</Page>

  5. Cree un nuevo archivo denominado ExpenseReportPage.xaml.cs. Este archivo será un archivo de código subyacente que enlace los datos del informe de gastos a la interfaz de usuario definida en ExpenseReportPage.xaml. El código debe ser similar al que se muestra a continuación:

    using System;
using System.Windows;
using System.Windows.Controls;
using System.Windows.Navigation;
namespace ExpenseIt
{
    public partial class ExpenseReportPage : Page
    {
        public ExpenseReportPage()
        {
            InitializeComponent();
        }
    }
}

  6. Agregue una imagen denominada watermark.png a la misma carpeta que los cinco archivos de código que creó en los pasos anteriores. Puede crear su propia imagen o copiar el archivo del mismo nombre del código de ejemplo.

Generar y ejecutar la aplicación

En este paso, utilizará MSBuild para generar la aplicación que definió en la sección anterior.

  1. Cree un nuevo archivo denominado ExpenseIt.csproj. Este archivo será el archivo de MSBuild, que es un archivo XML especial que contiene la configuración de compilación de su aplicación e incluye los siguientes elementos:

    • Las variables de compilación globales para el proyecto compilado, como el nombre del ensamblado generado, el tipo de ensamblado que debe generarse y la carpeta en la que debe agregarse el ensamblado generado.

    • Referencias a los archivos de código.

    • Referencias a los ensamblados de Microsoft .NET Framework que contienen los tipos utilizados por la aplicación.

    El contenido del archivo de compilación debe ser similar al que se muestra a continuación:

    <?xml version="1.0" encoding="utf-8"?>
<Project xmlns="https://schemas.microsoft.com/developer/msbuild/2003">
    <PropertyGroup>
        <AssemblyName>ExpenseIt</AssemblyName>
        <TargetType>winexe</TargetType>
        <OutputPath>bin\$(Configuration)\</OutputPath>
    </PropertyGroup>
    <ItemGroup>
        <Reference Include="System"/>
        <Reference Include="System.Xml"/>
        <Reference Include="System.Data"/>
        <Reference Include="WindowsBase"/>
        <Reference Include="PresentationCore"/>
        <Reference Include="PresentationFramework"/>
    </ItemGroup>
    <ItemGroup>
        <ApplicationDefinition Include="App.xaml"/>
        <Page Include="HomePage.xaml"/>
        <Compile Include="HomePage.xaml.cs" />
        <Page Include="ExpenseReportPage.xaml"/>
        <Compile Include="ExpenseReportPage.xaml.cs" />
        <Resource Include="watermark.png"/>
    </ItemGroup>
    <Import Project="$(MSBuildBinPath)\Microsoft.CSharp.targets"/>
    <Import Project="$(MSBuildBinPath)\Microsoft.WinFX.targets"/>
</Project>

  2. Abra una ventana de comandos en la misma carpeta donde se encuentra el archivo de proyecto y los archivos de código de la aplicación.

  3. Desde el símbolo del sistema, ejecute el siguiente comando:

    MSBuild ExpenseIt.csproj

    En el caso de Microsoft Visual Basic .NET, ejecute el siguiente comando en su lugar:

    MSBuild ExpenseIt.vbproj

    Para compilar y ejecutar la aplicación mediante Visual Studio, abra el archivo de proyecto en Visual Studio y presione F5.

Nota

Visual Studio 2005 genera automáticamente un archivo de proyecto. Dado que en este tutorial no se da por hecho que se haya instalado Visual Studio, se detalla el proceso de creación de un archivo de proyecto. Para obtener más información sobre la creación de archivos .csproj, consulte Generar una aplicación de WPF (WPF). Si está utilizando Visual Studio para completar este tutorial, sobrescriba el contenido del archivo .csproj generado por el texto de MSBuild anterior.

  1. Abra la carpeta que contiene el archivo ejecutable de la aplicación generado, es decir, expenseit.exe. En caso de que haya generado el archivo desde el símbolo del sistema, expenseit.exe se encontrará en la carpeta siguiente:

    Carpeta que contiene los archivos de código de la aplicación\bin\

    Si ha generado el archivo utilizando Visual Studio, expenseit.exe se encontrará en la carpeta siguiente:

    Carpeta que contiene los archivos de código de la aplicación\bin\debug\

  2. Desde el símbolo del sistema, ejecute expenseit.exe. En la siguiente ilustración se muestra la aplicación en ejecución.

    Captura de pantalla de ejemplo ExpenseIt

Agregar el diseño

El diseño proporciona un modo ordenado de colocar los elementos de la interfaz de usuario, y también controla el tamaño y la posición de los mismos cuando la interfaz de usuario cambia de tamaño. Normalmente, para agregar el diseño a la interfaz de usuario se utiliza uno de los controles de diseño siguientes:

Cada uno de ellos admite un tipo de diseño especial para sus elementos secundarios. Es posible cambiar de tamaño las páginas de ExpenseIt, y cada página tiene elementos organizados horizontal y verticalmente junto con otros elementos. Por lo tanto, Grid es el elemento de diseño ideal para la aplicación.

Nota

Para obtener más información sobre los elementos Panel, consulte Información general sobre elementos Panel.

El marcado XAML siguiente crea una tabla de una columna y tres filas, con un margen de 10 píxeles, agregando un control Grid a HomePage.xaml:

  1. Abra HomePage.xaml.

  2. Agregue el código XAML siguiente entre las etiquetas Page.

    <Page 
  xmlns="https://schemas.microsoft.com/winfx/2006/xaml/presentation"
  xmlns:x="https://schemas.microsoft.com/winfx/2006/xaml"
  x:Class="ExpenseIt.HomePage"
  WindowTitle="ExpenseIt"
  Title="ExpenseIt - Home" 
  WindowWidth="550" WindowHeight="380">
    <Grid Margin="10">
      <Grid.ColumnDefinitions>
        <ColumnDefinition />
      </Grid.ColumnDefinitions>
      <Grid.RowDefinitions>
        <RowDefinition Height="Auto" />
        <RowDefinition />
        <RowDefinition Height="Auto" />
      </Grid.RowDefinitions>
    </Grid>
</Page>

Agregar controles

En este paso, se actualiza la interfaz de usuario de la página principal para mostrar una lista de personas y los usuarios pueden seleccionar el nombre de la persona cuyo informe de gastos desean ver. Para crear esta interfaz de usuario, se han agregado los elementos siguientes a HomePage.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).

Siga estos pasos para actualizar HomePage.xaml:

  1. Sobrescriba el contenido del archivo HomePage.xaml por el siguiente código XAML.

    <Page 
  xmlns="https://schemas.microsoft.com/winfx/2006/xaml/presentation"
  xmlns:x="https://schemas.microsoft.com/winfx/2006/xaml"
  x:Class="ExpenseIt.HomePage"
  WindowTitle="ExpenseIt"
  Title="ExpenseIt - Home" 
  WindowWidth="550" WindowHeight="380">

  <Grid Margin="10">

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

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

  </Grid>

</Page>

  2. Compile y ejecute la aplicación.

La imagen siguiente muestra los controles creados por el código de este paso.

Captura de pantalla de ejemplo ExpenseIt

Agregar una imagen y un título

En este paso, la interfaz de usuario de la página principal se actualiza con una imagen adecuada y un título de página:

  1. Abra HomePage.xaml.

  2. Sobrescriba el contenido del archivo HomePage.xaml por el siguiente código XAML.

    <Page 
  xmlns="https://schemas.microsoft.com/winfx/2006/xaml/presentation"
  xmlns:x="https://schemas.microsoft.com/winfx/2006/xaml"
  x:Class="ExpenseIt.HomePage"
  WindowTitle="ExpenseIt"
  Title="ExpenseIt - Home" 
  WindowWidth="550" WindowHeight="380">

  <Grid>

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

    <DockPanel Grid.Column="0" Grid.ColumnSpan="2" Grid.Row="0">
      <Canvas DockPanel.Dock="Left" Width="230" Height="100">
        <Image Source="watermark.png" />
      </Canvas>
      <Label VerticalAlignment="Center" FontFamily="Trebuchet MS" 
        FontWeight="Bold" FontSize="18" Foreground="#0066cc">
        View Expense Report
      </Label>
    </DockPanel>

    <Grid Margin="10" Grid.Column="1" Grid.Row="1">

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

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

    </Grid>

  </Grid>
</Page>

    Este código XAML actualiza el control Grid de las formas siguientes:

    • Crea una nueva cuadrícula con dos filas.

    • Agrega un control DockPanel con los elementos Canvas, Image y Label a la primera fila. El control DockPanel incluye las dos columnas de la primera fila que, junto con el elemento Canvas acoplado a la izquierda, permite que Label se superponga a Image.

    • Utiliza el atributo Source del elemento Image para especificar la imagen de origen, es decir, watermark.png.

    • Agrega el texto de título "View Expense Report" a Label.

    • Utiliza los atributos de los elementos Canvas y Label para configurar su apariencia y su tamaño.

    • Mueve la cuadrícula que originalmente contenía HomePage.xaml a la segunda columna de la segunda fila de la nueva cuadrícula.

  3. Compile y ejecute la aplicación.

En la ilustración siguiente se muestra el resultado de este paso.

Captura de pantalla de ejemplo ExpenseIt

Agregar código para controlar los eventos

  1. Abra HomePage.xaml.

  2. Sobrescriba el elemento Button definido en el paso anterior por el código siguiente.

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

    Nota

    El nombre del evento de Button que se va a controlar es Click. El nombre del controlador de eventos definido por el programador es viewButton_Click. El controlador de eventos se registra con el evento Click para el control Button.

  3. Abra el archivo HomePage.xaml.cs que creó en el paso Crear los archivos de código de la aplicación del tutorial.

  4. Sobrescriba el contenido del archivo por el siguiente código. De esta forma, se agrega código para controlar el evento Click, que permite navegar hasta el archivo ExpenseReportPage.xaml.

    using System;
using System.Windows;
using System.Windows.Controls;
using System.Windows.Navigation;
namespace ExpenseIt
{
    public partial class HomePage : Page
    {
        public HomePage()
        {
            InitializeComponent();
        }
        private void viewButton_Click(object sender, RoutedEventArgs args)
        {
            // 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 HomePage.xaml. Las actualizaciones siguientes agregan los controles y el diseño que sirven para crear la interfaz de usuario básica de ExpenseReportPage.xaml. También agregan un fondo y colores de relleno a los distintos elementos de la interfaz de usuario.

  1. Abra el archivo ExpenseReportPage.xaml y agregue el código siguiente.

    <Page 
  xmlns="https://schemas.microsoft.com/winfx/2006/xaml/presentation"
  xmlns:x="https://schemas.microsoft.com/winfx/2006/xaml"
  x:Class="ExpenseIt.ExpenseReportPage"
  Title="ExpenseIt - View Expense Report">

  <Grid>

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

    <DockPanel Grid.Column="0" Grid.ColumnSpan="2" Grid.Row="0">
      <Canvas DockPanel.Dock="Left" Width="230" Height="100">
        <Image Source="watermark.png" />
      </Canvas>
      <Label VerticalAlignment="Center" FontFamily="Trebuchet MS" 
        FontWeight="Bold" FontSize="18" Foreground="#0066cc">
        Expense Report For:
      </Label>
    </DockPanel>

    <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="3">

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

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

        <!-- Expense type list -->
        <Border Grid.Column="0" Grid.Row="0" Height="35" Padding="5" Background="#4E87D4">
          <Label VerticalAlignment="Center" Foreground="White">Expense Type</Label>
        </Border>
        <ListBox Grid.Column="0" Grid.Row="1" />

        <!-- Amount list -->
        <Border Grid.Column="2" Grid.Row="0" Height="35" Padding="5" Background="#4E87D4">
          <Label VerticalAlignment="Center" Foreground="White">Amount</Label>
        </Border>
        <ListBox Grid.Column="2" Grid.Row="1" />

      </Grid>
    </Grid>
  </Grid>
</Page>

  2. Compile y ejecute la aplicación.

La imagen siguiente muestra los elementos de la interfaz de usuario agregados a ExpenseReportPage.xaml.

Captura de pantalla de ejemplo ExpenseIt

Agregar código para aplicar estilo a un control

Es habitual que todos los elementos del mismo tipo de una interfaz de usuario presenten la misma apariencia. La interfaz de usuario utiliza estilos para permitir la reutilización de las distintas apariencias en diversos elementos. Esta posibilidad de reutilizar los estilos ayuda a simplificar la creación y la administración del marcado XAML. En este paso se reemplazan por estilos los atributos que se definieron en pasos anteriores para los distintos elementos:

  1. Abra el archivo App.xaml creado en el paso Crear los archivos de código de la aplicación de este tutorial.

  2. Sobrescriba el contenido del archivo por el siguiente marcado XAML:

    <Application 
  xmlns="https://schemas.microsoft.com/winfx/2006/xaml/presentation"
  xmlns:x="https://schemas.microsoft.com/winfx/2006/xaml"
  StartupUri="HomePage.xaml">

  <Application.Resources>

    <!-- Background image style -->
    <Style x:Key="backgroundImageStyle">
      <Setter Property="Image.Source" Value="watermark.png"/>
    </Style>

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

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

  </Application.Resources>

</Application>

    Este marcado XAML agrega los estilos siguientes:

    • headerTextStyle: para dar formato al control Label de título de página.

    • labelStyle: para dar formato a las etiquetas Label.

    • listHeaderStyle: para dar formato a los controles Border de encabezado de lista.

    • listHeaderTextStyle: para dar formato a los controles Label de encabezado de lista.

    • buttonStyle: para dar formato al botón de HomePage.xaml.

    Observe que los estilos son los recursos secundarios del elemento de propiedad Application.Resources. En esta ubicación, los estilos se aplican a todos los elementos de una aplicación. Para obtener un ejemplo del uso de los recursos en una aplicación de .NET Framework, consulte Cómo: Usar recursos de aplicaciones.

  3. Abra HomePage.xaml.

  4. Sobrescriba el contenido del archivo por el siguiente código. En este paso se reemplazan atributos específicos de la apariencia de cada elemento por un estilo apropiado.

    <Page 
  xmlns="https://schemas.microsoft.com/winfx/2006/xaml/presentation"
  xmlns:x="https://schemas.microsoft.com/winfx/2006/xaml"
  x:Class="ExpenseIt.HomePage"
  WindowTitle="ExpenseIt"
  Title="ExpenseIt - Home" 
  WindowWidth="550" WindowHeight="380">

  <Grid>

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

    <DockPanel Grid.Column="0" Grid.ColumnSpan="2" Grid.Row="0">
      <Canvas DockPanel.Dock="Left" Width="230" Height="100">
        <Image Style="{StaticResource backgroundImageStyle}" />
      </Canvas>
      <Label Style="{StaticResource headerTextStyle}">View Expense Report</Label>
    </DockPanel>

    <Grid Margin="10" Grid.Column="1" Grid.Row="1">

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

      <!-- People list -->
      <Border Grid.Column="0" Grid.Row="0" Style="{StaticResource listHeaderStyle}">
        <Label Style="{StaticResource listHeaderTextStyle}">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" Style="{StaticResource buttonStyle}" 
        Click="viewButton_Click">View
      </Button>

    </Grid>

  </Grid>

</Page>

  5. Abra ExpenseReportPage.xaml.

  6. Sobrescriba el contenido del archivo por el siguiente código.

    <Page 
  xmlns="https://schemas.microsoft.com/winfx/2006/xaml/presentation"
  xmlns:x="https://schemas.microsoft.com/winfx/2006/xaml"
  x:Class="ExpenseIt.ExpenseReportPage"
  Title="ExpenseIt - View Expense Report">

  <Grid>

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

    <DockPanel Grid.Column="0" Grid.ColumnSpan="2" Grid.Row="0">
      <Canvas DockPanel.Dock="Left" Width="230" Height="100">
        <Image Style="{StaticResource backgroundImageStyle}" />
      </Canvas>
      <Label Style="{StaticResource headerTextStyle}">Expense Report For:</Label>
    </DockPanel>

    <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="3">

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

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

        <!-- Expense type list -->
        <Border Grid.Column="0" Grid.Row="0" Style="{StaticResource listHeaderStyle}">
          <Label Style="{StaticResource listHeaderTextStyle}">Expense Type</Label>
        </Border>
        <ListBox Grid.Column="0" Grid.Row="1" />

        <!-- Amount list -->
        <Border Grid.Column="2" Grid.Row="0" Style="{StaticResource listHeaderStyle}">
          <Label Style="{StaticResource listHeaderTextStyle}">Amount</Label>
        </Border>
        <ListBox Grid.Column="2" Grid.Row="1" />

      </Grid>

    </Grid>

  </Grid>

</Page>

  7. Compile y ejecute la aplicación. Después de agregar el marcado XAML de este paso, la aplicación presenta la misma apariencia que tenía antes de actualizarla con los estilos.

Enlazar datos a un control.

En este paso se crean datos XML que se enlazan a varios controles:

  1. Abra HomePage.xaml.

  2. Sobrescriba el contenido del archivo por el siguiente marcado XAML.

    <Page 
  xmlns="https://schemas.microsoft.com/winfx/2006/xaml/presentation"
  xmlns:x="https://schemas.microsoft.com/winfx/2006/xaml"
  x:Class="ExpenseIt.HomePage"
  WindowTitle="ExpenseIt"
  Title="ExpenseIt - Home" 
  WindowWidth="550" WindowHeight="380">

  <Grid>

    <Grid.Resources>

      <!-- Expense Report Data -->
      <XmlDataProvider x:Key="ExpenseDataSource" XPath="Expenses">
        <x:XData>
          <Expenses >
            <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.ColumnDefinitions>
      <ColumnDefinition Width="230" />
      <ColumnDefinition />
    </Grid.ColumnDefinitions>
    <Grid.RowDefinitions>
      <RowDefinition Height="Auto" />
      <RowDefinition />
    </Grid.RowDefinitions>

    <DockPanel Grid.Column="0" Grid.ColumnSpan="2" Grid.Row="0">
      <Canvas DockPanel.Dock="Left" Width="230" Height="100">
        <Image Style="{StaticResource backgroundImageStyle}" />
      </Canvas>
      <Label Style="{StaticResource headerTextStyle}">View Expense Report</Label>
    </DockPanel>

    <Grid Margin="10" Grid.Column="1" Grid.Row="1">

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

      <!-- People list -->
      <Border Grid.Column="0" Grid.Row="0" Style="{StaticResource listHeaderStyle}">
        <Label Style="{StaticResource listHeaderTextStyle}">Names</Label>
      </Border>
      <ListBox Name="peopleListBox" Grid.Column="0" Grid.Row="1" 
        ItemsSource="{Binding Source={StaticResource ExpenseDataSource}, XPath=Person}" 
        ItemTemplate="{StaticResource nameItemTemplate}" />

      <!-- View report button -->
      <Button Grid.Column="0" Grid.Row="2" Style="{StaticResource buttonStyle}" 
        Click="viewButton_Click">View</Button>

    </Grid>

  </Grid>

</Page>

    Observe que los datos se crean como un recurso Grid.

Conectar los datos a los controles

En este paso, escribirá el código que recupera el elemento actual que está seleccionado en la lista de personas de HomePage y pasa su referencia al constructor de ExpenseReportPage durante la creación de instancias. ExpenseReportPage establece su contexto de datos con el elemento que se pasa, que es el elemento con el que se enlazarán los controles definidos en ExpenseReportPage.xaml.

  1. Abra HomePage.xaml.cs.

  2. Sobrescriba el contenido del archivo por el siguiente código.

    using System;
using System.Windows;
using System.Windows.Controls;
using System.Windows.Navigation;
namespace ExpenseIt
{
    public partial class HomePage : Page
    {
        public HomePage()
        {
            InitializeComponent();
        }

        private void viewButton_Click(object sender, RoutedEventArgs args)
        {
            // Create a new expense report page and pass it the selected person
            // by using the non-default constructor.
            ExpenseReportPage expenseReportPage = 
                new ExpenseReportPage(this.peopleListBox.SelectedItem);

            // Navigate to the expense report page,
            this.NavigationService.Navigate(expenseReportPage);
        }
    }
}

  3. Abra ExpenseReportPage.xaml.cs.

  4. Sobrescriba el contenido del archivo por el siguiente código.

    using System;
using System.Windows;
using System.Windows.Controls;
using System.Windows.Navigation;
namespace ExpenseIt
{
    public partial class ExpenseReportPage : Page
    {
        public ExpenseReportPage(object data)
        {
            InitializeComponent();

            // Bind to expense report data.
            this.DataContext = data;
        }
    }
}

Agregar estilo a los datos con plantillas de datos

En este paso, actualizará la interfaz de usuario para cada elemento de las listas enlazadas a datos utilizando las plantillas de datos:

  1. Abra ExpenseReportPage.xaml.

  2. Sobrescriba el contenido del archivo por el siguiente código.

    <Page 
  xmlns="https://schemas.microsoft.com/winfx/2006/xaml/presentation"
  xmlns:x="https://schemas.microsoft.com/winfx/2006/xaml"
  x:Class="ExpenseIt.ExpenseReportPage"
  Title="ExpenseIt - View Expense Report">

  <Grid>

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

    <DockPanel Grid.Column="0" Grid.ColumnSpan="2" Grid.Row="0">
      <Canvas DockPanel.Dock="Left" Width="230" Height="100">
        <Image Style="{StaticResource backgroundImageStyle}" />
      </Canvas>
      <Label Style="{StaticResource headerTextStyle}">Expense Report For:</Label>
    </DockPanel>

    <Grid Margin="10" Grid.Column="1" Grid.Row="1">

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

      <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 Content="{Binding XPath=@Name}" Style="{StaticResource labelStyle}"/>
      </StackPanel>

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

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

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

        <!-- Expense type list -->
        <Border Grid.Column="0" Grid.Row="0" Style="{StaticResource listHeaderStyle}">
          <Label Style="{StaticResource listHeaderTextStyle}">Expense Type</Label>
        </Border>
        <ListBox Grid.Column="0" Grid.Row="1" ItemsSource="{Binding XPath=Expense}" 
          ItemTemplate="{StaticResource typeItemTemplate}" />

        <!-- Amount list -->
        <Border Grid.Column="2" Grid.Row="0" Style="{StaticResource listHeaderStyle}">
          <Label Style="{StaticResource listHeaderTextStyle}">Amount</Label>
        </Border>
        <ListBox Grid.Column="2" Grid.Row="1" ItemsSource="{Binding XPath=Expense}" 
          ItemTemplate="{StaticResource amountItemTemplate}" />

      </Grid>

    </Grid>

  </Grid>

</Page>

  3. Compile y ejecute la aplicación.

Observe que las plantillas de datos están definidas como recursos Grid.

En las dos ilustraciones siguientes 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 aplicadas:

Capturas de pantalla de ejemplo ExpenseIt

Procedimientos recomendados

En este ejemplo, se muestra una característica específica de Windows Presentation Foundation y, por tanto, no se siguen los procedimientos recomendados de desarrollo de aplicaciones. Para obtener información completa sobre los procedimientos recomendados de desarrollo de aplicaciones de Windows Presentation Foundation (WPF) y Microsoft .NET Framework, consulte la siguiente información según corresponda:

Accesibilidad: Procedimientos de accesibilidad recomendados

Seguridad: Seguridad de Windows Presentation Foundation

Localización: Información general sobre la localización y globalización de WPF

Optimizar WPF: Rendimiento de aplicaciones

Pasos adicionales

Ahora tiene a su disposición varias técnicas para crear una interfaz de usuario mediante Windows Presentation Foundation (WPF). Ya debería tener una idea general de los elementos básicos necesarios para la creación de una aplicación .NET Framework enlazada a datos. Este tema no pretende ser exhaustivo, pero se supone que ahora ya conoce algunas de las posibilidades que puede descubrir por sí mismo además de las técnicas que se tratan en este tema.

Los paneles se describen con mayor detalle en Información general sobre elementos Panel. La creación de plantillas de datos se explica más a fondo en Información general sobre plantillas de datos.

Vea también

Conceptos

Sistema de diseño

Información general sobre elementos Panel

Información general sobre el enlace de datos

Información general sobre plantillas de datos

Generar una aplicación de WPF (WPF)