Un tocco di stile alle applicazioni Silverlight: style e template

Animazioni e VisualStateManager

Ogni controllo gestisce il proprio stato visuale attraverso il VisualStateManager. Per stato visuale si intende l'aspetto che il controllo presenta in relazione ad alcuni stati logici, ad evempio lo stato logico IsMouseOver, che indica se il mouse si trova attualmente sul controllo, corrisponde allo stato visuale (VisualState) MouseOver.

I diversi stati visuali sono divisi in gruppi chiamati VisualStateGroup, caratteristica che li rende mutualmente esclusivi: non è possibile cioè passare dallo stato MouseOver che si trova nel gruppo CommonStates allo stato Focused che si trova nel gruppo FocusStates.

Questa distinzione è d'importanza fondamentale, poiché è possibile aggiungere transizioni tra stati appartenenti allo stesso gruppo.

La prima animazione che andremo ad aggiungere è per lo stato MouseOver, selezioniamo il rettangolo chiamato "Blink" e dal pannello "States" selezioniamo lo stato MouseOver. A questo punto l'area di lavoro cambierà ed sarà decorata da un bordo rosso, che ci indica che ogni modifica che apporteremo sarà registrata e trasformata in un'animazione.

Dal pannello Transform impostiamo la scala y a 1 in modo che il rettangolo vada a ricoprire tutta l'area.

Se compiliamo adesso il nostro progetto, potremo notare che spostando il mouse sul bottone questo si "illumini" leggermente.

Il passaggio dallo stato Normal a MouseOver è immediato, in alcuni casi questo è l'effetto desiderato, mentre in altri potremmo preferire che il cambiamento di stato sia graduale e meno brusco.

Per far questo possiamo aggiungere delle transizioni (VisualTransition), per cui torniamo quindi sul menu States e facciamo click sulla freccia a lato dello stato normal, selezioniamo da Normal a MouseOver ed impostiamo la durata.

Conclusioni

Nel nostro semplice esempio abbiamo aggiunto altre animazioni per lo stato MouseOver, abbiamo nascosto l'oggetto Glossiness e Light, il tutto sempre con le semplici modalità che abbiamo visto.

Style e Template ci permettono di ridefinire completamente l'aspetto di un controllo pur non alterando nella sostanza la sua natura: un bottone sarà sempre un bottone, una ComboBox sarà una ComboBox.

Questo concede al grafico un'ampia e totale libertà d'azione, alla portata di pochi e semplici click in Epression Blend.

Sullo stesso argomento

Commenti

Per inserire un commento, devi avere un account.

Fai il login e torna a questa pagina, oppure registrati alla nostra community.

Segnala su: