Tutorial: Creación de la primera aplicación WPF en Visual Studio 2019

2025-05-07

En este artículo se muestra cómo desarrollar una aplicación de escritorio de Windows Presentation Foundation (WPF) que incluye los elementos comunes a la mayoría de las aplicaciones WPF: marcado extensible del lenguaje de marcado de aplicaciones (XAML), código subyacente, definiciones de aplicaciones, controles, diseño, enlace de datos y estilos. Para desarrollar la aplicación, usará Visual Studio.

Importante

Este artículo se escribió para .NET Framework. Para empezar a trabajar con .NET, consulte Tutorial: Creación de una nueva aplicación wpF (WPF .NET).

En este tutorial, aprenderá a:

Cree un proyecto de WPF.
Usa XAML para diseñar la apariencia de la interfaz de usuario (UI) de la aplicación.
Escriba código para compilar el comportamiento de la aplicación.
Cree una definición de aplicación para administrar la aplicación.
Agregue controles y cree el diseño para crear la interfaz de usuario de la aplicación.
Cree estilos para una apariencia coherente en toda la interfaz de usuario de la aplicación.
Enlace la interfaz de usuario a los datos, tanto para rellenar la interfaz de usuario de los datos como para mantener sincronizados los datos y la interfaz de usuario.

Al final del tutorial, habrá creado una aplicación de Windows independiente que permite a los usuarios ver informes de gastos para personas seleccionadas. La aplicación se compone de varias páginas de WPF hospedadas en una ventana de estilo explorador.

Sugerencia

El código de ejemplo que se usa en este tutorial está disponible para Visual Basic y C# en Tutorial Código de ejemplo de aplicación wpF.

Puede alternar el lenguaje de código del código de ejemplo entre C# y Visual Basic mediante el selector de lenguaje en la parte superior de esta página.

Prerrequisitos

Visual Studio 2019 con el workload de desarrollo para escritorio .NET instalado.

Para obtener más información sobre cómo instalar la versión más reciente de Visual Studio, consulte Instalación de Visual Studio.

Creación del proyecto de aplicación

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.

Cree un nuevo proyecto de aplicación wpF en Visual Basic o Visual C# denominado ExpenseIt:
1. Abra Visual Studio y seleccione Crear un nuevo proyecto en el menú Introducción .
  
  Se abre el cuadro de diálogo Crear un nuevo proyecto .
2. En la lista desplegable Lenguaje , seleccione C# o Visual Basic.
3. Seleccione la plantilla Aplicación wpF (.NET Framework) y, a continuación, seleccione Siguiente.
  
  Se abre el cuadro de diálogo Configurar el nuevo proyecto .
4. Escriba el nombre ExpenseIt del proyecto y, a continuación, seleccione Crear.
  
  Visual Studio crea el proyecto y abre el diseñador para la ventana de aplicación predeterminada denominada MainWindow.xaml.

