Passa ai contenuti principali

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.

SNAGHTML2424bb50

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:

image

e, creiamo una copia del template:

image

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

image

Una volta generato la copia del template otteniamo:

image

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:

SNAGHTML24568bd9

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.

 

Commenti

Post popolari in questo blog

MVP Reconnect …… ovvero quando entri nella “famigghia” resti sempre nella “famigghia”!!!

Ma di che “famigghia” stiamo parlando!!!!

Fermi tutti, non si tratta di robe strane o sette segrete o affari malavitosi….stiamo parlando della grande famiglia dei Microsoft MVP.

Per chi non sapesse cosa sono i Microsoft MVP, vi consiglio di fare un giro sul sito ufficiale del programma (link), ma, volendolo spiegare in pochisime parole, si tratta di un riconoscimento che Microsoft da a persone che si distinguono per il loro impegno, aiutando gli altri ad ottenere il massimo grazie alle tecnologie Microsoft. Si tratta di persone, non dipendenti Microsoft, che mettono la loro passione, il loro tempo, la loro buona volontà per la divulgazione e la condivisione della conoscenza. Non necessariamente (come qualcuno erroneamente sostiene, evidentemente non conoscendo le basi del programma) si tratta di professionisti nel termine letterale del termine ma si tratta comunque di un gruppo di persone che sacrifica un pò del suo tempo (e, a volte, vi assicuro neanche pò!!!) per la sua passione.

Pe…

Nuova versione del Band SDK

E’ di ieri l’annuncio del rilascio della nuova versione dell’SDK per il Microsoft Band.
Si tratta della versione 1.3.10417 (la precedente e, prima della serie, era la 1.3.10219 preview).
Maggiori informazioni, download dell’SDK per le tre piattaforme Windows Phone, iOS e Android all’indirizzo http://developer.microsoftband.com/.
Allo stesso indirizzo potrete trovare anche la documentazione.
Nei mesi scorsi mi sono gia’ occupato della precedente versione e questi sono i post che ne parlano:
Microsoft Band SDK Preview - First LookMicrosoft Band SDK Preview - ”Hello Band”Microsoft Band SDK Preview - Accesso ai sensoriMicrosoft Band SDK Preview - TileMicrosoft Band SDK Preview - NotificheMicrosoft Band SDK Preview - Personalizzazione
Gli argomenti trattati e il codice proposto dovrebbe, ad una prima lettura delle nuove funzionalita’ inserite, essere ancora valido e funzionante ma nei prossimi giorni prendero’ in esame tutti gli argomenti dei precedenti post e vedremo cosa cambia e cosa e’ …

Template di progetto per sviluppare applicazioni WPF con Intel® RealSense™

E’ disponibile, nella gallery di Visual Studio, la prima versione del mio template di progetto per applicazioni WPF scritte in C# che permette di realizzare applicazioni con l’SDK di Intel® RealSense™.Il template si può scaricare direttamente all’interno Visual Studio utilizzando il tool “Extensions and Updates”oppure all’indirizzo https://visualstudiogallery.msdn.microsoft.com/1c36ecfd-8c00-4aee-b20c-a1726ab6424dIl template esegue le seguenti operazioni per voi:Aggiunge la reference all’assembly libpxcclr.cs.dll (nelle due distinte versioni per x86 e x64);Aggiunge lo script di post build per copiare la libreria libpxccpp2c.dll dalla cartella dell’SDK alla cartella bin del vostro progetto.Una volta creato il progetto dovete rimuovere la configurazione di compilazione AnyCPU (che non ha più senso) dalla vostra solution e sarete pronti per sviluppare con Intel® RealSense™.Ovviamente dovete installare l’SDK che potete scaricare all’indirizzo https://software.intel.com/en-us/intel-realsen…