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 : 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