Personalizzare una ScrollBar attraverso gli "styles" in Silverlight

Continuiamo con la carrellata sulla personalizzazione dei controlli in Silverlight 3 attraverso l’impiego degli “Styles” e dei “ControlTemplate”.

ScrollBar:
Anche in questo caso, partiamo da alcuni semplici elementi di grafica creati in precedenza attraverso Illustrator ed importati in Blend 3. L’asset grafico importato definisce lo stile “Normal” della ScroolBar, mentre nell’immagine qui sotto ho voluto riportare come ho ipotizzato il comportamento della ScrollBar nei vari stati d’impiego.

In pratica, come negli esempi illustrati in precedenza, il primo step è quello di convertire gli asset grafici in “controllo”. Anche in questo caso, l’abbiamo ormai visto più volte, selezioniamo il contenitore Grid “verticalscrollbar” e trasformiamo il tutto in controllo definendo lo “Styles” ed il “ControlTemplate” facendo semplicemente “Tools > Make Into Control > ScrollBar”.
Vi ricordo che nella maschera “Make into Control” è fondamentale che definite la tipologia di controllo che volete creare nel nostro esempio “ScrollBar”. Per facilitare questa operazione vi consiglio di utilizzare l’utile motore di ricerca che vi permette di filtrare direttamente sulla tipologia di controllo.

A questo punto vi troverete nella root del ControlTemplate che avete appena creato, nel pannello Object Tree, dove anche in questo caso la grid principale avrà il nome “verticalscrollbar”. Sempre all’interno del template, selezioniamo la grid principale “verticalscrollbar” e dal menù “tool” selezioniamo “Make Into Part of ScrollBar > VerticalRoot”. “verticalscrollbar” verrà quindi rinominata in “VerticalRoot”.

Suddividiamo la grid nelle 5 righe necessarie per la definizione della ScrollBar. Nel nostro esempio specifico stiamo parlando di “5 righe” in quanto si tratta di una ScrollBar Vertical, se si trattasse di Horizontal, in questo caso si trattava di suddividere in 5 colonne. Vediamo illustrato il dettaglio nella figura qui sotto.


Se avete suddiviso correttamente la Grid, gli elementi grafici vi dovranno risultare in questo modo: “Track” in RowSpan “5”, “smalldecrease” in Row ”0”, thumb in Row “2”, e smallincrease in Row “4”.
La VerticalSmallDecrease non è ancora nel template, ma abbiamo l’asset grafico per questa parte che è l’oggetto “smalldecrease”. Bisognerà quindi trasformare questo oggetto attraverso il comando “Make Into Part” in Make Into Part. Selezioniamo quindi “smalldecrease” e dal menu tool trasformiamo “Tools > Make Into Part of ScrollBar > VerticalSmallDecrease > OK”.

Nel nostro esempio non abbiamo bisogno del “ContentPresenter” quindi possiamo cancellarlo. Selezioniamo “smalldecrease” e impostiamo la width e la height a “7” nel pannello delle proprietà.
Modifichiamo le dimensioni della grid a “7” ed il colore di sfondo “background” trasparente.
Interagendo con il comando “Scope up”, torniamo nel template principale “ScrollBarStyle1”, selezioniamo “VerticalSmallDecrease” e resettiamo Width, Height e Margin.
A questo punto dobbiamo definire gli “States” per il comportamento di “MouseOver” e “Pressed”, entriamo quindi nel template “RepeatButtonStyle1” e all’asset “smalldecrease”, modifichiamo il colore di riempimento Fill nei vari “states” rispettivamente come segue: “MouseOver” “Fill=#FFCCCCCC” e “Pressed” – smalldecrease “Fill= FFE5E5E5”. Per rendere i cambi di stati ancora più piacevoli è possibile definire una transitino “0,2” tra i vari “states” appena definiti. Del tipo “Normal -> MouseOver” 0,2 sec.

Ritorniamo quindi interagendo sul bottone “Scope up” nel template principale e ripetiamo le stesse operazioni anche per il bottone “smallincrease”.Selezioniamo quindi “thumb” sull’”Object Tree” nel control template principale e trasformiamo in VerticalThum come segue, “Tools > Make Into Part of ScrollBar > VerticalThumb > Ok”.
A questo punto bisognerà associare una MinHeight, ritorniamo quindi sul control template principale, selezioniamo “VerticalThumb”, applichiamo dei margin Left:5, Right:5, Top:0, Bottom:0; resettiamo la Height e associamo un MinHeight to 7.

Definiamo quindi gli “states” ed il comportamento attraverso il Visual States Manager, entriamo nel template di Thumb e associamo gli states di “MouseOver”, “Pressed” e la Transition in “0,2 sec”.
In conclusione, torniamo sulla Root principale del ControlTemplate “ScrollBarStyle1”, attiviamo il pannello “Parts” di Blend, e con selezionato la grid VerticalRoot nel ObjectTree, inseriamo “VerticalLargeDecrease”, nelle proprietà impostate Row=”1” e Opacity=”0”. Stessa operazione anche per il “VerticalLargeIncrease” con la differenza che impostate Row=”3”.

Abbiamo praticamente concluso l’esempio, l’unica cosa che ci rimane da fare prima di lanciare il build dell’applicazione e testare il tutto e quella di impostare le dimensioni delle nostre righe in questo modo: Auto, Auto, Auto, Star e Auto.

A questo link, trovate disponibile al download il codice sorgente del progetto in Blend 3.