XAML - Liaison de données

La liaison de données est un mécanisme dans les applications XAML 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 d'entreprise 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 peut être de deux types -

• Liaison de données unidirectionnelle
• Liaison de données bidirectionnelle

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).

Jetons un coup d'œil à un exemple simple de liaison de données à sens unique. Le code XAML suivant crée quatre blocs de texte avec certaines propriétés.

<Window x:Class = "DataBindingOneWay.MainWindow" 
   xmlns = "http://schemas.microsoft.com/winfx/2006/xaml/presentation" 
   xmlns:x = "http://schemas.microsoft.com/winfx/2006/xaml" 
   Title = "MainWindow" Height = "350" Width = "604"> 
	
   <Grid>
      <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 = "100" Text = "{Binding Title}" /> 
         </StackPanel>
      </StackPanel>
   </Grid> 
	
</Window>

Les propriétés de texte de deux blocs de texte sont définies statiquement sur «Nom» et «Titre», tandis que les deux autres blocs de texte Les propriétés de texte sont liées à «Nom» et «Titre», qui sont des variables de classe de la classe Employé illustrée ci-dessous.

using System; 
using System.Collections.Generic; 
using System.Linq; 
using System.Text; 
using System.Threading.Tasks; 
 
namespace DataBindingOneWay {
   public class Employee {
      public string Name { get; set; } 
      public string Title { get; set; }  
		
      public static Employee GetEmployee() {
         var emp = new Employee() { 
            Name = "Ali Ahmed", Title = "Developer" 
         }; 
         return emp; 
      }
   }
}

Dans cette classe, nous n'avons que deux variables, Name et Title, et une méthode statique dans laquelle l'objet Employé est initialisé qui retournera cet objet Employé. Nous lions donc une propriété, un nom et un titre, mais nous n'avons pas sélectionné à quel objet cette propriété appartient. Le moyen le plus simple consiste à affecter un objet à DataContext dont nous lions les propriétés dans le code C # suivant -

using System; 
using System.Windows; 
using System.Windows.Controls;

namespace DataBindingOneWay { 
   /// <summary> 
      /// Interaction logic for MainWindow.xaml 
   /// </summary> 
	
   public partial class MainWindow : Window {
      public MainWindow() { 
         InitializeComponent(); 
         DataContext = Employee.GetEmployee(); 
      } 
   }
}

Exécutons cette application et vous pouvez voir immédiatement dans notre MainWindow que nous avons lié avec succès le nom et le titre de cet objet Employee.

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 souhaiterez mettre à jour la vue.

Exemple

Jetons un coup d'œil à l'exemple suivant dans lequel une zone de liste déroulante avec trois éléments de zone de liste déroulante et une zone de texte sont créées avec certaines propriétés. Dans cet exemple, nous n'avons aucune source de données standard, mais les éléments de l'interface utilisateur sont liés à d'autres éléments de l'interface utilisateur.

<Window x:Class = "XAMLTestBinding.MainWindow" 
   xmlns = "http://schemas.microsoft.com/winfx/2006/xaml/presentation" 
   xmlns:x = "http://schemas.microsoft.com/winfx/2006/xaml" 
   Title = "MainWindow" Height = "350" Width = "604"> 
	
   <StackPanel>
      <ComboBox Name = "comboBox"  Margin = "50" Width = "100"> 
         <ComboBoxItem Content = "Green" /> 
         <ComboBoxItem Content = "Yellow" IsSelected = "True" /> 
         <ComboBoxItem Content = "Orange" /> 
      </ComboBox>
		
      <TextBox  Name = "textBox" Margin = "50" 
         Width = "100" Height = "23" VerticalAlignment = "Top" 
         Text  = "{Binding ElementName = comboBox, Path = SelectedItem.Content, 
         Mode = TwoWay, UpdateSourceTrigger = PropertyChanged}" 
         Background = "{Binding ElementName = comboBox, Path = SelectedItem.Content}"> 
      </TextBox>
   </StackPanel> 
	
</Window>

Lorsque vous compilez et exécutez le code ci-dessus, il produira la sortie suivante. Lorsque l'utilisateur sélectionne un élément dans la liste déroulante, le texte de la zone de texte et la couleur d'arrière-plan seront mis à jour en conséquence.

De même, lorsque l'utilisateur tape un nom de couleur valide dans la zone de texte, la zone de liste déroulante et la couleur d'arrière-plan de la zone de texte seront également mises à jour.