Silverlight - wiązanie danych
Powiązanie danych to mechanizm w aplikacji Silverlight, który zapewnia prosty i łatwy sposób dla aplikacji środowiska wykonawczego systemu Windows przy użyciu klas częściowych do wyświetlania danych i interakcji z nimi. Zarządzanie danymi jest całkowicie oddzielone od sposobu wyświetlania danych w tym mechanizmie. Powiązanie danych umożliwia przepływ danych między elementami interfejsu użytkownika a obiektem danych w interfejsie użytkownika. Po ustanowieniu powiązania i zmianie danych lub modelu biznesowego aktualizacje zostaną automatycznie odzwierciedlone w elementach interfejsu użytkownika i odwrotnie. Możliwe jest również powiązanie nie ze standardowym źródłem danych, ale raczej z innym elementem na stronie.
Istnieją dwa typy powiązań danych -
- Jednokierunkowe wiązanie danych
- Dwukierunkowe wiązanie danych
Jednokierunkowe wiązanie danych
W przypadku jednokierunkowego wiązania danych dane są wiązane ze źródła (czyli obiektu, który je przechowuje) do celu (czyli obiektu, który wyświetla dane).
Przyjrzyjmy się prostemu przykładowi jednokierunkowego wiązania danych.
Poniżej podano kod XAML, w którym są tworzone dwie etykiety, dwa pola tekstowe i jeden przycisk z niektórymi właściwościami.
<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>Obserwujemy następujące rzeczy -
Właściwości tekstu obu pól tekstowych są powiązane z „Name" i "Age”, Które są zmiennymi klasowymi Person klasa, jak pokazano poniżej.
W Person mamy tylko dwie zmienne Name i Age, a jego obiekt jest inicjowany w MainPage klasa.
W kodzie XAML jesteśmy powiązani z właściwością Name i Age, ale nie wybraliśmy, która właściwość należy do obiektu.
Łatwym sposobem jest przypisanie obiektu do DataContext których właściwości są powiązane w kodzie C # w MainPage konstruktor, jak pokazano poniżej.
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;
}
}
}
}
}Pozwól nam uruchomić tę aplikację i od razu zobaczysz na swojej stronie internetowej, że pomyślnie powiązaliśmy obiekt z nazwą i wiekiem tej osoby.
Po naciśnięciu Show przycisk, wyświetli imię i wiek w oknie komunikatu.
Zmieńmy Name i Age w powyższym oknie dialogowym.
Teraz, jeśli klikniesz plik Show przycisk, ponownie wyświetli ten sam komunikat.
To dlatego, że data-bindingmode jest ustawiona na jednokierunkową w kodzie XAML. Aby wyświetlić zaktualizowany komunikat, musisz zrozumieć dwukierunkowe powiązanie danych.
Dwukierunkowe wiązanie danych
W two-way binding, użytkownik może modyfikować dane za pośrednictwem interfejsu użytkownika i aktualizować te dane w źródle. Jeśli źródło zmienia się, gdy użytkownik patrzy na widok, chcesz, aby widok został zaktualizowany.
Rzućmy okiem na ten sam przykład, ale zmień tylko tryb powiązania z jednokierunkowego na dwukierunkowe w kodzie XAML, jak pokazano poniżej.
<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>Uruchommy ponownie tę aplikację i zobaczysz to samo wyjście.
Zmieńmy Name i Age w powyższym oknie dialogowym.
Teraz, jeśli klikniesz plik Show przycisk wyświetli zaktualizowany komunikat.
