Metro Style Apps: override dei brush utilizzati nei controlli

Nel precedente post abbiamo visto come sia possibile modificare i colori di background del controllo ToggleSwitch eseguendo, di fatto, l’override dei brush definiti intrinsecamente nello stesso controllo.

La tecnica dell’override delle risorse predefinite può essere utilizzata anche per altri controlli e, in questo post, cercheremo di capire come recuperare i nomi di tali risorse in modo da avere completo controllo sull’aspetto grafico.

Prendiamo ad esempio il controllo XAML HyperLinkButton. Questo controllo visualizza un link ad un URL ed ha 4 differenti colori: il colore normale, il colore assunto quando il mouse è posizionato al di sopra, il colore quando si preme il pulsante sinistro del mouse (o l’utente “tappa” con il dito) e il colore quando è disabilitato.

Il colore normale è modificabile tramite la proprietà Foreground:

1. <HyperlinkButton Content="HyperlinkButton" HorizontalAlignment="Left"
2.                  VerticalAlignment="Top" Margin="50" BorderThickness="2"
3.                  BorderBrush="White" Foreground="Red" />

Gli altri tre colori (in realtà sono Brush) non sono accessibili da proprietà del controllo e, al momento, dobbiamo ricorrere all’override delle risorse.

Un modo pratico e funzionale per capire quali sono le risorse utilizzate all’interno del controllo per la stilizzazione dello stesso è ricorrere a Blend.

Semplicemente apriamo la pagina (o l’intero progetto) in cui utilizziamo l’HyperlinkButton tramite Blend:

e, creiamo una copia del template:

Possiamo inserire la copia del template dove vogliamo (tanto, poi rimuoveremo il template stesso), ad esempio all’interno della pagina stessa:

Una volta generato la copia del template otteniamo:

Se analizziamo la gestione dei VisualState del controllo, possiamo trovare i tre VisualState che ci interessano:

1. <VisualState x:Name="PointerOver">
2.     <Storyboard>
3.         <ObjectAnimationUsingKeyFrames Storyboard.TargetProperty="Foreground" Storyboard.TargetName="ContentPresenter">
4.             <DiscreteObjectKeyFrame KeyTime="0" Value="{StaticResource HyperlinkPointerOverForegroundThemeBrush}"/>
5.         </ObjectAnimationUsingKeyFrames>
6.     </Storyboard>
7. </VisualState>
8. <VisualState x:Name="Pressed">
9.     <Storyboard>
10.         <ObjectAnimationUsingKeyFrames Storyboard.TargetProperty="Foreground" Storyboard.TargetName="ContentPresenter">
11.             <DiscreteObjectKeyFrame KeyTime="0" Value="{StaticResource HyperlinkPressedForegroundThemeBrush}"/>
12.         </ObjectAnimationUsingKeyFrames>
13.     </Storyboard>
14. </VisualState>
15. <VisualState x:Name="Disabled">
16.     <Storyboard>
17.         <ObjectAnimationUsingKeyFrames Storyboard.TargetProperty="Foreground" Storyboard.TargetName="ContentPresenter">
18.             <DiscreteObjectKeyFrame KeyTime="0" Value="{StaticResource HyperlinkDisabledThemeBrush}"/>
19.         </ObjectAnimationUsingKeyFrames>
20.     </Storyboard>
21. </VisualState>

In questi VisualState sono riportati i nomi delle risorse Brush utilizzate dal controllo, ed in particolare:

• HyperlinkPointerOverForegroundThemeBrush : la risorsa brush utilizzata quando il mouse è posizionato sopra il link;
• HyperlinkPressedForegroundThemeBrush : la risorsa brush utilizzata quando l’utente clicca con il mouse sul link;
• HyperlinkDisabledThemeBrush : la risorsa brush utilizzata per il link disabilitato.

In realtà, se andiamo a cercare il tag Setter relativo al Foreground, troviamo anche la risorsa HyperlinkForegroundThemeBrush utilizzata per il foreground.

In questo modo se vogliamo cambiare tutti i brush utilizzati dai nostri HyperLinkButton possiamo ridefinire:

1. <SolidColorBrush x:Key="HyperlinkForegroundThemeBrush" Color="Blue" />
2. <SolidColorBrush x:Key="HyperlinkPointerOverForegroundThemeBrush" Color="Red" />
3. <SolidColorBrush x:Key="HyperlinkPressedForegroundThemeBrush" Color="Green" />
4. <SolidColorBrush x:Key="HyperlinkDisabledThemeBrush" Color="Yellow" />

e posizionare queste definizioni all’interno delle risorse dell’applicazione (o nell’App.xaml o, meglio in uno dei file xaml che contengono i nostri stili personalizzati).

Con le precedenti risorse otteniamo:

Ovviamente, la copia del template dell’HyperlinkButton che ci è servita solamente per recuperare i nomi delle risorse può essere tranquillamente rimossa (a meno che non la si voglia personalizzare ulteriormente dal punto di vista grafico).

La tecnica utilizzata può essere, ovviamente, utilizzata anche per altri controlli di cui vogliamo personalizzare l’aspetto grafico (tipicamente i colori) senza ridefinire il template.

 

Tag di Technorati: template,xaml,resources,brush,controls,styles,mouseover,mouseclick,metro style apps,windows8