Definire lo Style ed il Control Template per un "Button" in Silverlight 3

Come dimostrato nello scorso articolo per lo “Slider”, vediamo insieme la personalizzazione di un altro semplice controllo il “button”. Uno degli elementi fondamentali che caratterizzerà le nostre applicazioni.
Per semplificare ulteriormente la cosa, il buttone creato è veramente elementare e scarno. A mio avviso è importante capirne la logica e come in tutte le cose, una volta capite le basi, le cose più complesse vengono da se.


 Anche in questo caso, presupponiamo di avere come base alcuni semplici elementi grafici che caratterizzeranno il nostro bottone, il tutto contenuti all’interno di una “Grid”.

In questo caso, questi elementi grafici rappresenteranno lo stato “Normal” del nostro button, attualmente sono semplici elementi grafici ed anche in questo caso, per prima cosa bisognerà convertirli in controllo “button”. Attiviamo e selezioniamo la “Grid” contenitore, tasto destro del mouse, “Make into control…”  e trasformiamo in “Button”. Una soluzione alternativa poteva essere quella di partire dal Button standard disponibile all’interno dell’Asset Library di Blend 3 e da li editarlo come “Edit a copy…” del bottone di base.
Facendo questa operazione andremo a definire lo “Styles” che conterrà a sua volta il “ControlTemplate” con gli elementi grafici del button al suo interno e i vari “states” che potranno essere gestiti all’interno del “Visual State Manager”. Evidenziato nell’immagine qui sotto, il codice XAML che definisce il “ControlTemplate” all’interno dello Style del “Button”.

Come potete notare dal ObjectTree, il “TextBlock” non è più contenuto nel “ControlTemplate”, ma è stato sotituito da un nuovo elemento “ContentPresenter”, in cui se andate a vedere le sue proprietà a come “Content=OK” ed eredita le stesse proprietà del TextBlock.

A questo punto, per replicare gli “States” che sono stati definiti e trovate raffigurati nella prima immagine, accedete al “Visual State Manager” posizionatevi sul Rectangle e modificate il colore di background con un grigio più chiaro interagendo dal pannello proprietà.
Per replicare lo stesso colore di sfondo [background], anche allo States di “Pressed”, Blend 3 introduce una nuova funzionalità che vi permette di copiare rapidamente le proprietà da uno stato all’altro.
Banalmente, con MouseOver ancora attivo, tasto destro del mouse e selezionate “Copy State To > Pressed”. Il comando è applicabile anche dal menù “Tools”.


 
A questo punto spostiamoci sullo States Pressed per spostare leggermente il testo, selezioniamo l’elemento “ContentPresenter” e modifichiamo la proprietà “RenderTransform.Translate.X and .Y a “1”.
Procediamo con lo stato “Disabled”, selezioniamo il rettangolo e togliamoli lo sfonfo “Fill” rendendolo trasparente e modifichiamo le proprietà dello Stroke a grigio chiaro.

Per rendere il più reale possibile gli effetti di transizione da uno stato all’altro, vi ricordo che è possibile gestire le transizioni dal VisualStateManager, banalmente posizioniamoci su “Normal”, clicchiamo sul button per aggiungere e definire una nuova “Transition” e selezioniamo “Normal > MouseOver”.

Impostiamo la duration a “0,2s”. In questo modo abbiamo applicato un effetto di transizione, attualmente tutti gli altri passaggi da uno stato all’altro avvengono istantaneamente ma come potete intuire allo stesso modo avrei potuto definire le diverse transizioni.

Se notate in particolare la grafica del “button” sulla prima immagine, si è ipotizzato di far apparire una cornice azzurra quando il bottone si trova nello stato “Focused”. Il rettangolo non è attualmente presente begli elementi grafici di base contenuti nel nostro “button” nello “states” Normal. Bisognerà quindi procedere e crearlo al suo interno. Creare un nuovo oggetto all’interno di uno stato viene definito “drawing into state’” ciò sta a significare che l’oggetto sarà visibile solo nello stato in cui è definito. Questa funzionalità può essere molto utile anche per altri controlli.
Selezioniamo quindi “Focused”, inseriamo un nuovo rettangolo (leggermente più piccolo) facendo doppio click sullo strumento rettangolo. A questo punto vogliamo modificare le dimensioni ed il riempimento del nuovo rettangolo ma in questo caso vogliamo effettuarle sullo “States Base”. Non possiamo attivare lo stato “Base” in quanto sullo stato “base” il rettangolo non è presente, a questo punto disattiviamo quindi la registrazione premendo o da tastiera [CTRL + R] o interagendo sull’icona riquadrata in rosso nell’immagine seguente. Modifichiamo quindi le proprietà di “Fill”, “Margin” e “Stroke” e applichiamo i margini arrotondati.

Se volete creare il button leggermente più dinamico, potete inserire un’animazione “steady-state animation” nello stato “Focused”. Selezionate lo stato “Focused”, e cliccate sull’icona per attivare e gestire un’animazione all’interno dello stato (riquadro rosso).
 

A lato del Object Tree, vi apparirà per esteso la maschera di gestione delle “timeline” ed in questo modo potrete definire la vostra animazione con eventuali effetti di “easing in” e “easing out” da applicare ai “keyframe” che costituiscono l’animazione.