Come personalizzare un controllo in Silverlight 3 attraverso gli "styles" ed i "control template"

Come ho già più volte avuto modo di sottolineare, a mio avviso, una delle potenzialità di XAML sia in WPF sia per applicazioni Silverlight è la possibilità di andare a creare degli elementi/controlli dell'interfaccia grafica personalizzandone il comportamento e l'interazione attraverso gli "stili e i template". Molto simili ai CSS disponibili nell'HTML, ma per certi versi molto più potenti, permettono di definire l'aspetto grafico e il comportamento dei controlli che caratterizzano l'interfaccia dell'applicazione. Come nei CSS, una volta definito gli stili che possono essere interni allo XAML dell'interfaccia o gestiti esternamente attraverso uno XAML esterno - "resource dictionaries" (funzionalità già disponibile in WPF e recentemente introdotto nella nuova versione di Silverlight) è possibile applicare gli stili ai controlli dell'interfaccia. Banalizzando molto la cosa, a tutti i "button" dell'applicazione è possibile associare lo stesso stile in modo che l'applicazione abbia un aspetto grafico omogeneo, gestendo il tutto con dei "resource dictionaries" esterni, è possibile cambiare l'aspetto e l'interazione dell'applicazione facendo caricare dei "resource dictionaries" diversi.

Per definire e modificare gli stili, il modo più semplice ed immediato è quello di utilizzare Expression Blend che permette in modo rapido ed efficace di creare, modificare e gestire gli stili direttamente in "design mode". Le modalità di operare possono essere sostanzialmente due:

