Binding for Dummies (ep.2)

Nel primo episodio di Binding for Dummies abbiamo visto come implementare il data binding in un caso semplice, caso che però non rende chiari i vantaggi di questo approccio ma fa sembrare solo di introdurre inutili complicazioni.

In questa seconda parte vedremo invece come i vantaggi del data binding diventino evidenti nel momento in cui permettono di aggiornare l’interfaccia grafica al variare del nostro modello ad oggetti senza dover scrivere alcun codice aggiuntivo per gestire queste variazioni.

Per prima cosa capiamo bene di cosa stiamo parlando.
Inseriamo un bottone nella nostra pagina xaml, così
<Button  Content=”Premi qui”/>

Associamo ora una funzione all’evento click del bottone. Il codice xaml finale sarà:
<Button Content=”Premi qui” Click=”Button_Click” />
Potete ottenere questo semplicemente digitando all’interno del tag Button il comando Click= e lasciare all’intellisense creare la funzione per voi,
image
oppure selezionare il bottone e fare doppio click nella casella di testo associata all’evento click nella finestra proprietà (dove ora c’è scritto Button_Click); anche questa seconda modalità creerà per voi la funzione agganciata all’evento click del bottone
image

Troverete nel file di code-behind la funzione Button_Click appena creata, all’interno della quale andremo a scrivere la logica che vogliamo sia eseguita al click del pulsante.

Prima di scrivere il codice della funzione dobbiamo però spostare la creazione dell’oggetto data al di fuori del costruttore della mainpage, altrimenti l’oggetto non sarà visibile al di fuori di quella funzione. Spostiamo dunque
//Creazione dell’oggetto data
Data data = new Data();
prima della definizione del costruttore. A questo punto possiamo scrivere dentro Button_Click il codice che modificherà il valore della proprietà etichetta
private void Button_Click(object sender, RoutedEventArgs e)
{
data.Etichetta = “Hai premuto il pulsante”;
}
Se provate ad implementare questo codice, osserverete che alla pressione del pulsante, quello che succede è … NIENTE
La vostra variabile ha cambiato valore, ma questo cambiamento non si riflette nell’interfaccia. Per ottenere questo dobbiamo modificare la nostra classe Data.

Per prima cosa dobbiamo implementare l’interfaccia INotifyPropertyChanged. Aggiungete alle direttive using della classe
using System.ComponentModel;
modificate la definizione della classe in questo modo
class Data : INotifyPropertyChanged
aggiungete un evento ed una funzione che lo invochi al cambiare del valore delle proprietà
public event PropertyChangedEventHandler PropertyChanged;
protected void NotifyPropertyChanged(String propertyName)
{
PropertyChangedEventHandler handler = PropertyChanged;
if (null != handler)
{
handler(this, new PropertyChangedEventArgs(propertyName));
}
}
L’ultima cosa che dobbiamo fare è andare a modificare l’implementazione della proprietà Etichetta implementando la chiamata alla funzione NotifyPropertyChanged
private string etichetta;
public string Etichetta
{
get
{
return etichetta;
}
set
{
if (value != etichetta)
{
etichetta = value;
NotifyPropertyChanged(“Etichetta”);
}
}
}
Quello che succede ora è che la proprietà pubblica Etichetta non è più implementata automaticamente, ma va esplicitamente a leggere/scrivere il valore del campo privato etichetta. Nel caso in cui il nuovo valore sia diverso dal precedente allora invoca l’evento NotifyPropertyChanged passandogli il parametro “Etichetta” che volendo potete intercettare per capire quale campo è cambiato.
Il fatto che il meccanismo del data binding capisca l’interfaccia INotifyPropertyChanged vi permette di cambiare la UI auomaticamente al cambio dei valori del vostro modello. Premendo il pulsante avete la vostra etichetta cambia la proprietà Text.
Quindi il binding non solo assegna dei valori presi dal modello ai vostri controlli nella UI, ma li lega al modello ed aggiorna la UI ogni volta che il modello cambia. Una volta stabilito questo legame, potete quindi dimenticarvi della UI e pensare solo alla logica del vostro codice.

NOTA: il parametro passato alla funzione NotifyPropertyChanged deve essere il nome della proprietà pubblica, altrimenti il  trucco non funziona.

Trovate il codice completo di questo episodio qui http://1drv.ms/1i4gQ6d

Nel prossimo episodio parleremo di collection di oggetti e scopriremo gli ulteriori vantaggi del binding.

Annunci