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>

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:

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.

Technorati Tag: wpf,tutorial,windows presentation foundation,presentation framework,controls,content controls,risorse,object resources,stili,style,appunti wpf