Cómo crear un enlace de datos (WPF .NET)

En este artículo, se describe cómo crear un elemento XAML de enlace. En el ejemplo, se usa un objeto de datos que representa a un empleado de una empresa. Este objeto de datos está enlazado a una ventana XAML que usa controles TextBlock para enumerar los detalles del empleado. Creará una interfaz de usuario similar a la siguiente imagen:

Para obtener más información sobre el enlace de datos, consulte Introducción al enlace de datos en WPF.

Creación de un objeto de datos

En este ejemplo, se usa un empleado como el objeto de datos al que está enlazada la interfaz de usuario.

1. Agregue una nueva clase al proyecto y llámela Employee.

2. Reemplaza todo el código por el fragmento siguiente:

   using System;
   using System.ComponentModel;
   
   namespace ArticleSample
   {
       public class Employee : INotifyPropertyChanged
       {
           private decimal _salary;
           public event PropertyChangedEventHandler? PropertyChanged;
   
           public required string FirstName { get; set; }
           public required string LastName { get; set; }
           public required string Title { get; set; }
           public required DateTime HireDate { get; set; }
   
           public required decimal Salary
           {
               get => _salary;
               set
               {
                   _salary = value;
   
                   // Support TwoWay binding
                   PropertyChanged?.Invoke(this, new PropertyChangedEventArgs(nameof(Salary)));
               }
           }
       }
   }
   

   Imports System.ComponentModel
   
   Public Class Employee
       Implements INotifyPropertyChanged
   
       Private _salary As Decimal
       Public Event PropertyChanged As PropertyChangedEventHandler Implements INotifyPropertyChanged.PropertyChanged
   
       Public Property FirstName As String
       Public Property LastName As String
       Public Property Title As String
       Public Property HireDate As DateTime
   
       Public Property Salary As Decimal
           Get
               Return _salary
           End Get
           Set(value As Decimal)
               _salary = value
               RaiseEvent PropertyChanged(Me, New PropertyChangedEventArgs(NameOf(Salary)))
           End Set
       End Property
   
   End Class
   

El objeto de datos employee es una clase sencilla que describe a un empleado:

• Nombre y apellido del empleado.
• Fecha en la que se contrató al empleado.
• Título de la empresa del empleado.
• Los ingresos del empleado.

Enlace a un objeto de datos

En el código XAML siguiente, se muestra el uso de la clase Employee como objeto de datos. La propiedad DataContext del elemento raíz está enlazada a un recurso estático declarado en el código XAML. Los controles individuales están enlazados a las propiedades del objeto Employee.

1. Agregue una nueva ventana al proyecto y llámela EmployeeView.

