Passa ai contenuti principali

Appunti di WPF – Undicesima Puntata – Gli Stili

Abbiamo visto, nel precedente tutorial, come creare ed utilizzare le risorse all’interno delle nostre applicazioni WPF. In questo tutorial cercheremo di capire come e perché utilizzare gli stili.

Gli stili, in WPF, hanno molte similitudini con i fogli di stile del mondo web. Come vedremo di seguito, supportano l’ereditarietà, possono essere sovrascritti dalle proprietà locali, possono essere specifici per un determinato tipo di controllo e così via.

Per cominciare a capire, immaginiamo la seguente interfaccia:

  1. <Window x:Class="MainWindow"
  2.     xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
  3.     xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
  4.     xmlns:s="clr-namespace:System;assembly=mscorlib"
  5.     Title="MainWindow" Height="350" Width="525">
  6.     <Window.Resources>
  7.         <FontFamily x:Key="StandardButtonFontFamily">Times New Roman</FontFamily>
  8.         <s:Double x:Key="StandardButtonFontSize">20</s:Double>
  9.         <LinearGradientBrush x:Key="StandardButtonBackground">
  10.             <GradientStopCollection>
  11.                 <GradientStop Offset="1" Color="blue"></GradientStop>
  12.                 <GradientStop Offset="0" Color="LightBlue"></GradientStop>
  13.             </GradientStopCollection>
  14.         </LinearGradientBrush>
  15.         <SolidColorBrush x:Key="StandardButtonForeground" Color="White" ></SolidColorBrush>
  16.     </Window.Resources>
  17.     <StackPanel>
  18.         <Button FontSize="{StaticResource ResourceKey=StandardButtonFontSize}"
  19.                 FontFamily="{StaticResource ResourceKey=StandardButtonFontFamily}"
  20.                 Background="{StaticResource ResourceKey=StandardButtonBackground}"
  21.                 Foreground="{StaticResource ResourceKey=StandardButtonForeground}">Tasto 1</Button>
  22.         <Button FontSize="{StaticResource ResourceKey=StandardButtonFontSize}"
  23.                 FontFamily="{StaticResource ResourceKey=StandardButtonFontFamily}"
  24.                 Background="{StaticResource ResourceKey=StandardButtonBackground}"
  25.                 Foreground="{StaticResource ResourceKey=StandardButtonForeground}">Tasto 2</Button>
  26.     </StackPanel>
  27. </Window>

WPF_11_Stili_Fig1

In sostanza abbiamo definito 4 risorse all’interno della collezione delle risorse della finestra che vengono utilizzate in entrambi i bottoni. Per utilizzare le risorse abbiamo la necessità di scrivere 4 differenti assegnazioni (utilizzando la sintassi di binding con la parola chiave StaticResource) per ogni bottone. In più, non c’è traccia, nel codice, del fatto che le 4 risorse sono, sostanzialmente, legate tra loro e che sarebbe opportuno collegarle in una qualche maniera.

E’ proprio per gestire queste problematiche che si possono utilizzare gli stili. La precedente finestra si può scrivere nel seguente modo:

  1. <Window x:Class="Window2"
  2.     xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
  3.     xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
  4.         xmlns:s="clr-namespace:System;assembly=mscorlib"
  5.     Title="Window2" Height="300" Width="300">
  6.     <Window.Resources>
  7.         <Style x:Key="StandardButton">
  8.             <Style.Setters>
  9.                 <Setter Property="Control.FontFamily" Value="Times New Roman"></Setter>
  10.                 <Setter Property="Control.FontSize" Value="20"></Setter>
  11.                 <Setter Property="Control.Background">
  12.                     <Setter.Value>
  13.                         <LinearGradientBrush>
  14.                             <GradientStopCollection>
  15.                                 <GradientStop Offset="1" Color="blue"></GradientStop>
  16.                                 <GradientStop Offset="0" Color="LightBlue"></GradientStop>
  17.                             </GradientStopCollection>
  18.                         </LinearGradientBrush>
  19.                     </Setter.Value>
  20.                 </Setter>
  21.                 <Setter Property="Control.Foreground">
  22.                     <Setter.Value>
  23.                         <SolidColorBrush Color="White" ></SolidColorBrush>
  24.                     </Setter.Value>
  25.                 </Setter>
  26.                 <EventSetter Event="ButtonBase.Click" Handler="ClickEvent"></EventSetter>
  27.             </Style.Setters>
  28.         </Style>
  29.     </Window.Resources>
  30.     <StackPanel>
  31.         <Button Style="{StaticResource ResourceKey=StandardButton}">Tasto 1</Button>
  32.         <Button Style="{StaticResource ResourceKey=StandardButton}">Tasto 2</Button>
  33.         <ToggleButton Style="{StaticResource ResourceKey=StandardButton}" Content="ToggleButton" />
  34.     </StackPanel>
  35. </Window>

