Silverlight - Datenbindung
Die Datenbindung ist ein Mechanismus in der Silverlight-Anwendung, 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 Daten in diesem Mechanismus angezeigt werden. Die Datenbindung ermöglicht den Datenfluss zwischen UI-Elementen und dem 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 von Datenbindungen:
- Einweg-Datenbindung
- Zweiwege-Datenbindung
Einweg-Datenbindung
Bei der Einweg-Datenbindung werden die 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.
Im Folgenden ist der XAML-Code angegeben, in dem zwei Beschriftungen, zwei Textfelder und eine Schaltfläche mit einigen Eigenschaften erstellt werden.
<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>Wir beobachten die folgenden Dinge -
Die Texteigenschaften beider Textfelder sind an „Name" und "Age”, Die Klassenvariablen von sind Person Klasse wie unten gezeigt.
Im Person Klasse haben wir nur zwei Variablen Name und Ageund sein Objekt wird in initialisiert MainPage Klasse.
Im XAML-Code binden wir an eine Eigenschaft Name und Alter, aber wir haben nicht ausgewählt, welche Eigenschaft zum Objekt gehört.
Eine einfache Möglichkeit besteht darin, ein Objekt zuzuweisen DataContext deren Eigenschaften wir im C # -Code in binden MainPage Konstruktor wie unten gezeigt.
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;
}
}
}
}
}Lassen Sie uns diese Anwendung ausführen und Sie können auf Ihrer Webseite sofort 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 das ändern Name und Age im obigen Dialogfeld.
Nun, wenn Sie auf die klicken Show Klicken Sie auf die Schaltfläche, um dieselbe Meldung erneut anzuzeigen.
Das liegt daran, dass die data-bindingDer Modus ist im XAML-Code auf Oneway eingestellt. Um die aktualisierte Nachricht anzuzeigen, müssen Sie die bidirektionale Datenbindung verstehen.
Zweiwege-Datenbindung
Im two-way bindingDer Benutzer kann 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.
Schauen wir uns das gleiche Beispiel an, ändern Sie jedoch nur den Bindungsmodus im XAML-Code von Einweg- in Zweiwegbindung, wie unten gezeigt.
<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>Lassen Sie uns diese Anwendung erneut ausführen, und Sie können dieselbe Ausgabe sehen.
Lassen Sie uns das ändern Name und Age im obigen Dialogfeld.
Nun, wenn Sie auf die klicken Show Schaltfläche wird die aktualisierte Nachricht angezeigt.