2. Reemplace el código XAML por el fragmento de código siguiente:

   Importante

   El fragmento de código siguiente se toma de un proyecto de C#. Si usa Visual Basic, el elemento x:Class se debe declarar sin el espacio de nombres ArticleSample. Puede ver el aspecto de la versión de Visual Basic aquí.

   <Window x:Class="ArticleSample.EmployeeView"
           xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
           xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
           xmlns:local="clr-namespace:ArticleSample"
           Title="" Height="250" Width="300">
       <Window.Resources>
           <local:Employee x:Key="EmployeeExample" FirstName="Niki" LastName="Demetriou"
                                                   HireDate="2022-02-16" Salary="5012.00"
                                                   Title="Content Artist" />
       </Window.Resources>
       <StackPanel DataContext="{StaticResource EmployeeExample}">
           <Label FontSize="32">Employee</Label>
           <Border BorderBrush="Gray" BorderThickness="2" />
           <Grid Grid.Row="1" Margin="5">
               <Grid.RowDefinitions>
                   <RowDefinition Height="Auto"/>
                   <RowDefinition Height="Auto"/>
                   <RowDefinition Height="Auto"/>
                   <RowDefinition Height="Auto"/>
                   <RowDefinition Height="Auto"/>
               </Grid.RowDefinitions>
               <Grid.ColumnDefinitions>
                   <ColumnDefinition Width="Auto"/>
                   <ColumnDefinition Width="*"/>
               </Grid.ColumnDefinitions>
   
               <TextBlock Text="First Name:" Grid.Row="0" Margin="0,0,10,0" />
               <TextBlock Text="Last Name:" Grid.Row="1" />
               <TextBlock Text="Title:" Grid.Row="2" />
               <TextBlock Text="Hire Date:" Grid.Row="3" />
               <TextBlock Text="Salary" Grid.Row="4" />
   
               <TextBlock Text="{Binding FirstName}" Grid.Row="0" Grid.Column="1" />
               <TextBlock Text="{Binding LastName}" Grid.Row="1" Grid.Column="1" />
               <TextBlock Text="{Binding Title}" Grid.Row="2" Grid.Column="1" />
               <TextBlock Text="{Binding HireDate, StringFormat=d}" Grid.Row="3" Grid.Column="1" />
               <TextBlock Text="{Binding Salary, StringFormat=C0}" Grid.Row="4" Grid.Column="1" />
           </Grid>
           <Border BorderBrush="Gray" BorderThickness="2" />
           
           <StackPanel Margin="5,10" Orientation="Horizontal">
               <TextBlock Text="Change Salary:" Margin="0,0,10,0" />
               <TextBox Text="{Binding Salary, Mode=TwoWay, UpdateSourceTrigger=PropertyChanged, StringFormat=C0}" Width="100" />
           </StackPanel>
       </StackPanel>
   </Window>
   

El espacio de nombres del código no coincidirá con el espacio de nombres del proyecto, a menos que haya creado un proyecto llamado ArticleSample. Si creó un nuevo proyecto, puede copiar y pegar el objeto Window.Resources y el elemento raíz (StackPanel) en MainWindow.

Para comprender mejor cómo usa el código XAML anterior el enlace de datos, tenga en cuenta los siguientes puntos:

• Se usa un recurso XAML para crear una instancia de la clase Employee.

  Normalmente, el objeto de datos se pasa o se asocia a la ventana. En este ejemplo, se codifica de forma rígida el empleado con fines de demostración.

  <Window.Resources>
      <local:Employee x:Key="EmployeeExample" FirstName="Niki" LastName="Demetriou"
                                              HireDate="2022-02-16" Salary="5012.00"
                                              Title="Content Artist" />
  </Window.Resources>
  

• El elemento raíz (StackPanel) tiene su contexto de datos establecido en la instancia de Employee codificada de forma rígida.

  Los elementos secundarios heredan su DataContext de los elementos primarios, a menos que se establezcan explícitamente.

  <StackPanel DataContext="{StaticResource EmployeeExample}">
  

• Las propiedades de la instancia de Employee están enlazadas a los controles TextBlock.

  El elemento Binding no especifica un elemento BindingSource, por lo que se usa el elemento DataContext como origen.

  <TextBlock Text="{Binding FirstName}" Grid.Row="0" Grid.Column="1" />
  <TextBlock Text="{Binding LastName}" Grid.Row="1" Grid.Column="1" />
  <TextBlock Text="{Binding Title}" Grid.Row="2" Grid.Column="1" />
  <TextBlock Text="{Binding HireDate, StringFormat=d}" Grid.Row="3" Grid.Column="1" />
  <TextBlock Text="{Binding Salary, StringFormat=C0}" Grid.Row="4" Grid.Column="1" />
  

• Un control TextBox está enlazado con el modo TwoWay, lo que permite que el elemento TextBox cambie la propiedad Employee.Salary.

  <TextBox Text="{Binding Salary, Mode=TwoWay, UpdateSourceTrigger=PropertyChanged, StringFormat=C0}" Width="100" />
  

Contenido relacionado

• Información general sobre el enlace de datos