Il data binding è un modo utile di visualizzare i dati. Questo tutorial ti insegnerà le basi per implementarlo passo-passo. Se hai già familiarità con il data binding puoi anche saltare questo tutorial.
Cosa è il data binding
Il data binding mette a disposizione una via semplice e consistente alle applicazioni per interagire e mostrare i dati. Gli elementi possono essere associati ai dati da una varietà di data source sotto forma di oggetti Common language runtime (CLR) e XML. I ContentControls come Button e gli ItemsControls come ListBox e ListView hanno funzionalità integrate per consentire uno stile flessibile sia di ogni singolo dato sia di collezioni di dati. Inoltre, possono essere applicati ordinamento, filtri e gruppi di viste.
Per cominciare
Per spiegare le basi del data binding, creeremo un'applicazione base per Windows Phone 7. Questa applicazione contiene quattro textbox, che avranno il compito di mostrare i tre modi col quale il data binding può essere utilizzato:
- OneTime
- OneWay
- TwoWay
Cosa significano?
Il binding OneTime spedisce i dati dall'origine alla destinazione; però lo fa solamente quando l'applicazione viene avviata o quando il DataContext cambia, e di conseguenza non c'è modo di ricevere notifiche sulla modifica dell'origine.
Quando si usa il binding di tipo OneWay, il flusso di dati viaggia dall'origine alla destinazione ogni qualvolta che viene apportata una modifica all'origine dati. Il binding OneWay è il metodo di associazione predefinito nella proprietà Text delle TextBox e perciò non ha necessità di essere specificato.
TwoWay binding sends the source data to the target, and if there are changes in the target property's value, those will be sent back to the source.
Il binding TwoWay spedisce l'origine dati alla destinazione; se ci sono cambiamenti nel valore della proprietà di destinazione, questi verranno inviati di nuovo all'origine.
Creiamo l'applicazione. Per questa demo userò Expression Blend, poiché ha strumenti specifici di supporto su XAML e data binding, e naturalmente, è un ottimo editor sia per i progettisti che per gli sviluppatori.
Date il nome che preferite al progetto. Dopo che Blend avrà finito la creazione del progetto, vedremo una schermata simile a questa
Per mostrare la funzionalità dei tre data binding, inseriremo quattro textbox all'interno della finestra. La prima textbox rappresenterà la sorgente, la seconda presenterà il binding di tipo OneTime, la terza mostrerà il binding di default, OneWay, e l'ultima il binding TwoWay. Dopo l'inserimento, l'applicazione dovrebbe risultare così:
Ora viene la parte divertente! Cliccate sulla seconda textbox, partendo dall'alto. Dovreste vedere la Finestra Proprietà (se non doveste vederla, cliccate su Finestra e selezionate Opzioni). Nella finestra Proprietà andate nelle Propietà comuni, in cui troverete la proprietà Text. Alla sua destra potete vedere un piccolo punto bianco. Cliccatelo, e nel menu contestuale scegliete Data Binding...
Dovreste vedere il menu di creazione del Data Binding.
Scegliete il tab Proprietà Elemento. In Elementi della scena scegliere la textbox superiore e a Proprietà selezionare Text. Dopo averlo fatto, selezionate, in basso, il metodo di associazione OneTime.
Fare lo stesso con la terza textbox (selezionando il binding OneWay) e la quarta (selezionando il binding TwoWay). Non dimenticate di specificare la prima textbox come sorgente dell'elemento. Se siete pronti, riavviate il progetto. Dovrebbe essere apparsa una finestra simile a questa:
Ora testeremo il nostro data binding. Cambiate il testo nella prima textbox. Dovreste vedere che la terza e la quarta casella di testo reagiscono immediatamente ai cambiamenti. Ma cosa avviene nella seconda? Come detto prima, la modalità di associazione OneTime funzionerà soltando la prima votbox (selezionando il binding OneWay) e la quarta (selezionando il binding TwoWay). Non dimenticate di specificare la prima textbox come sorgente dell'elemento. Se siete pronti, riavviatlta, cioè quando l'applicazione si avvia e si imposta il DataContext. Dopodichè il binding viene eliminato, e le modifiche non hanno affetto su di essa.
Diamo un'occhiata al binding OneWay. Come avete visto, la terza textbox reagisce ai cambiamenti della prima textbox. Funziona anche in altre direzioni? Provate a controllare! Noterete che la prima textbox manterrà il suo valore.
L'ultima modalità di binding è quella TwoWay. Avete già visto che la quarta textbox reagisce ai cambiamenti della prima textbox immediatamente., ma dovrebbe cambiare anche nell'altra direzione. Provate a fare qualche cambiamento nell'ultima textbox... Cosa? Il testo della prima textbox non reagisce immediatamente ai cambiamenti, dite? Questo esempio mostra quando il data binding sia stato progettato in modo intelligente. In questo caso la proprietà Text della prima textbox si imposta solamente quando la quarta textbox perderà il focus. Dov'è la trovata intelligente, dite? Immaginiate che non lo fosse. In questo caso, si creerebbe una sorta di loop infinito dove le due textbox si aggiornerebbero a vicenda!
E con questo abbiamo finito! Come vedete, non è stato difficile. Non ci vuole molto per diventare esperti nell'uso del data binding.
Download
Potete scaricare il progetto di esempio dal sito MSDN Samples.
Altre lingue
Questo articolo è disponibile anche in altre lingue: