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

VB.NET : Aggregare stringhe con LINQ

Tip facile facile, ma a qualcuno potrebbe servire. Supponiamo di avere una lista di stringhe (magari come risultato di una query LINQ) e di voler ottenere una stringa con la concatenazione delle stesse: Dim list = CreateList() Dim concatStr = (From s In list _ Select s).Aggregate( Function (currentString, nextString) currentString + nextString) MessageBox.Show(concatStr) Il metodo CreateList non ci interessa, in questo momento, ma crea una lista di oggetti String. Protected Function CreateList() As IEnumerable( Of String ) Dim list As String () = {" stringa1 ", " stringa2 ", " stringa3 ", " stringa4 ", " stringa5 "} Return list.AsEnumerable() End Function Questo metodo potrebbe restituire una qualsiasi lista di oggetti di cui, nella select successiva recuperiamo solo stringhe. La stessa tecnica è utilizzabile per concatenare stringhe inserendovi un carattere separatore Dim list = CreateList() Dim

VB.NET: SplashScreen con effetto fade-in

In questo post vorrei proporvi un modo per realizzare una splash screen per le nostre applicazioni Windows Form che appare progressivamente con un effetto fade. Supponiamo di avere il nostro progetto VB.NET in una soluzione Visual Studio 2008 in cui abbiamo il sorgente della nostra applicazione Windows Form. Inseriamo una splash screen utilizzando il menù Progetto->Aggiungi Nuovo Elemento e selezionando il tipo di elemento “Schermata Iniziale” A questo punto Visual Studio creerà, automaticamente, la schermata iniziale che possiamo personalizzare graficamente come vogliamo. Per poter fare in modo che questa finestra appaia nel momento in cui avviamo l’applicazione, è necessario aprire le proprietà del progetto e impostare la maschera di avvio: In questo modo, all’avvio dell’applicazione, la schermata appare immediatamente e scompare un attimo prima della visualizzazione della finestra dell’applicazione. Possiamo far apparire la schermata iniziale con un ef

VB.NET: Convertire un file DOC in RTF e PDF con office interop

In questo post vorrei proporvi del codice per poter convertire un file .doc in un file .rtf oppure .pdf utilizzando le API di interoperabilità di Office. Creeremo una classe, DocConverter, che esporrà le due funzionalità sopra citate. Cominciamo con il prevedere un attributo privato della classe che rappresenterà l’applicazione Word che utilizzeremo per la conversione. Creeremo l’istanza dell’attributo privato all’interno del costruttore della classe: Public Sub New () If Not CreateWordApp() Then Throw New ApplicationException(" Assembly di interoperabilità con Office non trovato! ") End If End Sub Private _wordApp As Word.ApplicationClass Protected Function CreateWordApp() As Boolean Dim retval = True Try _wordApp = New Word.ApplicationClass() _wordApp.Visible = False Catch ex As System.Exception _wordApp = Nothing retval = False End Try Return retval End Function La conve