WPF - Liaison de données
La liaison de données est un mécanisme dans les applications WPF qui fournit un moyen simple et facile aux applications Windows Runtime d'afficher et d'interagir avec les données. Dans ce mécanisme, la gestion des données est entièrement séparée de la manière dont les données.
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 d'entreprise changent, elle reflète 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 à un autre élément de la page.
La liaison de données est de deux types - one-way data binding et two-way data binding.
Liaison de données unidirectionnelle
Dans la liaison 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)
Prenons un exemple simple pour comprendre en détail la liaison de données unidirectionnelle. Tout d'abord, créez un nouveau projet WPF avec le nomWPFDataBinding.
Le code XAML suivant crée deux étiquettes, deux zones de texte et un bouton et les initialise avec certaines propriétés.
<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>Les propriétés de texte des deux zones de texte se lient à «Nom» et «Âge», qui sont des variables de classe de la classe Person illustrée ci-dessous.
Dans la classe Person, nous n'avons que deux variables Name et Age, et son objet est initialisé dans MainWindow classe.
Dans le code XAML, nous lions à une propriété Name et Age, mais nous n'avons pas sélectionné à quel objet cette propriété appartient.
Le moyen le plus simple est d'attribuer un objet à DataContext dont nous lions les propriétés dans le code C # suivant dans 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;
}
}
}
}
}Exécutons cette application et vous pouvez voir immédiatement dans notre MainWindow que nous avons lié avec succès le nom et l'âge de cet objet Person.
Lorsque vous appuyez sur le Show bouton, il affichera le nom et l'âge sur la boîte de message.
Modifions le nom et l'âge dans la boîte de dialogue.
Si vous cliquez maintenant sur le bouton Afficher, il affichera à nouveau le même message.
En effet, le mode de liaison de données est défini sur unidirectionnel dans le code XAML. Pour afficher les données mises à jour, vous devez comprendre la liaison de données bidirectionnelle.
Liaison de données bidirectionnelle
Dans la liaison bidirectionnelle, 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.
Prenons le même exemple mais ici, nous allons changer le mode de liaison de One Way à Two Way dans le code 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>Exécutons à nouveau cette application.
Il produira le même résultat -
Modifions maintenant les valeurs Nom et Âge -
Si vous cliquez sur le bouton Afficher maintenant, il affichera le message mis à jour.
Nous vous recommandons d'exécuter le code ci-dessus avec les deux cas pour une meilleure compréhension du concept.