Una delle caratteristiche più interessanti dell'architettura di Silverlight è sicuramente la possibilità di separare in distinte porzioni la logica funzionale dell'applicazione dalle informazioni di tipo visuale della stessa. Il principio del frazionamento va oltre la modalità  markup~codebehind, condivisa peraltro anche da ASP.NET, in quanto è la struttura stessa dei controls del plugin ad essere sviluppata sul modello di Style e Template proprio per consentire intimamente sia un alto livello di separazione che di personalizzazione.

Oltre a tali concetti, introdotti nell'articolo precedente, in Silverlight sono disponibili ulteriori strumenti per estendere detto principio anche nei confronti dei veri e propri dati utilizzati nell'applicazione. Tali strumenti sono i DataTemplatee l'architettura di DataBinding.

Per cercare di evidenziare le modalità d'uso di tali strumenti sarà realizzato il seguente semplice menu in modo da analizzare i dettagli di un esempio concreto che ogni progetto o sito web contiene:

Il progetto

La creazione del menu richiede sia la scrittura di alcune porzioni di codice che la cura grafica dei particolari e dell'impatto grafico complessivo che si vuole ottenere, per tali attività saranno utilizzati in sinergia Visual Studio 2008 ed Expression Blend 2.

L'inizio del progetto consiste nel creare in Visual Studio una nuova Silverlight Application, per semplicità il menu sarà costruito all'interno dell'UserControl predefinito Page.xaml e Page.xaml.cs, già incluso nel template del progetto.

Obiettivo di questo esempio è realizzare un menu con un stile grafico e funzionale simile alla Taskbar di Windows Vista; analizzando le informazioni che vengono visualizzate in tale menu è possibile vedere che sono renderizzate all'utente principalmente due informazioni: il nome del programma aperto e l'icona corrispondente.

Per gestire queste informazioni procediamo alla scrittura del modello di accesso ai dati iniziando dalla mini-classe chiamata MenuItem con tre proprietà:

public class MenuItem
{
   public int Num { get; set; }
   public string Name { get; set; }
   public string BackGroundImage { get; set; }
}

Num indica l'indice dell'elemento, Name il nome da visualizzare e BackGroundImage il path dell'immagine che rappresenta l'icona; tale classe al momento non implementa alcuna logica ma verrà utilizzata solo come elemento di trasporto delle informazioni delle singole voci.

Successivamente predisponiamo una classe MenuItemCollection in modo che contenga la collezione dei MenuItem che vogliamo visualizzare; la classe eredita dalla generic collection ObservableCollection<MenuItem>, questa speciale collezione è molto utile nei contesti di DataBinding in quanto alla variazione del contenuto della collezione l'engine di DataBinding viene notificato automaticamente provocando l'aggiornamento in tempo reale degli oggetti in binding:

public class MenuItemCollection : ObservableCollection<MenuItem>
{
   public static MenuItemCollection Elements;
   static MenuItemCollection()
   {
      Elements = new MenuItemCollection()
      {
         new MenuItem(){
              Num=1
            , Name="Windows XP"
            , BackGroundImage="Images/WinXP.png"
         }
         , new MenuItem(){
              Num=2
            , Name="Windows Vista"
            , BackGroundImage="Images/WinVista.png"
         }
         , new MenuItem(){
              Num=3
            , Name=".NET"
            , BackGroundImage="Images/dotnet.png"
         }
         , new MenuItem(){
              Num=4
            , Name="XBOX 360"
            , BackGroundImage="Images/XBOX360.png"
         }
      };
   }
}

Nell'esempio la classe viene autopopolata dei dati del menu direttamente nel costruttore statico della classe stessa, tali dati vengono esposti attraverso la proprietà Elements di tipo MenuItemCollection. Utilizzando una classe statica garantiremo che la collezione di MenuItem sarà la stessa per tutta l'applicazione e sarà condivisa da tutti i controlli che andranno ad utilizzarla.

Per completare il modello di rappresentazione dei dati prepariamo la classeMenuModel con una singola proprietà MenuItems in sola lettura in modo che esponga la collezione appena definita:

public class MenuModel
{
   private MenuItemCollection menuItems = MenuItemCollection.Elements;
   public MenuModel() { }
   public MenuItemCollection MenuItems
   {
      get { return menuItems; }
   }
}

Nell'ottica di una organizzazione degli oggetti del programma, tale classe è responsabile dell'accesso alla base dati ed alla distribuzione degli stessi agli altri strati dell'applicazione. Per semplicità dell'esempio tali dati sono generati direttamente nel codice ma in linea di principio è in questo ambito che è corretto implementare la logica di accesso e gestione dei dati.