Definiamo un oggetto Style all’interno delle risorse della finestra e lo utilizziamo nei nostri bottoni. In questo modo abbiamo una sorta di classe di stile che raggruppa le impostazioni comuni.

Osserviamo che la proprietà Property dell’oggetto Style è composta da due parti in modo da identificare esattamente una proprietà. Nel caso precedente impostiamo la proprietà Control.Background. Se avessimo impostato, ad esempio, la proprietà TextBlock.Background questa sarebbe stata scartata da WPF (quando lo stile viene associato al bottone) in quanto la proprietà TextBlock.BackGround ha lo stesso nome della proprietà Background della classe Control ma non sono la stessa.

La classe Style prevede 5 proprietà:

· Setters : è una collezione di oggetti Setter o EventSetter che consentono di impostare le proprietà del controllo o agganciare degli eventi;

· Triggers : è una collezione di oggetti derivati dalla classe TriggerBase che permettono allo sviluppatore di modificare le proprietà a seguito del cambio di altre proprietà;

· Resources : è una collezione di risorse che possono essere utilizzate all’interno degli stili;

· BasedOn : permette di creare stili che derivano da altri stili (una sorta di ereditarietà);

· TargetType : permette di creare stili che possono essere utilizzati solo per determinati controlli.

E’ possibile definire lo stile direttamente all’interno di un controllo, ad esempio nel seguente modo:

  1. <Button Content="Tasto3">
  2.     <Button.Style>
  3.         <Style>
  4.             <Setter Property="Control.Background" Value="Red"></Setter>
  5.         </Style>
  6.     </Button.Style>
  7. </Button>

Definire lo stile in questo modo, ovviamente, non ci permette di riutilizzare lo stile in altri controlli.

Tra i setter che possiamo utilizzare troviamo gli EventSetter che ci consentono di definire, a livello di stile, i gestori di evento del controllo. Ad esempio, in uno stile, potremmo avere:

  1. <EventSetter Event="ButtonBase.Click" Handler="ClickEvent">
  2.     
  3. </EventSetter>

Questo comporta che quando applichiamo lo style ad un’oggetto derivato da ButtonBase (Button, ToggleButton, etc., etc.) agganciamo il gestore ClickEvent (che, ovviamente, deve essere definito) all’evento Click.

Altra tipologia di oggetti che costituiscono uno stile, è quella dei trigger. Questi ci consentono di automatizzare un cambio dello stile di un controllo quando cambiano alcune proprietà del controllo stesso.

I trigger derivano dalla classe base TriggerBase e possono essere del seguente tipo:

· Trigger: è il tipo più semplice di trigger ed è in grado di reagire al cambio di una dependency property di un controllo ed usare dei setter per impostare delle proprietà;

· MultiTrigger: si tratta di un Trigger in cui la condizione è composta dalla variazione di più proprietà;

· DataTrigger: il trigger lavora utilizzando il data binding. E’ in grado di reagire al cambio dei dati in un controllo;

