Prima di entrare nel vivo con la seconda parte del post dedicato alla visualizzazione della fonte dati di esempio, vi invito a guardare con attenzione gli screen che caratterizzano il nostro prototipo. La HomePage è collegata ad uno screen di dettaglio “Scheda Film” a cui sono collegati altri tre component screen: in programma, piùvisti e coming. In questo caso ho scelto di gestire il caricamento del component screen corrispondente a seconda dell’interazione che l’utente avrà sui contenuti presenti nella homa page attraverso l'impiego dei VisualState. Selezionando un film nel ControlTab, verrà caricata la scheda di dettaglio ed il component screen corrispondente, il tutto attraverso l’impiego di alcuni behavior che permettono di gestire le “conditional navigation” all’interno dei prototipi. Come potete inoltre notare dall’immagine qui sotto, all’interno del component screen – “inprogramma.xaml” risulta inserito un aggiuntivo elemento component screen – quickbuy. Una delle particolarità dei component screen è proprio di poter essere riutilizzata e condivisa in più pagine del prototipo, mantenendo inalterate le funzionalità/interattività che sono state definite all’interno del component.



Ma torniamo per un attimo al concetto base di behavior, in un’applicazione reale Silverlight o WPF e comunque anche nei prototipi, i behavior permettono di gestire l’interazione senza dover scrivere del codice. I behavior possono essere facilmente condivisi su più progetti, in modo da ereditarne il comportamento e le funzionalità e possono essere confezionati ad “hoc” su esigenze specifiche di progetto. Nel nostro prototipo di esempio, se notate all’interno della maschera “Project” sono presenti una serie di file “.cs” in cui sono definite alcune funzionalità specifiche e correlate ad alcuni behavior custom che permettono di gestire le funzionalità di conditional navigation.
Nello specifico i 3 behavior custom impiegati nel prototipo sono:
- MapGlobalStateToState
- SetGlobalStateAsVisualState
- SaveGlobalStateAction
Per poter riutilizzare questi behavior in altri prototipi, è sufficiente importare il codice “.cs” corrispondente dei behavior con la modalità “Add existing Item”, ricompilare il progetto e Blend provvederà a caricare i behavior all’interno dell’Asset Library pronti per essere agganciati ai controlli che costituiscono il progetto.
Per i più tecnici, vi ricordo che in parallelo all’installazione di Blend 3 sul vostro PC, viene installato di default anche un SDK – Expression Blend SDK User Guide – in cui sono raccolte le principali indicazioni per creare e definire behavior personalizzati. Un altro canale preferenziale per downlodare e condividere i behavior e molte risorse utili alla progettazione è la sezione Gallery all’interno della Community Expression.



Vediamo ora come sono stati applicati i nuovi behavior all’interno del progetto.
In HomePage, alla Grid “LayoutRoot” principale è stato associato il behavior “SetGlobalStateAsVisualState”, se notate nel pannello properties, il behavior non fa altro che associare al loaded della pagina il GlobalStateTag – “Default”. Vi ricordo che per agganciare il behavior, è sufficiente un semplice “drag & drop” del behavior dall’asset library al controllo “LayoutRoot” nel pannello Object and Timeline.



Se andiamo quindi ora a visionare il TabControl in cui l’utente interagendo dovrà scegliere il film a cui accedere alla scheda di dettaglio, vedete che sono associati altri 2 behavior.
Il primo “NavigateToScreenAction”, che è il classico behavior che permette di gestire l’interazione tra due screen diversi mentre il “SaveGlobalStateAction” che in questo caso attiva come GlobalState “inprogramma” come GlobalStoreTag – “Default”. Ed in questo caso ad un azione specifica dell’utente associa una semplice variazione di stato.



Se a questo punto andiamo a vedere i behavior che sono stati associati alla pagina “SchedaFilm”, noterete che alla LayoutRoot, risultano associati 3 identici behavior, che non fanno altro che associare al GlobalState di “default” il VisualState corrispondente.



Vi faccio inoltre notare che nel pannello “States” di questo screen sono stati definiti 3 VisualState che corrispondono all’attivazione dei 3 component screen corrispondenti.



Il tutto, si può tradurre in questo senso, a seguito dell’interazione dell’utente il GlobalState – default viene modificato associando un altro valore, in questo caso nella pagina di dettaglio viene visualizzato e attivato il VisualState corrispondente.

Se volete riutilizzare i seguenti behavior in altri progetti, potete downlodare i file .cs dei behavior a questo link.