Silverlight - Liaison de données
La liaison de données est un mécanisme dans l'application Silverlight, qui fournit un moyen simple et facile aux applications Windows Runtime d'utiliser des classes partielles pour afficher et interagir avec les données. La gestion des données est entièrement séparée de la manière dont les données sont affichées dans ce mécanisme. La liaison de données permet le flux de données entre les éléments de l'interface utilisateur et l'objet de données sur l'interface utilisateur. Lorsqu'une liaison est établie et que les données ou votre modèle commercial changent, elle reflétera automatiquement les mises à jour des éléments de l'interface utilisateur et vice versa. Il est également possible de se lier, non pas à une source de données standard, mais plutôt à un autre élément de la page.
La liaison de données est des deux types suivants -
- Liaison de données unidirectionnelle
- Liaison de données bidirectionnelle
Liaison de données unidirectionnelle
Dans la liaison de données unidirectionnelle, les données sont liées de leur source (c'est-à-dire l'objet qui contient les données) à sa cible (c'est-à-dire l'objet qui affiche les données).
Jetons un coup d'œil à un exemple simple de liaison de données unidirectionnelle.
Ci-dessous se trouve le code XAML dans lequel deux étiquettes, deux zones de texte et un bouton sont créés avec certaines propriétés.
<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>Nous observons les choses suivantes -
Les propriétés de texte des deux zones de texte sont liées à "Name" et "Age», Qui sont des variables de classe de Person classe comme indiqué ci-dessous.
Dans Person classe, nous n'avons que deux variables Name et Age, et son objet est initialisé dans MainPage classe.
Dans le code XAML, nous nous lions à une propriété Name et Age, mais nous n'avons pas sélectionné la propriété appartenant à l'objet.
Un moyen simple consiste à affecter un objet à DataContext dont nous lions les propriétés dans le code C # dans MainPage constructeur comme indiqué ci-dessous.
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;
}
}
}
}
}Laissez-nous exécuter cette application et vous pouvez voir immédiatement sur votre page Web que nous avons lié avec succès le nom et l'âge de cet objet Personne.
Lorsque vous appuyez sur le Show bouton, il affichera le nom et l'âge dans la boîte de message.
Changeons le Name et Age dans la boîte de dialogue ci-dessus.
Maintenant, si vous cliquez sur le Show bouton, il affichera à nouveau le même message.
C'est parce que le data-bindingmode est défini sur oneeway dans le code XAML. Pour afficher le message mis à jour, vous devez comprendre la liaison de données bidirectionnelle.
Liaison de données bidirectionnelle
Dans two-way binding, l'utilisateur peut modifier les données via l'interface utilisateur et mettre à jour ces données dans la source. Si la source change pendant que l'utilisateur regarde la vue, vous voulez que la vue soit mise à jour.
Jetons un coup d'œil au même exemple, mais changeons uniquement le mode de liaison de liaison unidirectionnelle à bidirectionnelle dans le code XAML, comme indiqué ci-dessous.
<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>Laissons-nous exécuter à nouveau cette application et vous pouvez voir le même résultat.
Changeons le Name et Age dans la boîte de dialogue ci-dessus.
Maintenant, si vous cliquez sur le Show il affichera le message mis à jour.