· MultiDataTrigger: come il DataTrigger ma con una condizione multipla;

· EventTrigger: permette di applicare una animazione quendo avviene un determinato evento.

I trigger possono anche essere applicati direttamente ad un controllo (grazie alla proprietà Triggers della classe FrameworkElement) anche se, in questo caso, possono essere utilizzati solo gli EventTrigger.

Un esempio di stile che utilizza i trigger è il seguente in cui definiamo lo stile standard di un bottone che cambia colore di sfondo nel momento in cui il controllo ha il focus:

  1. <Style x:Key="StandardButton">
  2.     <Style.Setters>
  3.         <Setter Property="Control.FontFamily" Value="Times New Roman"></Setter>
  4.         <Setter Property="Control.FontSize" Value="20"></Setter>
  5.         <Setter Property="Control.Background">
  6.             <Setter.Value>
  7.                 <LinearGradientBrush>
  8.                     <GradientStopCollection>
  9.                         <GradientStop Offset="1" Color="blue"></GradientStop>
  10.                         <GradientStop Offset="0" Color="LightBlue"></GradientStop>
  11.                     </GradientStopCollection>
  12.                 </LinearGradientBrush>
  13.             </Setter.Value>
  14.         </Setter>
  15.         <Setter Property="Control.Foreground">
  16.             <Setter.Value>
  17.                 <SolidColorBrush Color="White" ></SolidColorBrush>
  18.             </Setter.Value>
  19.         </Setter>
  20.     </Style.Setters>
  21.     <Style.Triggers>
  22.         <Trigger Property="Button.IsFocused" Value="True">
  23.             <Setter Property="Control.Background">
  24.                 <Setter.Value>
  25.                     <LinearGradientBrush>
  26.                         <GradientStopCollection>
  27.                             <GradientStop Offset="1" Color="Orange"></GradientStop>
  28.                             <GradientStop Offset="0" Color="LightYellow" ></GradientStop>
  29.                         </GradientStopCollection>
  30.                     </LinearGradientBrush>
  31.                 </Setter.Value>
  32.             </Setter>
  33.         </Trigger>
  34.     </Style.Triggers>
  35. </Style>

Definendo questo trigger otteniamo la seguente interfaccia:

WPF_11_Stili_Fig2

Un tipo di trigger molto interessante è l’EventTrigger che ci permette di eseguire animazioni nel momento in cui si verifica un particolare evento (ad esempio, l’ingresso del mouse in un controllo).

Il seguente XAML definisce una finestra in cui il font del bottone cambia al passare del mouse:

  1. <Window x:Class="EventTriggers"
  2.     xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
  3.     xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
  4.     Title="EventTriggers" Height="300" Width="300">
  5.     <Window.Resources>
  6.         <Style x:Key="StandardButton">
  7.             <Style.Setters>
  8.                 <Setter Property="Control.FontFamily" Value="Times New Roman"></Setter>
  9.                 <Setter Property="Control.FontSize" Value="20"></Setter>
  10.                 <Setter Property="Control.Background" Value="LightGray" />
  11.                 <Setter Property="Control.Foreground">
  12.                     <Setter.Value>
  13.                         <SolidColorBrush Color="Black" ></SolidColorBrush>
  14.                     </Setter.Value>
  15.                 </Setter>
  16.             </Style.Setters>
  17.             <Style.Triggers>
  18.                 <EventTrigger RoutedEvent="Mouse.MouseEnter">
  19.                     <EventTrigger.Actions>
  20.                         <BeginStoryboard>
  21.                             <Storyboard>
  22.                                 <DoubleAnimation Duration="0:0:0.2"
  23.                                                  Storyboard.TargetProperty="FontSize"
  24.                                                  To="28" />
  25.                             </Storyboard>
  26.                         </BeginStoryboard>
  27.                     </EventTrigger.Actions>
  28.                 </EventTrigger>
  29.                 <EventTrigger RoutedEvent="Mouse.MouseLeave">
  30.                     <EventTrigger.Actions>
  31.                         <BeginStoryboard>
  32.                             <Storyboard>
  33.                                 <DoubleAnimation Duration="0:0:0.4"
  34.                                                  Storyboard.TargetProperty="FontSize"
  35.                                                  To="20" />
  36.                             </Storyboard>
  37.                         </BeginStoryboard>
  38.                     </EventTrigger.Actions>
  39.                 </EventTrigger>
  40.             </Style.Triggers>
  41.         </Style>
  42.     </Window.Resources>
  43.     <StackPanel>
  44.         <Button Style="{StaticResource ResourceKey=StandardButton}" Margin="10">Tasto 1</Button>
  45.     </StackPanel>
  46. </Window>

