Utilizzando le proprietà esposte dai controlli, piuttosto che gli oggetti Style, siamo in grado di modificare solo le caratteristiche visuali di un elemento, ma non l'aspetto completo. Tranne la funzionalità di ControlTemplate possiamo modificare completamente l'aspetto di un controllo (ObjectTree) senza cambiare la sua funzionalità.
Per esempio un controllo Button espone proprietà come FontFamily, Background o Foreground, che possiamo modificare, ma la struttura del controllo rimarrà sempre la solita. Diversamente utilizzando la funzionalità di Control Template possiamo creare un bottone rotondo, oppure dargli aspetti più strani come una stella, il tutto mantenendo sempre la sua funzionalità, ovvero la possibilità di essere cliccato.
Per cambiare il ControlTemplate di un controllo basta modificare l'omonima proprietà. Possiamo definire il Control Template direttamente sul singolo controllo piuttosto che racchiuderlo in uno Style, quindi applicabile su più controlli.
Il ControlTemplate utilizza un modello suddiviso in due parti chiamato Parts and States Model, tramite il quale definiamo gli elementi che compongono l'aspetto del controllo (Parts) ed il comportamento che devono avere nelle diverse fasi (States) del controllo. Procediamo con un esempio, nel seguente frammento di codice dichiariamo un semplice Button.
<Button Content="Click Me!" Height="100" Width="150" FontSize="20" />
Successivamente modifichiamo le parti che costituiscono il Control Template utilizzando un ellisse dal bordo rosso riempito con un gradiente lineare.
<Button Content="Click Me!" Height="100" Width="150" FontSize="20">
<Button.Template>
<ControlTemplate>
<Grid>
<Ellipse x:Name="BackgroundEllipse"
StrokeThickness="3"
Height="{TemplateBinding Height}"
Width="{TemplateBinding Width}">
<Ellipse.Stroke>
<SolidColorBrush x:Name="BorderBrush" Color="Red" />
</Ellipse.Stroke>
<Ellipse.Fill>
<LinearGradientBrush StartPoint="0,0" EndPoint="1,1">
<GradientStop Color="#FF575757" />
<GradientStop Color="#FFCDCDCD" Offset="1" />
</LinearGradientBrush>
</Ellipse.Fill>
</Ellipse>
<ContentPresenter HorizontalAlignment="Center"
VerticalAlignment="Center" />
</Grid>
</ControlTemplate>
</Button.Template>
</Button>
Per quanto riguarda la definizione dell'ellisse non c'è niente di particolare, la proprietà Stroke è stata definita utilizzando la sintassi Property Element per poter applicare un nome al SolidColorBrush, che ci risulterà utile in seguito.
Prima di procedere con la dichiarazione degli stati, analizziamo due particolari importanti del codice precedente: TemplateBinding e ContentPresenter.
Il primo è un Markup Extension che permette di impostare una proprietà del Control Template con il valore di una proprietà esposta dal controllo, in questo caso Height e Width, in modo da "trasmettere" al Control Template i valori impostati nella dichiarazione del Button, rispettivamente 100 e 150.
ContentPresenter invece è utilizzato per indicare dove sarà renderizzato il contenuto della proprietà Content, dato che Button è un Content Control, se per esempio stessimo modificando il Control Template di una ListBox dovremmo utilizzare il controllo ItemsPresenter.
Eseguiamo l'applicazione per vedere il risultato. Cliccando sul Button l'evento Click viene correttamente scatenato ma il suo aspetto rimane sempre lo stesso, come se fosse un oggetto statico. Proprio per questo dobbiamo definire l'aspetto che il Button avrà nei vari stati esposti (es: Clicked) e, tramite le animazioni, il comportamento che avrà durante la fase di transizione fra uno stato e l'altro.
