MVVM e Windows Phone – Two way binding (4° parte)

Print Content | More

Proseguiamo il tutorial su MVVM e Windows Phone parlando di un aspetto molto importante: il two way binding, ovvero il meccanismo con cui siamo in grado di ricevere l’input dell’utente.

Two way binding

Il two way binding in realtà non è una prerogativa di MVVM, ma è una caratteristica del binding di Silverlight: quando effettuiamo un binding tra un controllo e un oggetto, come impostazione di default, viene application il one way binding, ovvero ogni qualvolta lo stato dell’oggetto cambia il controllo viene aggiornato per riflettere il cambiamento. Non vale però il contrario: se il controllo dovesse modificare in qualsiasi momento lo stato dell’oggetto, il codice non se ne accorgerebbe. Il two way binding serve proprio a questo: il canale di comunicazione diventa bidirezionale e l’oggetto è in grado di cambiare il suo stato in seguito ad un intervento del controllo.

Il two way binding è fondamentale nel pattern MVVM perchè è il modo in cui possiamo ricevere l’input di un utente: se, ad esempio, abbiamo un controllo TextBox e vogliamo, nel view model, recuperare il testo inserito dall’utente dobbiamo creare una proprietà di tipo string e metterla in two way binding con la proprietà Text del controllo. Dopodichè, nel ViewModel, possiamo utilizzare il valore di questa proprietà per effettuare le successive elaborazioni.

Ma vediamo un esempio concreto applicato al nostro RSS reader: vogliamo intercettare la selezione di una delle notizie dalla ListBox e mostrare a video il titolo dell’elemento selezionato.

La prima cosa da fare è, nel nostro ViewModel, andare a definire una proprietà che sarà messa in binding con la proprietà SelectedItem della ListBox e che conterrà il riferimento all’oggetto selezionato.

private FeedItem _selectedItem;

public FeedItem SelectedItem
{
    get { return _selectedItem; }
    set
    {
        if (_selectedItem != value)
        {
            _selectedItem = value;
            RaisePropertyChanged(() => SelectedItem);
        }
    }
}

Ora possiamo metterla in binding con la proprietà SelectedItem del controllo ListBox usando il two way binding nel seguente modo:
<ListBox ItemsSource="{Binding Path=FeedItems}" SelectedItem="{Binding Path=SelectedItem, Mode=TwoWay}">
    <ListBox.ItemTemplate>
        <DataTemplate>
            <StackPanel>
                <TextBlock Text="{Binding Path=Title}" />
            </StackPanel>
        </DataTemplate>
    </ListBox.ItemTemplate>
</ListBox>

Come vedete è molto semplice attivare il two way binding: è sufficiente specificare Mode=TwoWay all’interno dell’espressione di binding e il gioco è fatto. Ora, ogni qualvolta la proprietà SelectedItem cambierà (perchè l’utente ha selezionato un nuovo elemento all’interno della lista) anche il valore della relativa proprietà nel ViewModel cambierà. Possiamo perciò andare ad intercettare il get della proprietà per raggiungere il nostro scopo, ovvero mostrare a video il titolo dell’elemento selezionato. La nostra proprietà nel ViewModel diventa perciò:

private FeedItem _selectedItem;

public FeedItem SelectedItem
{
    get { return _selectedItem; }
    set
    {
        if (_selectedItem != value)
        {
            _selectedItem = value;
            MessageBox.Show(_selectedItem.Title);
            RaisePropertyChanged(() => SelectedItem);
        }
    }
}

Prima di scatenare l’evento RaisePropertyChanged mostriamo a video il titolo usando una semplice MessageBox. In un’applicazione reale (e riprenderemo questo concetto in uno dei prossimi post) molto probabilmente, in questa situazione, avremmo scatenato l’evento di navigazione verso la pagina di dettaglio.

Nella prossima puntata

Se siete alle prime armi e state sviluppando un’applicazione con il pattern MVVM una delle domande che prima o poi vi dovrete porre sarà: “Come gestisco le interazioni dell’utente con l’applicazione?”  (ad esempio, la pressione di un pulsante). La risposta nel prossimo post! Nel frattempo, potete scaricare e giocare con il progetto di esempio aggiornato.


Windows Phone , MVVM

0 comments

Related Post


(will not be published)
(es: http://www.mysite.com)