XAML: enlace de datos

El enlace de datos es un mecanismo en las aplicaciones XAML que proporciona una forma simple y fácil para que las aplicaciones de Windows Runtime usen clases parciales para mostrar e interactuar con los datos. La gestión de datos está completamente separada de la forma en que se muestran los datos en este mecanismo.

El enlace de datos permite el flujo de datos entre los elementos de la interfaz de usuario y el objeto de datos en la interfaz de usuario. Cuando se establece una vinculación y los datos o su modelo de negocio cambian, las actualizaciones se reflejarán automáticamente en los elementos de la interfaz de usuario y viceversa. También es posible enlazar, no a una fuente de datos estándar, sino a otro elemento de la página. El enlace de datos puede ser de dos tipos:

  • Enlace de datos unidireccional
  • Enlace de datos bidireccional

Enlace de datos unidireccional

En el enlace unidireccional, los datos se enlazan desde su origen (que es el objeto que contiene los datos) a su destino (que es el objeto que muestra los datos).

Echemos un vistazo a un ejemplo simple de enlace de datos unidireccional. El siguiente código XAML crea cuatro bloques de texto con algunas propiedades.

<Window x:Class = "DataBindingOneWay.MainWindow" 
   xmlns = "http://schemas.microsoft.com/winfx/2006/xaml/presentation" 
   xmlns:x = "http://schemas.microsoft.com/winfx/2006/xaml" 
   Title = "MainWindow" Height = "350" Width = "604"> 
	
   <Grid>
      <StackPanel Name = "Display">
         <StackPanel Orientation = "Horizontal" Margin = "50, 50, 0, 0"> 
            <TextBlock Text = "Name: " Margin = "10" Width = "100" /> 
            <TextBlock Margin = "10" Width = "100" Text = "{Binding Name}" />
         </StackPanel> 
		
         <StackPanel Orientation = "Horizontal" Margin = "50,0,50,0"> 
            <TextBlock Text = "Title: " Margin = "10" Width = "100" /> 
            <TextBlock Margin = "10" Width = "100" Text = "{Binding Title}" /> 
         </StackPanel>
      </StackPanel>
   </Grid> 
	
</Window>

Las propiedades de texto de dos bloques de texto se establecen en "Nombre" y "Título" de forma estática, mientras que los otros dos bloques de texto Las propiedades de texto están vinculadas a "Nombre" y "Título", que son variables de clase de la clase Empleado que se muestra a continuación.

using System; 
using System.Collections.Generic; 
using System.Linq; 
using System.Text; 
using System.Threading.Tasks; 
 
namespace DataBindingOneWay {
   public class Employee {
      public string Name { get; set; } 
      public string Title { get; set; }  
		
      public static Employee GetEmployee() {
         var emp = new Employee() { 
            Name = "Ali Ahmed", Title = "Developer" 
         }; 
         return emp; 
      }
   }
}

En esta clase, solo tenemos dos variables, Name y Titley un método estático en el que se inicializa el objeto Empleado que devolverá ese objeto empleado. Así que estamos vinculando a una propiedad, Nombre y Título, pero no hemos seleccionado a qué objeto pertenece esa propiedad. La forma más fácil es asignar un objeto a DataContext cuyas propiedades estamos vinculando en el siguiente código C #:

using System; 
using System.Windows; 
using System.Windows.Controls;

namespace DataBindingOneWay { 
   /// <summary> 
      /// Interaction logic for MainWindow.xaml 
   /// </summary> 
	
   public partial class MainWindow : Window {
      public MainWindow() { 
         InitializeComponent(); 
         DataContext = Employee.GetEmployee(); 
      } 
   }
}

Ejecutemos esta aplicación y podrá ver inmediatamente en nuestra ventana principal que nos hemos vinculado con éxito al nombre y título de ese objeto Empleado.

Enlace de datos bidireccional

En el enlace bidireccional, el usuario puede modificar los datos a través de la interfaz de usuario y tener esos datos actualizados en la fuente. Si la fuente cambia mientras el usuario está mirando la vista, querrá actualizar la vista.

Ejemplo

Echemos un vistazo al siguiente ejemplo en el que se crea un cuadro combinado con tres elementos del cuadro combinado y un cuadro de texto con algunas propiedades. En este ejemplo, no tenemos ninguna fuente de datos estándar, pero los elementos de la interfaz de usuario están vinculados a otros elementos de la interfaz de usuario.

<Window x:Class = "XAMLTestBinding.MainWindow" 
   xmlns = "http://schemas.microsoft.com/winfx/2006/xaml/presentation" 
   xmlns:x = "http://schemas.microsoft.com/winfx/2006/xaml" 
   Title = "MainWindow" Height = "350" Width = "604"> 
	
   <StackPanel>
      <ComboBox Name = "comboBox"  Margin = "50" Width = "100"> 
         <ComboBoxItem Content = "Green" /> 
         <ComboBoxItem Content = "Yellow" IsSelected = "True" /> 
         <ComboBoxItem Content = "Orange" /> 
      </ComboBox>
		
      <TextBox  Name = "textBox" Margin = "50" 
         Width = "100" Height = "23" VerticalAlignment = "Top" 
         Text  = "{Binding ElementName = comboBox, Path = SelectedItem.Content, 
         Mode = TwoWay, UpdateSourceTrigger = PropertyChanged}" 
         Background = "{Binding ElementName = comboBox, Path = SelectedItem.Content}"> 
      </TextBox>
   </StackPanel> 
	
</Window>

Cuando compile y ejecute el código anterior, producirá el siguiente resultado. Cuando el usuario selecciona un elemento del cuadro combinado, el texto del cuadro de texto y el color de fondo se actualizarán en consecuencia.

De manera similar, cuando el usuario escribe un nombre de color válido en el cuadro de texto, también se actualizarán el cuadro combinado y el color de fondo del cuadro de texto.