Silverlight - Enlace de datos
El enlace de datos es un mecanismo en la aplicación Silverlight, que proporciona una manera 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 un enlace 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.
Los enlaces de datos son de los dos tipos siguientes:
- Enlace de datos unidireccional
- Enlace de datos bidireccional
Enlace de datos unidireccional
En el enlace de datos 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.
A continuación se muestra el código XAML en el que se crean dos etiquetas, dos cuadros de texto y un botón con algunas propiedades.
<UserControl x:Class = "DataBinding.MainPage"
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"
mc:Ignorable = "d"
d:DesignHeight = "300" d:DesignWidth = "400">
<Grid x:Name = "LayoutRoot" Background = "White">
<Grid.RowDefinitions>
<RowDefinition Height = "Auto" />
<RowDefinition Height = "Auto" />
<RowDefinition Height = "*" />
</Grid.RowDefinitions>
<Grid.ColumnDefinitions>
<ColumnDefinition Width = "Auto" />
<ColumnDefinition Width = "200" />
</Grid.ColumnDefinitions>
<TextBlock Name = "nameLabel" Margin = "2">Name:</TextBlock>
<TextBox Name = "nameText" Grid.Column = "1" Margin = "2"
Text = "{Binding Name, Mode=OneWay}"/>
<TextBlock Name = "ageLabel" Margin = "2" Grid.Row = "1">Age:</TextBlock>
<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>
</UserControl>Observamos las siguientes cosas:
Las propiedades de texto de ambos cuadros de texto se vinculan a "Name"Y"Age", Que son variables de clase de Person clase como se muestra a continuación.
En Person clase, solo tenemos dos variables Name y Age, y su objeto se inicializa en MainPage clase.
En el código XAML, estamos vinculando a una propiedad Name y Edad, pero no hemos seleccionado qué propiedad pertenece al objeto.
Una forma sencilla es asignar un objeto a DataContext cuyas propiedades estamos vinculando en el código C # en MainPage constructor como se muestra a continuación.
using System.Windows;
using System.Windows.Controls;
namespace DataBinding {
public partial class MainPage : UserControl {
Person person = new Person { Name = "Salman", Age = 26 };
public MainPage() {
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;
}
}
}
}
}Permítanos ejecutar esta aplicación y podrá ver en su página web inmediatamente 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 Name y Age en el cuadro de diálogo anterior.
Ahora, si hace clic en el Show , volverá a mostrar el mismo mensaje.
Esto es porque el data-bindingmode se establece en unidireccional en el código XAML. Para mostrar el mensaje actualizado, deberá comprender el enlace de datos bidireccional.
Enlace de datos bidireccional
En two-way binding, 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.
Echemos un vistazo al mismo ejemplo, pero solo cambiemos el modo de enlace de enlace unidireccional a bidireccional en el código XAML como se muestra a continuación.
<UserControl x:Class = "DataBinding.MainPage"
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"
mc:Ignorable = "d"
d:DesignHeight = "300" d:DesignWidth = "400">
<Grid x:Name = "LayoutRoot" Background = "White">
<Grid.RowDefinitions>
<RowDefinition Height = "Auto" />
<RowDefinition Height = "Auto" />
<RowDefinition Height = "*" />
</Grid.RowDefinitions>
<Grid.ColumnDefinitions>
<ColumnDefinition Width = "Auto" />
<ColumnDefinition Width = "200" />
</Grid.ColumnDefinitions>
<TextBlock Name = "nameLabel" Margin = "2">_Name:</TextBlock>
<TextBox Name = "nameText" Grid.Column = "1" Margin = "2"
Text = "{Binding Name, Mode=TwoWay}"/>
<TextBlock Name = "ageLabel" Margin = "2" Grid.Row = "1">_Age:</TextBlock>
<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>
</UserControl>Ejecutemos esta aplicación nuevamente y podrá ver el mismo resultado.
Cambiemos el Name y Age en el cuadro de diálogo anterior.
Ahora, si hace clic en el Show botón mostrará el mensaje actualizado.
