WPF: enlace de datos
El enlace de datos es un mecanismo en las aplicaciones WPF que proporciona una manera simple y fácil para que las aplicaciones de Windows Runtime muestren e interactúen con los datos. En este mecanismo, la gestión de datos está completamente separada de la forma de datos.
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 reflejan 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 es de dos tipos: one-way data binding y two-way data binding.
Enlace de datos unidireccional
En la vinculación unidireccional, los datos se vinculan desde su origen (que es el objeto que contiene los datos) a su destino (que es el objeto que muestra los datos)
Tomemos un ejemplo simple para comprender el enlace de datos unidireccional en detalle. En primer lugar, cree un nuevo proyecto WPF con el nombreWPFDataBinding.
El siguiente código XAML crea dos etiquetas, dos cuadros de texto y un botón y los inicializa con algunas propiedades.
<Window x:Class = "WPFDataBinding.MainWindow"
xmlns = "http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x = "http://schemas.microsoft.com/winfx/2006/xaml"
xmlns:d = "http://schemas.microsoft.com/expression/blend/2008"
xmlns:mc = "http://schemas.openxmlformats.org/markup-compatibility/2006"
xmlns:local = "clr-namespace:WPFDataBinding"
mc:Ignorable = "d" Title = "MainWindow" Height = "350" Width = "604">
<Grid>
<Grid.RowDefinitions>
<RowDefinition Height = "Auto" />
<RowDefinition Height = "Auto" />
<RowDefinition Height = "*" />
</Grid.RowDefinitions>
<Grid.ColumnDefinitions>
<ColumnDefinition Width = "Auto" />
<ColumnDefinition Width = "200" />
</Grid.ColumnDefinitions>
<Label Name = "nameLabel" Margin = "2">_Name:</Label>
<TextBox Name = "nameText" Grid.Column = "1" Margin = "2"
Text = "{Binding Name, Mode = OneWay}"/>
<Label Name = "ageLabel" Margin = "2" Grid.Row = "1">_Age:</Label>
<TextBox Name = "ageText" Grid.Column = "1" Grid.Row = "1" Margin = "2"
Text = "{Binding Age, Mode = OneWay}"/>
<StackPanel Grid.Row = "2" Grid.ColumnSpan = "2">
<Button Content = "_Show..." Click="Button_Click" />
</StackPanel>
</Grid>
</Window>Las propiedades de texto de ambos cuadros de texto se unen a "Nombre" y "Edad", que son variables de clase de la clase Persona que se muestra a continuación.
En la clase Person, tenemos solo dos variables Name y Age, y su objeto se inicializa en MainWindow clase.
En el código XAML, estamos vinculando a una propiedad Name y Age, pero no hemos seleccionado a qué objeto pertenece esa propiedad.
La forma más sencilla es asignar un objeto a DataContext cuyas propiedades estamos vinculando en el siguiente código C # en MainWindowconstructor.
using System.Windows;
namespace WPFDataBinding {
public partial class MainWindow : Window {
Person person = new Person { Name = "Salman", Age = 26 };
public MainWindow() {
InitializeComponent();
this.DataContext = person;
}
private void Button_Click(object sender, RoutedEventArgs e) {
string message = person.Name + " is " + person.Age;
MessageBox.Show(message);
}
}
public class Person {
private string nameValue;
public string Name {
get { return nameValue; }
set { nameValue = value; }
}
private double ageValue;
public double Age {
get { return ageValue; }
set {
if (value != ageValue) {
ageValue = value;
}
}
}
}
}Ejecutemos esta aplicación y podrá ver inmediatamente en nuestra ventana principal que nos hemos vinculado con éxito al objeto Nombre y Edad de esa Persona.
Cuando presiona el Show , mostrará el nombre y la edad en el cuadro de mensaje.
Cambiemos el nombre y la edad en el cuadro de diálogo.
Si ahora hace clic en el botón Mostrar, volverá a mostrar el mismo mensaje.
Esto se debe a que el modo de enlace de datos se establece en unidireccional en el código XAML. Para mostrar los datos actualizados, deberá comprender la vinculación de datos bidireccional.
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, desea que la vista se actualice.
Tomemos el mismo ejemplo, pero aquí cambiaremos el modo de enlace de One Way a Two Way en el código XAML.
<Window x:Class = "WPFDataBinding.MainWindow"
xmlns = "http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x = "http://schemas.microsoft.com/winfx/2006/xaml"
xmlns:d = "http://schemas.microsoft.com/expression/blend/2008"
xmlns:mc = "http://schemas.openxmlformats.org/markup-compatibility/2006"
xmlns:local = "clr-namespace:WPFDataBinding"
mc:Ignorable = "d" Title = "MainWindow" Height = "350" Width = "604">
<Grid>
<Grid.RowDefinitions>
<RowDefinition Height = "Auto" />
<RowDefinition Height = "Auto" />
<RowDefinition Height = "*" />
</Grid.RowDefinitions>
<Grid.ColumnDefinitions>
<ColumnDefinition Width = "Auto" />
<ColumnDefinition Width = "200" />
</Grid.ColumnDefinitions>
<Label Name = "nameLabel" Margin = "2">_Name:</Label>
<TextBox Name = "nameText" Grid.Column = "1" Margin = "2"
Text = "{Binding Name, Mode = TwoWay}"/>
<Label Name = "ageLabel" Margin = "2" Grid.Row = "1">_Age:</Label>
<TextBox Name = "ageText" Grid.Column = "1" Grid.Row = "1" Margin = "2"
Text = "{Binding Age, Mode = TwoWay}"/>
<StackPanel Grid.Row = "2" Grid.ColumnSpan = "2">
<Button Content = "_Show..." Click = "Button_Click" />
</StackPanel>
</Grid>
</Window>Ejecutemos esta aplicación de nuevo.
Producirá el mismo resultado:
Cambiemos ahora los valores de Nombre y Edad:
Si hace clic en el botón Mostrar ahora, mostrará el mensaje actualizado.
Le recomendamos que ejecute el código anterior con ambos casos para comprender mejor el concepto.