Silverlight - vinculação de dados
A vinculação de dados é um mecanismo no aplicativo Silverlight, que fornece uma maneira simples e fácil para aplicativos do Windows Runtime usando classes parciais para exibir e interagir com os dados. O gerenciamento de dados é separado inteiramente, da forma como os dados são exibidos neste mecanismo. A vinculação de dados permite o fluxo de dados entre os elementos da IU e o objeto de dados na interface do usuário. Quando uma ligação é estabelecida e os dados ou seu modelo de negócios são alterados, ele refletirá as atualizações automaticamente para os elementos da IU e vice-versa. Também é possível vincular não a uma fonte de dados padrão, mas a outro elemento da página.
A vinculação de dados é dos dois tipos a seguir -
- Vinculação de dados unilateral
- Vinculação de dados bidirecional
Vinculação de dados unilateral
Na vinculação de dados unilateral, os dados são vinculados de sua origem (ou seja, o objeto que contém os dados) ao seu destino (ou seja, o objeto que exibe os dados).
Vamos dar uma olhada em um exemplo simples de vinculação de dados unilateral.
A seguir é fornecido o código XAML no qual dois rótulos, duas caixas de texto e um botão são criados com algumas propriedades.
<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>Observamos as seguintes coisas -
As propriedades de texto de ambas as caixas de texto vinculam-se a “Name”E“Age”, Que são variáveis de classe de Person classe como mostrado abaixo.
Dentro Person classe, temos apenas duas variáveis Name e Age, e seu objeto é inicializado em MainPage classe.
No código XAML, estamos vinculados a uma propriedade Name e Idade, mas não selecionamos qual propriedade pertence ao objeto.
Uma maneira fácil é atribuir um objeto a DataContext cujas propriedades estamos vinculando no código C # em MainPage construtor conforme mostrado abaixo.
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;
}
}
}
}
}Deixe-nos executar este aplicativo e você verá em sua página da Web imediatamente que vinculamos com sucesso o nome e a idade daquele objeto Pessoa.
Quando você pressiona o Show botão, ele exibirá o nome e a idade na caixa de mensagem.
Vamos mudar o Name e Age na caixa de diálogo acima.
Agora, se você clicar no Show botão, ele exibirá a mesma mensagem novamente.
Isso ocorre porque o data-bindingmodo é definido como unidirecional no código XAML. Para mostrar a mensagem atualizada, você precisará entender a vinculação de dados bidirecional.
Vinculação de dados bidirecional
Dentro two-way binding, o usuário é capaz de modificar os dados por meio da interface do usuário e atualizá-los na fonte. Se a fonte mudar enquanto o usuário está olhando para a visualização, você deseja que a visualização seja atualizada.
Vejamos o mesmo exemplo, mas apenas altere o modo de vinculação de unidirecional para bidirecional no código XAML, conforme mostrado abaixo.
<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>Deixe-nos executar este aplicativo novamente e você verá o mesmo resultado.
Vamos mudar o Name e Age na caixa de diálogo acima.
Agora, se você clicar no Show botão irá exibir a mensagem atualizada.