Abra Application.xaml (Visual Basic) o App.xaml (C#).

Este archivo XAML define una aplicación WPF y cualquier recurso de aplicación. También usas este archivo para especificar la interfaz de usuario, en este caso MainWindow.xaml, que se muestra automáticamente cuando se inicia la aplicación.

El CÓDIGO XAML debe tener un aspecto similar al siguiente en 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 como se muestra a continuación en 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>

Abra MainWindow.xaml.

Este archivo XAML es la ventana principal de la aplicación y muestra el contenido creado en páginas. La Window clase define las propiedades de una ventana, como su título, tamaño o icono, y controla los eventos, como cerrar u ocultar.
Cambie el Window elemento a , NavigationWindowcomo se muestra en el código XAML siguiente:
```
<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 la entrada del usuario. Este es el motivo por el que es necesario cambiar el elemento principal Window a .NavigationWindow NavigationWindow hereda todas las propiedades de Window. El NavigationWindow elemento del archivo XAML crea una instancia de la NavigationWindow clase . Para obtener más información, consulte Información general sobre la navegación.
Quite los Grid elementos de entre las NavigationWindow etiquetas.

Cambie las siguientes propiedades en el código XAML para el NavigationWindow elemento :

Establezca la Title propiedad en "ExpenseIt".
Establezca la Height propiedad en 350 píxeles.
Establezca la Width propiedad en 500 píxeles.

El CÓDIGO XAML debe tener el siguiente aspecto para 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 de forma similar al siguiente ejemplo para 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>

Abra MainWindow.xaml.vb o MainWindow.xaml.cs.

Este archivo es un archivo de código subyacente que contiene código para controlar los eventos declarados en MainWindow.xaml. Este archivo contiene una clase parcial para la ventana definida en XAML.

Si usa C#, cambie la MainWindow clase para derivar de NavigationWindow. (En Visual Basic, esto sucede automáticamente al cambiar la ventana en XAML). El código de C# ahora debería tener este aspecto:


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();
        }
    }
}

Adición de archivos a la aplicación

En esta sección, agregará dos páginas y una imagen a la aplicación.

Agregue una nueva página al proyecto y asígnele ExpenseItHome.xamlel nombre :
1. En el Explorador de soluciones, haga clic con el botón derecho en el nodo del ExpenseIt proyecto y elija Agregar>página.
2. En el cuadro de diálogo Agregar nuevo elemento , la plantilla Página (WPF) ya está seleccionada. Escriba el nombre ExpenseItHomey, a continuación, seleccione Agregar.
Esta página es la primera página que se muestra cuando se inicia la aplicación. Se mostrará una lista de personas entre las que seleccionar, para mostrar un informe de gastos.
Abierto ExpenseItHome.xaml.
Configure el Title a "ExpenseIt - Home".

Establezca en DesignHeight 350 píxeles y en DesignWidth 500 píxeles.

El CÓDIGO XAML aparece ahora como sigue para 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 de forma similar al siguiente ejemplo para 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>

Abra MainWindow.xaml.

Agregue una Source propiedad al NavigationWindow elemento y establézcala en "ExpenseItHome.xaml".

ExpenseItHome.xaml Establece que sea la primera página que se abre cuando se inicia la aplicación.

Xaml de ejemplo en 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#:

<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 Source en la categoría Varios de la ventana Propiedades .

Propiedad Source en la ventana Propiedades

Agregue otra página wpF nueva al proyecto y asígnele el nombre ExpenseReportPage.xaml::
1. En el Explorador de soluciones, haga clic con el botón derecho en el nodo del ExpenseIt proyecto y elija Agregar>página.
2. En el cuadro de diálogo Agregar nuevo elemento, seleccione la plantilla Página (WPF). Escriba el nombre ExpenseReportPage y seleccione Agregar.
En esta página se mostrará el informe de gastos de la persona seleccionada en la ExpenseItHome página.
Abra ExpenseReportPage.xaml.
Configure el Title a "ExpenseIt - View Expense".

Establezca en DesignHeight 350 píxeles y en DesignWidth 500 píxeles.

ExpenseReportPage.xaml ahora tiene el siguiente aspecto en 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 como se muestra a continuación en 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>

Abra ExpenseItHome.xaml.vb y ExpenseReportPage.xaml.vb, o ExpenseItHome.xaml.cs y ExpenseReportPage.xaml.cs.

Al crear un nuevo archivo de página, Visual Studio crea automáticamente su archivo de código subyacente . Estos archivos de código subyacente controlan la lógica para responder a la entrada del usuario.

El código debe tener un aspecto similar al siguiente para 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 como se muestra a continuación para 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

Agregue una imagen denominada watermark.png al proyecto. Puede crear su propia imagen, copiar el archivo desde el código de ejemplo o obtenerlo del repositorio de GitHub microsoft/WPF-Samples .
1. Haga clic con el botón derecho en el nodo del proyecto y seleccione Agregar>elemento existente o presione Mayús+Alt+A.
2. En el cuadro de diálogo Agregar elemento existente , establezca el filtro de archivo en Todos los archivos o Archivos de imagen, vaya al archivo de imagen que desea usar y, a continuación, seleccione Agregar.
3. Seleccione el archivo de imagen en el Explorador de soluciones y, a continuación, en la ventana Propiedades , establezca Acción de compilación en Recurso.

Compilación y ejecución de la aplicación

Para compilar y ejecutar la aplicación, presione F5 o seleccione Iniciar depuración en el menú Depurar .

En la ilustración siguiente se muestra la aplicación con los NavigationWindow botones:
Cierre la aplicación para volver a Visual Studio.

Crear el diseño

El diseño proporciona una manera ordenada de colocar elementos de la interfaz de usuario y también administra el tamaño y la posición de esos elementos cuando se cambia el tamaño de una interfaz de usuario. Normalmente, se crea un diseño con uno de los siguientes controles de diseño:

Canvas - Define un área dentro de la cual puede posicionar explícitamente elementos secundarios mediante coordenadas relativas al área del lienzo.
DockPanel - Define un área donde puede organizar los elementos secundarios horizontal o verticalmente, en relación entre sí.
Grid - Define un área de cuadrícula flexible que consta de columnas y filas.
StackPanel - Organiza los elementos secundarios en una sola línea que se puede orientar horizontal o verticalmente.
VirtualizingStackPanel - Organiza y virtualiza el contenido en una sola línea orientada horizontal o verticalmente.
WrapPanel - Coloca los elementos secundarios en posición secuencial de izquierda a derecha, dividiendo el contenido a la siguiente línea en el borde de la caja contenedora. La ordenación posterior se produce secuencialmente de arriba a abajo o de derecha a izquierda, dependiendo del valor de la propiedad Orientation.

Cada uno de estos controles de diseño admite un tipo determinado de diseño para sus elementos secundarios. ExpenseIt las páginas se pueden cambiar de tamaño y cada página tiene elementos que se organizan horizontal y verticalmente junto con otros elementos. En este ejemplo, Grid se usa como elemento de diseño para la aplicación.

Sugerencia

Para obtener más información sobre los elementos, vea Panel paneles. Para obtener más información sobre el diseño, vea Diseño.

En esta sección, creará una tabla de una sola columna con tres filas y un margen de 10 píxeles añadiendo definiciones de columna y de fila en GridExpenseItHome.xaml.

En ExpenseItHome.xaml, establezca la Margin propiedad en el Grid elemento en "10,0,10,10", que corresponde a los márgenes izquierdo, superior, derecho e inferior:
```
<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 :
Agregue el código XAML siguiente entre las Grid etiquetas para crear las definiciones de fila y columna:
```
<Grid.ColumnDefinitions>
    <ColumnDefinition />
</Grid.ColumnDefinitions>
<Grid.RowDefinitions>
    <RowDefinition Height="Auto"/>
    <RowDefinition />
    <RowDefinition Height="Auto"/>
</Grid.RowDefinitions>
```
La Height propiedad de dos filas se establece Autoen , lo que significa que las filas tienen un tamaño basado en el contenido de las filas. El valor predeterminado Height es el ajuste de tamaño Star, lo que significa que el alto de la fila es una proporción ponderada del espacio disponible. Por ejemplo, si dos filas tienen un Height de "*", la altura de cada una es equivalente a la mitad del espacio disponible.

Ahora Grid debe contener el código XAML siguiente:
```
<Grid Margin="10,0,10,10">
    <Grid.ColumnDefinitions>
        <ColumnDefinition />
    </Grid.ColumnDefinitions>
    <Grid.RowDefinitions>
        <RowDefinition Height="Auto"/>
        <RowDefinition />
        <RowDefinition Height="Auto"/>
    </Grid.RowDefinitions>
</Grid>
```

Agregar controles

En esta sección, actualizará la interfaz de usuario de la página principal para mostrar una lista de personas, donde seleccionará una persona para mostrar su informe de gastos. Los controles son objetos de interfaz de usuario que permiten a los usuarios interactuar con la aplicación. Para obtener más información, vea Controles.

Para crear esta interfaz de usuario, agregará los siguientes elementos a ExpenseItHome.xaml:

A ListBox (para la lista de personas).
A Label (para el encabezado de lista).
A Button (haga clic para ver el informe de gastos de la persona seleccionada en la lista).

Cada control se coloca en una fila de Grid estableciendo la propiedad adjunta Grid.Row. Para obtener más información sobre las propiedades adjuntas, vea Información general sobre las propiedades adjuntas.

En ExpenseItHome.xaml, agregue el código XAML siguiente en algún lugar entre las Grid etiquetas:


<!-- 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,10" 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 estableciendo sus propiedades en la ventana Propiedades .

Compile y ejecute la aplicación.

En la ilustración siguiente se muestran los controles que creó:

Captura de pantalla de ejemplo expenseIt que muestra una lista de nombres

Agregar una imagen y un título

En esta sección, actualizará la interfaz de usuario de la página principal con una imagen y un título de página.

En ExpenseItHome.xaml, agregue otra columna a ColumnDefinitions con un valor fijo Width de 230 píxeles:

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

Agregue otra fila al RowDefinitions, para un total de cuatro filas.

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

Mueva los controles a la segunda columna estableciendo la Grid.Column propiedad en 1 en cada uno de los tres controles (Border, ListBox y Button).

Mueva cada control hacia abajo una fila incrementando su Grid.Row valor en 1 para cada uno de los tres controles (Border, ListBox y Button) y para el elemento Border.

El XAML de los tres controles ahora tiene el siguiente aspecto:

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

Establezca la propiedad Background al archivo de imagen watermark.png, agregando el siguiente código XAML en cualquier lugar entre las etiquetas <Grid> y </Grid>:
```
<Grid.Background>
    <ImageBrush ImageSource="watermark.png"/>
</Grid.Background>
```

Antes del Border elemento , agregue un Label elemento con el contenido "Ver informe de gastos". Esta etiqueta es el título de la página.

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

Compile y ejecute la aplicación.

En la ilustración siguiente se muestran los resultados de lo que acaba de agregar:

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

Adición de código para controlar eventos

En ExpenseItHome.xaml, agregue un Click controlador de eventos al Button elemento . Para obtener más información, vea 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>

Abra ExpenseItHome.xaml.vb o ExpenseItHome.xaml.cs.

Agregue el código siguiente a la ExpenseItHome clase para agregar un controlador de eventos de clic de botón. El controlador de eventos abre la página ExpenseReportPage .

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

Creación de la interfaz de usuario para ExpenseReportPage

ExpenseReportPage.xaml muestra el informe de gastos de la persona seleccionada en la ExpenseItHome página. En esta sección, creará la interfaz de usuario para ExpenseReportPage. También agregará colores de fondo y relleno a los distintos elementos de la interfaz de usuario.

Abra ExpenseReportPage.xaml.

Agregue el código XAML siguiente entre las Grid etiquetas:

 <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, excepto que los datos del informe se muestran en .DataGrid

Compile y ejecute la aplicación.
Seleccione el botón Ver .

Aparece la página del informe de gastos. Observe también que el botón de navegación atrás está habilitado.

En la ilustración siguiente se muestran los elementos de la interfaz de usuario agregados a ExpenseReportPage.xaml.

Captura de pantalla de ejemplo expenseIt que muestra la interfaz de usuario recién creada para ExpenseReportPage.

Controles de estilo

La apariencia de varios elementos suele ser la misma para todos los elementos del mismo tipo en una interfaz de usuario. La interfaz de usuario usa estilos para hacer que las apariencias sean reutilizables en varios elementos. La reutilización de estilos ayuda a simplificar la creación y administración de XAML. En esta sección se reemplazan los atributos por elemento definidos en los pasos anteriores por estilos.

Abra Application.xaml o App.xaml.

Agregue el código XAML siguiente entre las Application.Resources etiquetas:


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

<!-- Label style -->
<Style x:Key="labelStyle" TargetType="{x:Type Label}">
    <Setter Property="VerticalAlignment" Value="Top" />
    <Setter Property="HorizontalAlignment" Value="Left" />
    <Setter Property="FontWeight" Value="Bold" />
    <Setter Property="Margin" Value="0,0,0,5" />
</Style>

<!-- DataGrid header style -->
<Style x:Key="columnHeaderStyle" TargetType="{x:Type DataGridColumnHeader}">
    <Setter Property="Height" Value="35" />
    <Setter Property="Padding" Value="5" />
    <Setter Property="Background" Value="#4E87D4" />
    <Setter Property="Foreground" Value="White" />
</Style>

<!-- List header style -->
<Style x:Key="listHeaderStyle" TargetType="{x:Type Border}">
    <Setter Property="Height" Value="35" />
    <Setter Property="Padding" Value="5" />
    <Setter Property="Background" Value="#4E87D4" />
</Style>

<!-- List header text style -->
<Style x:Key="listHeaderTextStyle" TargetType="{x:Type Label}">
    <Setter Property="Foreground" Value="White" />
    <Setter Property="VerticalAlignment" Value="Center" />
    <Setter Property="HorizontalAlignment" Value="Left" />
</Style>

<!-- Button style -->
<Style x:Key="buttonStyle" TargetType="{x:Type Button}">
    <Setter Property="Width" Value="125" />
    <Setter Property="Height" Value="25" />
    <Setter Property="Margin" Value="0,10,0,0" />
    <Setter Property="HorizontalAlignment" Value="Right" />
</Style>

Este XAML agrega los siguientes estilos:

headerTextStyle: para dar formato al título Labelde la página .
labelStyle: para dar formato a los Label controles.
columnHeaderStyle: para dar formato DataGridColumnHeadera .
listHeaderStyle: para dar formato a los controles de encabezado Border de lista.
listHeaderTextStyle: para dar formato al encabezado Labelde lista .
buttonStyle: para dar formato a Button en ExpenseItHome.xaml.

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

En ExpenseItHome.xaml, reemplace todo lo que hay entre los Grid elementos por el código XAML siguiente:

   <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 el aspecto de cada control se quitan y reemplazan aplicando los estilos. Por ejemplo, headerTextStyle se aplica al "Ver informe de gastos". Label

Abra ExpenseReportPage.xaml.

Reemplace todo entre los Grid elementos por el código XAML siguiente:

  <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 XAML agrega estilos a los Label elementos y Border .

Compile y ejecute la aplicación. La apariencia de la ventana es la misma que antes.
Cierre la aplicación para volver a Visual Studio.

Enlace de datos a un control

En esta sección, creará los datos XML enlazados a varios controles.

En ExpenseItHome.xaml, después del elemento de apertura Grid, agregue el siguiente XAML para crear un XmlDataProvider que contiene los datos de cada persona:

<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 Grid recurso. Normalmente, estos datos se cargarían como un archivo, pero para simplificar el proceso, los datos se agregan en línea.

En el <Grid.Resources> elemento , agregue el elemento siguiente <xref:System.Windows.DataTemplate> , que define cómo mostrar los datos en ListBox, después del <XmlDataProvider> elemento :
```
<Grid.Resources>
    
    <DataTemplate x:Key="nameItemTemplate">
        <Label Content="{Binding XPath=@Name}"/>
    </DataTemplate>
</Grid.Resources>
```
Para obtener más información sobre las plantillas de datos, consulte Información general sobre plantillas de datos.

Reemplace el existente ListBox por el código XAML siguiente:

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

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

Conexión de datos a controles

A continuación, agregará código para recuperar el nombre seleccionado en la ExpenseItHome página y pasarlo al constructor de ExpenseReportPage. ExpenseReportPage establece su contexto de datos con el elemento pasado, a los que los controles definidos en ExpenseReportPage.xaml se enlazan.

Abra ExpenseReportPage.xaml.vb o ExpenseReportPage.xaml.cs.

Añada un constructor que reciba un objeto, de modo que pueda pasar los datos del informe de gastos de la persona seleccionada.

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

Abra ExpenseItHome.xaml.vb o ExpenseItHome.xaml.cs.

Cambie el Click controlador de eventos para que el nuevo constructor reciba los datos del informe de gastos de la persona seleccionada.

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

Estilizar datos utilizando plantillas de datos

En esta sección, actualizará la interfaz de usuario para cada elemento de las listas vinculadas a datos mediante plantillas de datos.

Abra ExpenseReportPage.xaml.

Enlace el contenido de los elementos "Name" y "Department" Label a la propiedad de origen de datos adecuada. Para obtener más información sobre el enlace de datos, consulte Introducción al enlace de datos.

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

Después del elemento de apertura Grid , agregue las siguientes plantillas de datos, que definen cómo mostrar los datos del informe de gastos:

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

Reemplace los DataGridTextColumn elementos por DataGridTemplateColumn debajo del DataGrid elemento y aplique las plantillas a ellos. Además, especifique el ItemsSource atributo con su valor en el DataGrid elemento .

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

Compile y ejecute la aplicación.
Seleccione una persona y, a continuación, seleccione el botón Ver .

En la ilustración siguiente se muestran las dos páginas de la ExpenseIt aplicación con controles, diseño, estilos, enlace de datos y plantillas de datos aplicadas:

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

Nota:

En este ejemplo se muestra una característica específica de WPF y no se siguen todos los procedimientos recomendados para cosas como seguridad, localización y accesibilidad. Para obtener una cobertura completa de WPF y los procedimientos recomendados de desarrollo de aplicaciones de .NET, consulte los temas siguientes:

Pasos siguientes

En este tutorial ha aprendido varias técnicas para crear una interfaz de usuario mediante 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. Para obtener más información sobre los modelos de programación y arquitectura de WPF, vea los temas siguientes:

Para obtener más información sobre la creación de aplicaciones, consulte los temas siguientes:

Compartir a través de

Tutorial: Creación de la primera aplicación WPF en Visual Studio 2019

Prerrequisitos

Creación del proyecto de aplicación

Adición de archivos a la aplicación

Compilación y ejecución de la aplicación

Crear el diseño

Agregar controles

Agregar una imagen y un título

Adición de código para controlar eventos

Creación de la interfaz de usuario para ExpenseReportPage

Controles de estilo

Enlace de datos a un control

Conexión de datos a controles

Estilizar datos utilizando plantillas de datos

Pasos siguientes

Consulte también

Comentarios

Recursos adicionales