- partire da un controllo di base disponibile nell'Asset Library di Blend (button, check box, slider, etc,) duplicare il "Control Template" banalmente facendo tasto destro del mouse sopra il controllo sull'area di lavoro "Edit a Copy" ed operando in questo modo è possibile definire un nuovo stile che è possibile poi riassociare a tutti i controlli della stessa tipologia all'interno della pagina. Chiaramente all'interno dello stile è possibile poi definire la grafica e il comportamento (attraverso l'uso degli "State" nel "Visual State Manager");

- una volta creati gli elementi grafici che caratterizzeranno il controllo, trasformare il tutto in "controllo" attraverso il comando "Make Into Control..." ed in questo caso definire la tipologia del controllo attraverso lo stile. Per attivare il comando "Make Into Control..." è possibile procedere o facendo direttamente ancora una volta tasto destro e selezionando dal menù a tendina o dal menu "Tools". (Questa nuova funzionalità è disponibilie all'interno della nuova versione di Expression Blend 3 che anche sotto questo punto di vista introduce una serie di novità molto interessanti).

Come ho già detto, il concetto di stili e template sono una dei concetti base di XAML sia in WPF sia in Silverlight e sono già disponibili dalle versioni precedenti; con la nuova versione di Expression Blend 3 è migliorata notevolmente la gestione e definizione degli stili e dei template dal punto di vista grafico rendendo la cosa molto più semplice ed intuitiva.

Vediamo quindi insieme come è possibile definire uno stile per un semplice controllo quale potrebbe essere uno "Slider" partendo dagli elementi grafici in un'applicazione Silverlight 3.
Lo step zero della nostra demo, è quello di importare tutti gli elementi che caratterizzeranno il nostro controllo all'interno del progetto Silverlight in Blend. La grafica degli elementi è stata definita e disegnata in precedenza attraverso Illustrator. Sfruttando quindi una delle nuove funzionalità di Blend 3 è possibile importare e convertire tutti gli elementi grafici in XAML all'interno di Blend. Un paio di consigli, trattandosi di uno "Slider", concettualmente il controllo dovrebbe essere strutturato in due parti: un elemento "Thumb" con cui l'utente potrà interagire e un elemento "Track" su cui il "Thumb" dovrà scorrere. Chiaramente i due elementi potranno essere composti a loro volta da più elementi grafici ma il consiglio che vi do è quello di raggruppare e strutturare i "sottoinsieme" grafici di ogni elemento il un controllo di layout contenitore che potrebbere essere banalmente una "Grid" e un "Canvas". Il secondo accorgimento è quello poi di raggruppare i due elementi in un altro contenitore esterno che contenga entrambi i due elementi "Thumb e Track", in questo caso specifico per lo "Slider" bisogna utilizzare un'altra "Grid" che come vedremo andra poi strutturata e suddivisa in righe e colonne. Premetto nel nostro esempio andremo a realizzare uno "Slider" ad orientamento "Horizontal" e che quindi andrà utilizzato in posizione orizzontale. Vi riporto nell'immagine qui sotto un esempio molto semplice di grafica, mentre a questo link trovate un esempio leggermente più complesso, che sarete poi in grado di downlodare, in cui per simulare il comportamento dello Slider è stato applicata una funzione di "Data Binding" con un effetto "Blur" a sua volta applicato ad un'immagine presente all'interno dell'interfaccia. 

Next step, procediamo a convertire la "Grid" contenitore in "controllo", come vi ho già anticipato attraverso il comando "Make Into Control...>Slider" ed in questo modo andremo a definire lo Stile. Per l'esempio possiamo tranquillamente definirlo nel "documento" e non come "resource dictionaries" - vedi opzioni in basso sulla maschera di definizione dello stile.

Procediamo quindi e suddividiamo la "Grid" in 3 Colonne come raffigurato nell'immagine qui sotto, idealmente la suddivisione dovrebbe essere in coincidenza con l'elemento "Thumb". Un'altra cosa da fare attenzione, in questo istante ci troviamo all'interno del "Control Template" del controllo che è definito all'interno dello "Stile". Nel "object tree" dell'applicazione dovreste avere indicato il nome dello stile che avete appena definito.

Se avete operato in modo corretto, l'elemento "Track" dovrebbe trovarsi in comune sulle 3 colonne e nelle proprietà avere quindi un "ColumnSpan=3", mentre il Thumb  dovrebbe essere posizionato nella "Column=1": A questo punto, sempre all'interno dello stile bisogna procedere e convertire la Grid che contiene i due elementi "Track e Thumb" in "HorizontalTemplate". Operiamo in questo modo, sul VieeTree, attivate e selezionate la "Grid", fate tasto destro del mouse sopra la "Grid" e selezionate semplicemente "Make Into Part of Slider > HorizontalTemplate".

A questo punto selezionate "Thumb" e con lo stesso criterio di sopra applicate "Make Into Part of Slider > HorizontalThumb", in questo modo state definendo lo stile ed il control template da applicare all'elemento "Thumb", temporaneamente usciamo da questo stile interagendo con il comando "Scope up" sul Object Tree dell'applicazione e facciamo il "reset" dei margini dal pannello proprietà.

Selezioniamo quindi "HorizontalTemplate" nel object tree, dal pannello "Parts", novità di Blend 3 se non vi appare di default potete attivarlo interagendo all'interno del menù Windows, fate doppio click su "HorizontalTrackLargeChangeDecreaseRepeatButton" ed impostate l'opacity a "0" sul pannello delle proprietà. Riselezionate "HorizontalTemplate" e fate la stessa operazione anche per "HorizontalTrackLargeChangeIncreaseRepeatButton" impostando l'opacity a "0". Abbiamo praticamente concluso, modifichiamo a questo punto le dimensioni delle 3 colonne della Grid di "HorizontalTemplate" in "Auto, Auto e Star".

Lanciamo quindi la Build dell'applicazione, facendo "F5" da tastiera ed il tutto verrà caricato all'interno della finestra browser di "test". Dietro le quinte Blend 3, compila anche il progetto creando il file "XAP" che conterrà le DLL e lo XAML del progetto e la pagina HTML che vi permette di testare l'applicazione.

Nell'esempio completo che trovate disponibile a questo link, è stato inserito anche un "data binding" sull'effetto "blur" applicato all'immagine impiegata nell'esempio. Se siete interessati, nel prossimo post, descriverò come applicare questa funzionalità di "data binding" attraverso Blend 3.