javascript hit counter
Expression Blend 2.5 June 2008 Preview: definizione dei “Control Template” e utilizzo del “Visual State Manager” - Design, Technologies and User eXperience - Site Home - MSDN Blogs

Design, Technologies and User eXperience

by Roberto Cavallini :: User eXperience Evangelist - Microsoft Italia :: [follow me on twitter: @robertodesign - mail:roberto.cavalliniatmicrosoft.com]

Expression Blend 2.5 June 2008 Preview: definizione dei “Control Template” e utilizzo del “Visual State Manager”

Expression Blend 2.5 June 2008 Preview: definizione dei “Control Template” e utilizzo del “Visual State Manager”

Rate This
  • Comments 4

Molte le novità introdotte con la nuova versione di Silverlight 2 (SL2), attualmente in Beta 2, sia in ambito tecnologico con una serie di funzionalità e controlli in più ed il supporto lato “code behind” di .NET language (C#,VB.NET e DLR Language), sia in ambito “design e progettazione” dell’interfaccia grafica dell’applicazione.

In primis, il supporto di una nuova serie di controlli di layout (Grid, StackPanel, Border e ScrollViewer) utili a migliorare e facilitare la progettazione, la disposizione degli elementi grafici e la gestione dei  “Control Template” e del “Visual State Manager” (VSM) per la personalizzazione del “look&feel” dei controlli (Button, Slider, CheckBox, ListBox, RadioButton, etc) previsti dall’applicazione.

Occupandomi di “user experince”cercherò di dare alcune indicazioni dal punto di vista del design di un’applicazione attraverso Expression Design 2 e Blend 2.5.

La nuova versione di Expression Blend 2.5 June 2008, attualmente in preview, supporta lo sviluppo di progetti in SL2 e integra al suo interno una serie di nuove funzionalità che facilitano notevolmente il design di un’applicazione e la definizione attraverso il VSM dei comportamenti d’interazione legati ai controlli impiegati nell’applicazione. Cercando di essere il più efficace possibile, vediamo un breve esempio che ci aiuterà a capire l’utilizzo dei Control Template e del VSM in Expression Blend.
Slider Control Template Partiamo dal presupposto di voler modificare e personalizzare l’aspetto grafico di uno dei “controlli base” disponibili con SL2 uno “slider”; inserito nella pagina il controllo e facendo attenzione di mantenerlo selezionato nel pannello “Object and Timeline” di Blend è possibile, posizionandosi sul controllo e facendo tasto destro del mouse, modificare il template e quindi lo stile ad esso correlato (vedi figura 1). Come in Windows Presentation Foundation (WPF) anche in SL2 l’utilizzo dello “Style Resource” permette di definire a livello di oggetto le proprietà associate e al suo interno e contiene anche il template di visualizzazione degli elementi grafici che caratterizzano il controllo.
Come potete vedere (vedi figura 2), procedendo a modificarlo sottoforma di copia dal controllo di base fornito in SL2, vi verrà richiesto di definire un nuovo stile (Style Resource)  a livello di applicazione, a livello del documento e prossimamente sarà possibile definirlo come in WPF sottoforma di “Resource Dictionary” utilizzabile e condividibile su più progetti.Definizione stile Inserito il nome nell’apposito campo, Blend vi farà accedere ad una finestra di dettaglio di visualizzazione del “Control Template” dove risultano elencati gli elementi che caratterizzano graficamente il controllo (vedi figura 3)
Control Template Slider.
In questo caso specifico per uno “slider” sono contenuti 3 oggetti: HorizontalTemplate, VerticalTemplate e FocusVisual. I primi due per la gestione dello slider in posizione orizzontale e verticale, mentre il “FocusVisual”, che come potete notare dal pannello delle “Properties>Appearence” all’interno del template risulta impostato ad opacità uguale a zero, serve per definire l’area sensibile associabile al controllo. Quest’area sensibile, deve essere definita non all’interno del template, ma chiaramente a livello di pagina e viene ereditata dal “FocusVisual” presente all’interno del template “slider”. A scopo dimostrativo proviamo a modificare l’aspetto grafico del controllo slider orizzontale, intervenendo sugli elementi grafici contenuti nella grid dell’HorizontalTemplate (vedi figura 3). Nell’esempio specifico si sono modificate le dimensioni e il colore di riempimento dell’oggetto “Rectangle” e lo user control “HorizontalThumb” inserendo alcuni elementi grafici di contorno.
Control Template

 

 

 

 

 

 

 

 

 

 

 

 

 

 


Visual State Manager

Operando in questo modo, abbiamo quindi creato uno stile personalizzato “StileSlider1” per il nostro controllo “slider” che potrà essere velocemente applicato a tutti gli elementi slider presenti nell’applicazione (vedi figura 4). Resta comunque intuitivo che a livello di applicazione è possibile creare e gestire liberamente “n” stili diversi associabili a controlli dello stesso tipo, nel nostro esempio uno slider, presenti nell’applicazione (vedi figura 5).

 

Nel la seconda parte di questo articolo andremo invece a descrivere brevemente l’utilizzo della funzionalità “Visual State Manager” per la personalizzare attraverso gli stili disponibili in SL2 sia dell’aspetto grafico sia dei comportamenti dell’interazione di un controllo e i vari stati ad esso correlati. Nello specifico l’esempio sarà basato sull’ipotetica creazione di un “bottone” da utilizzare in un player personalizzato in SL2.

Partendo dal presupposto che la grafica del bottone sia stata realizzata in precedenza attraverso Expression Design 2, il tool specifico per realizzare e progettare l’interfaccia grafica, il quale permette di esportare in modalità nativa lo XAML (eXstensible Application Markup Language); per poi importarlo in Blend e sviluppare l’interazione e le animazioni. Semplicemente attraverso un semplice comando di “copia/incolla” degli elementi grafici, o attraverso la funzionalità di “slicing” sugli elementi che costituiscono l’interfaccia e che permette nello specifico di definire il formato di esportazione su ogni singolo elemento che costituisce l’interfaccia. Mi spiego meglio, presupponiamo ad esempio di aver utilizzato anche alcune immagini JPEG nella nostra interfaccia, in questo caso in fase di esportazione dovrò definire quale zone esportare come elementi grafici vettoriali rappresentati in XAML e quali come immagini (JPEG, PNG trasparenti – formati supportati in SL). In fase di esportazione dello XAML da Design 2 è anche possibile definire il tipo di XAML ottimizzandolo per tipo di prodotto, se per un’applicazione Silverlight o per un’applicazione Windows Presentation Foundation (vedi figura 6).


Export to XAML

Nel nostro caso, facendo semplicemente “copia/incolla” è possibile importare il layout grafico del bottone direttamente in Blend, il tutto risulta importato e gestito in modalità vettoriale e quindi anche in Blend è possibile apportare ulteriori modifiche grafiche (resize, colori, etc). A questo punto procediamo inserendo nell’applicazione un controllo base presente in Silverlight, l’oggetto “Button” a cui andremo associare un nuovo stile personalizzato che conterrà la grafica e una serie di animazioni specifiche. Come per lo slider, selezioniamo il bottone base, facendo tasto destro andiamo a creare un nuovo template e quindi uno stile per il nostro bottone “custom”; anche in questo caso inserito il nome si attiverà la finestra di dettaglio del template che definisce il bottone (vedi figura 7).


Button Template

Una volta nel template eliminiamo tutta la grafica presente associata al bottone standard lasciando solo all’interno l’elemento di layout “Grid” su cui andremo ad incollare la nostra grafica del bottone appena importata. Torniamo quindi sulla pagina principale dell’applicazione, facciamo “copia” della grid che raccoglie gli elementi del nostro bottone personalizzato “LayoutBottone” e andiamo ad incollarla nel template dello stile che abbiamo appena definito “BottonePlay”. Per entrare nello stile del nuovo bottone appena creato, tasto destro sul bottone e selezionare “Edit Template”, o selezionando dal menù sopra l’area di lavoro principale. A questo punto dovremo avere nel nostro progetto la presenza di due layout grafici identici. Procediamo a definire l’interazione e le animazioni ad esso correlate utilizzando il Visual State Manager. Come potete vedere nel pannello sono riassunti tutti gli stati associabili in questo caso al controllo “Bottone”: MouseOver, Pressed, Disabled, Normal, etc. selezionando ogni singolo stato è possibile definire e registrare le azioni che devono essere correlate all’interazione dell’utente sul bottone. Proviamo ad esempio selezionare “MouseOver”, nello staging principale, l’area dedicata al layout grafico, vi comparirà una cornice rossa che vi indica che tutte le modifiche/azioni applicate agli elementi grafici che costituisco il bottone verranno registrate e quindi riprodotte in fase di esecuzione dell’applicazione associate allo stato definito dal VSM. Banalmente proviamo a modificare il colore di sfondo, portandolo a “rosso” e modifichiamo le dimensioni con un fattore di scala pari a 1,2 (vedi figura 8).

Visual State Manager

Premendo quindi “F5” da tastiera per lanciare il progetto sul server web di staging potrete visualizzare il bottone con associato il comportamento appena definito sulla funzionalità di “MouseOver”. Le funzionalità e i comportamenti gestibili attraverso il VSM sono molteplici dalle singole proprietà associate agli elementi grafici, alle animazioni fino alla gestione della durata delle singole trasformazioni tra un passaggio di stato e l’altro. Tutte queste proprietà e il template vengono gestite all’interno dello stile che abbiamo appena definito e come nell’esempio precedente posso essere replicate su altri bottoni presenti che caratterizzano l'interfaccia grafica semplicemente associando lo stile appena definito. Lato code behind, al click sui vari bottoni che costituiscono l’interfaccia, anche se con associato lo stesso stile, potranno essere agganciate animazioni/storyboard diverse.

Page 1 of 1 (4 items)