XAML - Datenbindung

Die Datenbindung ist ein Mechanismus in XAML-Anwendungen, der Windows Runtime Apps eine einfache Möglichkeit bietet, Daten mithilfe von Teilklassen anzuzeigen und mit ihnen zu interagieren. Die Verwaltung von Daten ist vollständig von der Art und Weise getrennt, wie die Daten in diesem Mechanismus angezeigt werden.

Die Datenbindung ermöglicht den Datenfluss zwischen UI-Elementen und Datenobjekt auf der Benutzeroberfläche. Wenn eine Bindung hergestellt wird und sich die Daten oder Ihr Geschäftsmodell ändern, werden die Aktualisierungen der UI-Elemente automatisch wiedergegeben und umgekehrt. Es ist auch möglich, nicht an eine Standarddatenquelle, sondern an ein anderes Element auf der Seite zu binden. Es gibt zwei Arten der Datenbindung:

Einweg-Datenbindung
Zweiwege-Datenbindung

Einweg-Datenbindung

Bei der Einwegbindung werden Daten von ihrer Quelle (dh dem Objekt, das die Daten enthält) an ihr Ziel (dh das Objekt, das die Daten anzeigt) gebunden.

Schauen wir uns ein einfaches Beispiel für die Einweg-Datenbindung an. Der folgende XAML-Code erstellt vier Textblöcke mit einigen Eigenschaften.

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

Die Texteigenschaften von zwei Textblöcken werden statisch auf "Name" und "Titel" gesetzt, während die anderen beiden Textblöcke auf "Name" und "Titel" gebunden sind. Dies sind Klassenvariablen der Employee-Klasse, die unten gezeigt wird.

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; 
      }
   }
}

In dieser Klasse haben wir nur zwei Variablen, Name und Titleund eine statische Methode, bei der das Employee-Objekt initialisiert wird, die das Employee-Objekt zurückgibt. Wir sind also an eine Eigenschaft, einen Namen und einen Titel gebunden, haben jedoch nicht ausgewählt, zu welchem Objekt diese Eigenschaft gehört. Am einfachsten ist es, DataContext ein Objekt zuzuweisen, dessen Eigenschaften wir im folgenden C # -Code binden:

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(); 
      } 
   }
}

Lassen Sie uns diese Anwendung ausführen, und Sie können sofort in unserem MainWindow sehen, dass wir erfolgreich an den Namen und den Titel dieses Mitarbeiterobjekts gebunden haben.

Zweiwege-Datenbindung

Bei der bidirektionalen Bindung kann der Benutzer die Daten über die Benutzeroberfläche ändern und diese Daten in der Quelle aktualisieren lassen. Wenn sich die Quelle ändert, während der Benutzer die Ansicht betrachtet, möchten Sie die Ansicht aktualisieren.

Beispiel

Schauen wir uns das folgende Beispiel an, in dem eine Combobox mit drei Combobox-Elementen und einem Textfeld mit einigen Eigenschaften erstellt wird. In diesem Beispiel haben wir keine Standarddatenquelle, aber die UI-Elemente sind an andere UI-Elemente gebunden.

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

Wenn Sie den obigen Code kompilieren und ausführen, wird die folgende Ausgabe erzeugt. Wenn der Benutzer ein Element aus der Combobox auswählt, werden der Text des Textfelds und die Hintergrundfarbe entsprechend aktualisiert.

Wenn der Benutzer einen gültigen Farbnamen in das Textfeld eingibt, werden auch die Combobox und die Hintergrundfarbe des Textfelds aktualisiert.