Silverlight - Associazione dati
Il data binding è un meccanismo nell'applicazione Silverlight, che fornisce un modo semplice e facile per le app Windows Runtime che usano classi parziali per visualizzare e interagire con i dati. La gestione dei dati è completamente separata dal modo in cui i dati vengono visualizzati in questo meccanismo. Il data binding consente il flusso di dati tra gli elementi dell'interfaccia utente e l'oggetto dati sull'interfaccia utente. Quando viene stabilita un'associazione e i dati o il modello di business cambiano, rifletterà automaticamente gli aggiornamenti agli elementi dell'interfaccia utente e viceversa. È anche possibile associare, non a un'origine dati standard, ma piuttosto a un altro elemento della pagina.
I data binding sono dei seguenti due tipi:
- Associazione dati unidirezionale
- Associazione dati bidirezionale
Associazione dati unidirezionale
Nell'associazione dati unidirezionale, i dati vengono associati dalla relativa origine (ovvero l'oggetto che contiene i dati) alla sua destinazione (ovvero l'oggetto che visualizza i dati).
Diamo uno sguardo a un semplice esempio di associazione dati unidirezionale.
Di seguito è riportato il codice XAML in cui vengono create due etichette, due caselle di testo e un pulsante con alcune proprietà.
<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>Osserviamo le seguenti cose:
Le proprietà di testo di entrambe le caselle di testo si associano a "Name" e "Age", Che sono variabili di classe di Person classe come mostrato di seguito.
In Person class, abbiamo solo due variabili Name e Agee il suo oggetto viene inizializzato in MainPage classe.
Nel codice XAML ci associamo a una proprietà Name e Age, ma non abbiamo selezionato quale proprietà appartiene all'oggetto.
Un modo semplice è assegnare un oggetto a DataContext le cui proprietà stiamo vincolando nel codice C # in MainPage costruttore come mostrato di seguito.
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;
}
}
}
}
}Facci eseguire questa applicazione e puoi vedere immediatamente nella tua pagina web che siamo stati collegati con successo all'oggetto Nome ed età di quella persona.
Quando si preme il pulsante Show pulsante, visualizzerà il nome e l'età nella finestra del messaggio.
Cambiamo il file Name e Age nella finestra di dialogo sopra.
Ora, se fai clic su Show pulsante, verrà visualizzato di nuovo lo stesso messaggio.
Questo perché il data-bindingmode è impostata su oneway nel codice XAML. Per mostrare il messaggio aggiornato, sarà necessario comprendere l'associazione dati bidirezionale.
Associazione dati bidirezionale
In two-way binding, l'utente può modificare i dati tramite l'interfaccia utente e aggiornarli nell'origine. Se la sorgente cambia mentre l'utente sta guardando la vista, vuoi che la vista venga aggiornata.
Diamo un'occhiata allo stesso esempio ma cambiamo solo la modalità di associazione da unidirezionale a unidirezionale nel codice XAML come mostrato di seguito.
<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>Eseguiamo nuovamente questa applicazione e potrai vedere lo stesso output.
Cambiamo il file Name e Age nella finestra di dialogo sopra.
Ora, se fai clic su Show il pulsante visualizzerà il messaggio aggiornato.
