Binding for Dummies (ep. 1)

Il binding è quel processo che permette di legare le proprietà degli elementi della UI alle proprietà delle classi definite nel vostro codice. Una volta imparato ad usare il binding, non ne potrete più fare a meno. Partiamo con un semplice esempio.
Creando un nuovo progetto troverete nella vostra solution un file MainPage.xaml che rappresenta l’interfaccia grafica (UI) della vostra pagina principale, a cui è legato un secondo file MainPage.xaml.cs, detto file di code-behind, che contiene la logica di programmazione della stessa pagina.
Creiamo una semplice TextBlock. All’interno dello XAML della pagina scriverete dunque:
<TextBlock />
Per assegnare il valore della TextBlock potete modificare lo XAML così:
<TextBlock Text=”Hello World” />
Oppure, per modificare questo valore da codice (dalla pagina di code-behind), avete prima bisogno di assegnare un nome al controllo TextBlock nello XAML
<TextBlock x:Name=”Etichetta” />
e a questo punto potete assegnare il valore della proprietà Text all’elemento Etichetta in modo analogo a quanto avete fatto prima direttamente nello XAML
Etichetta.Text = “Hello World”;
In questo modo potete modificare qualsiasi proprietà dei vostri controlli da codice, e quindi cambiarne il valore a seguito di un evento (la pressione di un bottone, ecc.).

Lo svantaggio di questo approccio è che dovrete identificare tutti i vostri controlli nel codice, che non sarà più indipendente dall’interfaccia. Cambiando l’interfaccia avrete dunque bisogno di modificare anche il vostro codice, rendendo di fatto l’applicazione più difficilmente manutenibile.

E’ qui che entra in azione il binding. Il binding vi permette di legare alcune proprietà dell’interfaccia grafica al vostro modello ad oggetti, rendendo il codice perfettamente indipendente dalla UI.

Torniamo al nostro Hello World. Definiamo una classe Data all’interno della nostra applicazione.  Andate su Esplora Soluzioni, cliccate col tasto destro sul progetto e scegliete la voce Aggiungi->Classe. Chiamate il file Data.cs e Visual Studio creerà per voi una classe Data all’interno del file.
class Data
{
}
A questo punto definite una proprietà pubblica di tipo stringa e chiamatela Etichetta all’interno della classe in questo modo:
public string Etichetta { get; set; }
ATTENZIONE: E’ necessario definire le proprietà tramite le funzioni di accesso get e set, altrimenti il binding non funziona (sia implementate in maniera automatica come ho fatto io, sia con la definizione della proprietà privata e delle funzioni get e set).

Terminata la definizione del modello ad oggetti della nostra applicazione, dobbiamo instanziare un oggetto della nostra classe per associarne i valori delle proprietà alla UI.
//Data Binding
//Creazione dell’oggetto data
Data data = new Data();
//Assegnazione della proprietà etichetta
data.Etichetta = “Hello Binding”;

Il primo passo del Binding consiste nell’assegnare un valore alla proprietà DataContext di un oggetto (in questo caso l’oggetto LayoutRoot è la griglia che contiene tutti i controlli della pagina)
//Binding di data all’oggetto LayoutRoot
LayoutRoot.DataContext = data;

NOTA: Tutti gli oggetti della UI contenuti nella grid LayoutRoot faranno riferimento per il binding a questo oggetto se non diversamente specificato.

Il passo finale per assegnare la proprietà alla nostra TextBlock è quello di assegnare dallo XAML alla proprietà Text il valore dell’etichetta tramite il Binding.
<TextBlock  Text=”{Binding Etichetta}”/>

Abbiamo dunque spostato tutta la logica nel modello ad oggetti e tolto ogni riferimento alla UI dal codice. Il legame tra il codice e l’interfaccia grafica è tutto definito nello XAML, e se rendete più complesso il vostro modello ad oggetti (aggiungendo un campo nome e cognome ad esempio) potete aggiungere altri elementi di UI che abbiano delle proprietà in binding con il vostro modello.

Anche se da questo semplice esempio potrebbe risultare più complicato procedere in questo modo, vedremo presto come, aumentando la complessità del modello ad oggetti , la nostra app sarà molto più semplice da gestire. Vedremo nelle prossime puntate come far si che modificando il valore dei campi della nostra classe questi cambiamenti possano essere  automaticamente trasportati nella UI senza scrivere nessun codice aggiuntivo, come usare il binding con collezioni di oggetti e come usare i convertitori per modificare qualsiasi aspetto dell’interfaccia in base al valore del nostro modello.

Trovate tutto il codice di questo esempio a questo link http://1drv.ms/1i2BWBP

Binding for Dummies (ep.2)

Annunci

3 pensieri su “Binding for Dummies (ep. 1)

Rispondi

Inserisci i tuoi dati qui sotto o clicca su un'icona per effettuare l'accesso:

Logo WordPress.com

Stai commentando usando il tuo account WordPress.com. Chiudi sessione / Modifica )

Foto Twitter

Stai commentando usando il tuo account Twitter. Chiudi sessione / Modifica )

Foto di Facebook

Stai commentando usando il tuo account Facebook. Chiudi sessione / Modifica )

Google+ photo

Stai commentando usando il tuo account Google+. Chiudi sessione / Modifica )

Connessione a %s...