Desarrollo de Windows 10: enlace de datos
El enlace de datos es un mecanismo en la aplicación XAML, que proporciona una manera simple y fácil para que las aplicaciones de Windows Runtime usen clases parciales para mostrar e interactuar con 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 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 puede ser:
- Enlace de datos unidireccional
- Enlace de datos bidireccional
- Enlace de elementos
Enlace de datos unidireccional
En la vinculación unidireccional, los datos se vinculan desde su origen (el objeto que contiene los datos) a su destino (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 cuatro bloques de texto con algunas propiedades.
<Page
x:Class = "OneWayDataBinding.MainPage"
xmlns = "http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x = "http://schemas.microsoft.com/winfx/2006/xaml"
xmlns:local = "using:OneWayDataBinding"
xmlns:d = "http://schemas.microsoft.com/expression/blend/2008"
xmlns:mc = "http://schemas.openxmlformats.org/markup-compatibility/2006"
mc:Ignorable = "d">
<Grid Background = "{ThemeResource ApplicationPageBackgroundThemeBrush}">
<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 = "200" Text = "{Binding Title}" />
</StackPanel>
</StackPanel>
</Grid>
</Page>Las propiedades de texto de dos bloques de texto se establecen en “Name” y “Title” estáticamente, mientras que las otras dos propiedades de texto de los bloques de texto están vinculadas a "Nombre" y "Título", que son variables de clase de la clase Empleado, como se muestra a continuación.
using Windows.UI.Xaml.Controls;
// The Blank Page item template is documented at
http://go.microsoft.com/fwlink/?LinkId=402352&clcid=0x409
namespace OneWayDataBinding {
/// <summary>
/// An empty page that can be used on its own or navigated to within a Frame.
/// </summary>
public sealed partial class MainPage : Page {
public MainPage(){
this.InitializeComponent();
DataContext = Employee.GetEmployee();
}
}
public class Employee {
public string Name { get; set; }
public string Title { get; set; }
public static Employee GetEmployee() {
var emp = new Employee() {
Name = "Waqar Ahmed",
Title = "Development Manager"
};
return emp;
}
}
}En el Employee class, tenemos variables Name y Title y un método estático en el que el employee objectse inicializa y devolverá ese objeto de empleado. Por lo tanto, estamos vinculados a la propiedad, Nombre y Título, pero aún no hemos seleccionado el objeto al que pertenece la propiedad. La forma sencilla es asignar un objeto aDataContext, cuyas propiedades estamos vinculando en el MainPage Constructor.
Cuando ejecuta esta aplicación, puede ver inmediatamente en su MainWindow que ha 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 actualizar esos datos en la fuente. Por ejemplo, si la fuente cambia mientras el usuario está mirando la vista, desea que la vista se actualice.
Echemos un vistazo al siguiente ejemplo en el que se crean dos etiquetas, dos cuadros de texto y un botón con algunas propiedades y eventos.
<Page
x:Class = "TwoWayDataBinding.MainPage"
xmlns = "http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x = "http://schemas.microsoft.com/winfx/2006/xaml"
xmlns:local = "using:TwoWayDataBinding"
xmlns:d = "http://schemas.microsoft.com/expression/blend/2008"
xmlns:mc = "http://schemas.openxmlformats.org/markup-compatibility/2006"
mc:Ignorable = "d">
<Grid Background = "{ThemeResource ApplicationPageBackgroundThemeBrush}">
<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 = "200,20,0,0">Name:</TextBlock>
<TextBox Name = "nameText" Grid.Column = "1" Margin = "10,20,0,0"
Text = "{Binding Name, Mode = TwoWay}"/>
<TextBlock Name = "ageLabel" Margin = "200,20,0,0"
Grid.Row = "1">Age:</TextBlock>
<TextBox Name = "ageText" Grid.Column = "1" Grid.Row = "1" Margin = "10,20,0,0"
Text = "{Binding Age, Mode = TwoWay}"/>
<StackPanel Grid.Row = "2" Grid.ColumnSpan = "2">
<Button Content = "Display" Click = "Button_Click"
Margin = "200,20,0,0"/>
<TextBlock x:Name = "txtblock" Margin = "200,20,0,0"/>
</StackPanel>
</Grid>
</Page>Podemos observar lo siguiente:
Las propiedades de texto de ambos cuadros de texto se vinculan al "Name" y "Age" que son variables de clase de Person class Como se muestra abajo.
En Person class, tenemos solo dos variables: Nombre y Edad, y su objeto se inicializa en el MainWindow clase.
En el código XAML, estamos vinculados a la propiedad: Name y Age, pero no hemos seleccionado el objeto al que pertenece la propiedad.
La forma más sencilla es asignar un objeto a la DataContext, cuyas propiedades estamos vinculando en el código C # como se muestra a continuación en el MainWindowconstructor.
using Windows.UI.Xaml;
using Windows.UI.Xaml.Controls;
// The Blank Page item template is documented at
http://go.microsoft.com/fwlink/?LinkId=402352&clcid=0x409
namespace TwoWayDataBinding {
/// <summary>
/// An empty page that can be used on its own or navigated to within a Frame.
/// </summary>
public sealed partial class MainPage : Page {
Person person = new Person { Name = "Salman", Age = 26 };
public MainPage() {
this.InitializeComponent();
this.DataContext = person;
}
private void Button_Click(object sender, RoutedEventArgs e) {
string message = person.Name + " is " + person.Age + " years old";
txtblock.Text = 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;
}
}
}
}
}Cuando se compile y ejecute el código anterior, verá la siguiente ventana. Haga clic en elDisplay botón.
Cambiemos el nombre y la edad y hagamos clic en el Display botón de nuevo.
Puedes ver eso en el botón de clic ‘Display’, el texto de los cuadros de texto no se utiliza para mostrar los datos en TextBlock pero se utilizan las variables de clase.
Le recomiendo que ejecute el código anterior con ambos casos para una mejor comprensión.
Enlace de elementos
También es posible enlazar, no a una fuente de datos estándar, sino a otro elemento de la página. Creemos una aplicación llamadaElementBindingen el que se crean un Control deslizante y un Rectángulo y con el control deslizante, se enlazan el ancho y la altura del rectángulo. A continuación se muestra el código en XAML.
<Page
x:Class = "ElementBinding.MainPage"
xmlns = "http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x = "http://schemas.microsoft.com/winfx/2006/xaml"
xmlns:local = "using:ElementBinding"
xmlns:d = "http://schemas.microsoft.com/expression/blend/2008"
xmlns:mc = "http://schemas.openxmlformats.org/markup-compatibility/2006"
mc:Ignorable = "d">
<Grid Background = "{ThemeResource ApplicationPageBackgroundThemeBrush}">
<StackPanel VerticalAlignment = "Center" HorizontalAlignment = "Center">
<Rectangle Height = "100" Width = "100" Fill = "SteelBlue"
RenderTransformOrigin = "0.5,0.5" Margin = "50">
<Rectangle.RenderTransform>
<CompositeTransform ScaleX = "{Binding Value, ElementName = MySlider}"
ScaleY = "{Binding Value, ElementName = MySlider}"/>
</Rectangle.RenderTransform>
</Rectangle>
<Slider Minimum = ".5" Maximum = "2.0" StepFrequency = ".1"
x:Name = "MySlider" />
</StackPanel>
</Grid>
</Page>Cuando se compile y ejecute el código anterior, verá la siguiente ventana.
Con un control deslizante, puede cambiar el tamaño del rectángulo como se muestra a continuación.