In un prossimo tutorial analizzeremo in dettaglio le animazioni, per ora ci basti pensare che l’animazione viene eseguita nel momento in cui si verifica l’evento MouseEnter del Button.


Scarica la versione PDF dell'articolo. Scarica la versione Amazon Kindle dell'articolo.

Commenti

Post popolari in questo blog

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:PublicSubNew()
IfNot CreateWordApp() Then
ThrowNew ApplicationException("Assembly di interoperabilità con Office non trovato!")
EndIf
EndSub
Private _wordApp As Word.ApplicationClass
ProtectedFunction CreateWordApp() AsBoolean
Dim retval = True
Try
_wordApp = New Word.ApplicationClass()
_wordApp.Visible = False
Catch ex As System.Exception
_wordApp = Nothing
retval = False
EndTry
Return retval
EndFunction

La conversione del file doc sarà effettuata aprendo il file stesso ed eseguendo un’operazione di SaveAs:

Pr…

Cambiare la lingua di Visual Studio 2008

Oggi ho avuto qualche problema installando Windows Mobile 6 Professional SDK Refresh e Windows Mobile 6 Standard SDK Refresh.Scaricati i file di installazione e installati, ho provato a creare un progetto di tipo Windows Mobile 6.0 e mi sono beccato questo errore:Dopo qualche smanettamento abbiamo scoperto (e ringrazio il mitico Matteo per l’aiuto) che il mio Visual Studio 2008, pur essendo in Inglese (prova ne era il fatto che gli hotfix e la SP installata erano nella lingua di Albione) aveva come lingua impostata quella del sistema operativo (italiano).Ovviamente, non avrebbe mai potuto trovare la cartella 1040 (italiano) visto che l’installazione dell’SDK aveva supposto che la lingua del Visual Studio fosse Inglese (1033).La soluzione del problema è duplice:1) Duplicate la cartella 1033 presente nel percorso evidenziato dall’errore e la rinominate 10402) cambiate la lingua di Visual Studio.Per questa ultima eventualità basta andare nel menù Strumenti/Opzioni:e cambiare il linguaggi…

Tascam DR-05 registratore digitale per tutti

Diverso tempo fa ho acquistato il registratore digitale Tascam DR-05 e, ora, dopo diversi mesi di utilizzo, posso dire la mia a proposito.

Si tratta di un ottimo registratore digitale con microfono stereo che permette di ottenere registrazioni di ottima qualitaà anche in ambienti non perfetti dal punto di vista acustico.

Interessante la possibilità di utilizzare un cavalletto di piccole dimensioni come HAMA Mini treppiede o Mini Cavalletto Universale per tenere il microfono sollevato dal tavolo in fase di registrazione grazie allàattacco universale per macchina fotografica che il microfono ha nella parte inferiore.

Da segnalare anche il menu’ ben fatto e la possibilita’ di utilizzare una scheda SD esterna per memorizzare i file audio. Anche a livello di consumo batterie non e’ niente male. Consiglio l’uso delle alcaline non ricaricabili.

Il mio utilizzo e’ stato prettamente di registrazione di podcast vocali (no musica) ma le recensioni confermano che se la cava egregiamente con la mu…