WPF - Datenbindung

Die Datenbindung ist ein Mechanismus in WPF-Anwendungen, mit dem Windows Runtime-Apps auf einfache und einfache Weise Daten anzeigen und mit ihnen interagieren können. Bei diesem Mechanismus ist die Verwaltung von Daten vollständig von der Art und Weise der Daten getrennt.

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: one-way data binding und two-way data binding.

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.

  • Nehmen wir ein einfaches Beispiel, um die Einweg-Datenbindung im Detail zu verstehen. Erstellen Sie zunächst ein neues WPF-Projekt mit dem NamenWPFDataBinding.

  • Der folgende XAML-Code erstellt zwei Beschriftungen, zwei Textfelder und eine Schaltfläche und initialisiert sie mit einigen Eigenschaften.

<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>
  • Die Texteigenschaften beider Textfelder sind an "Name" und "Alter" gebunden. Dies sind Klassenvariablen der unten gezeigten Personenklasse.

  • In der Personenklasse haben wir nur zwei Variablen Name und Ageund sein Objekt wird in initialisiert MainWindow Klasse.

  • Im XAML-Code sind wir an den Namen und das Alter einer Eigenschaft gebunden, haben jedoch nicht ausgewählt, zu welchem ​​Objekt diese Eigenschaft gehört.

  • Der einfachere Weg ist, ein Objekt zuzuweisen DataContext deren Eigenschaften wir im folgenden C # -Code in binden 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; 
            } 
         } 
      }
		
   } 
}
  • Lassen Sie uns diese Anwendung ausführen und Sie können sofort in unserem MainWindow sehen, dass wir erfolgreich an den Namen und das Alter dieses Personenobjekts gebunden haben.

Wenn Sie die Taste drücken Show Klicken Sie auf die Schaltfläche, um den Namen und das Alter im Meldungsfeld anzuzeigen.

Lassen Sie uns den Namen und das Alter im Dialogfeld ändern.

Wenn Sie jetzt auf die Schaltfläche Anzeigen klicken, wird dieselbe Meldung erneut angezeigt.

Dies liegt daran, dass der Datenbindungsmodus im XAML-Code auf Einweg eingestellt ist. Um die aktualisierten Daten anzuzeigen, müssen Sie die bidirektionale Datenbindung verstehen.

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, dass die Ansicht aktualisiert wird.

Nehmen wir das gleiche Beispiel, aber hier ändern wir den Bindungsmodus im XAML-Code von One Way in Two Way.

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

Lassen Sie uns diese Anwendung erneut ausführen.

Es wird die gleiche Ausgabe erzeugen -

Lassen Sie uns nun die Werte für Name und Alter ändern -

Wenn Sie jetzt auf die Schaltfläche Anzeigen klicken, wird die aktualisierte Nachricht angezeigt.

Wir empfehlen, dass Sie den obigen Code in beiden Fällen ausführen, um das Konzept besser zu verstehen.