Styling in WPF

Con WPF viene introdotto un concetto da tempo noto agli sviluppatori WEB: lo Style.
La classe FrameworkElement, dalla quale i controlli WPF ereditano espone infatti una proprietà Style impostando la quale è possibile decidere come apparirà un ben preciso elemento.
Ad esempio è possibile definire lo stesso pulsante usando:

<Button Height="100" FontSize="14" Content="1" />

<Button Height="100">1
<Button.Style>
    <Style>
      <Setter Property="Button.FontSize" Value="14" />
    </Style>
</Button.Style>
</Button>

I due frammenti XAML sono equivalenti, ma è evidente che il secondo oltre ad essere molto più verboso non sfrutta la caratteristica fondamentale per la quale ha senso utilizzare uno stile: Il poterlo definire in un punto ben preciso e condividerlo con tutti i vari elementi che devono apparire nello stesso modo:
Nnon a caso la modalità Inline pur essendo disponibile non è mai utilizzata.
Gli stili vengono definiti all'interno dell'area risorse dei vari FrameworkElements ed è il punto in cui vengono definiti che ne determina la relativa visibilità visto che lo stile sarà accessibile solo dagli elementi contenuti nel rispettivo Logical Tree.
Per rendere gli stili accessibili all'intera applicazione vanno definiti come Application Resources nel file app.xaml.
Il codice che segue definisce uno stile all'interno di uno StackPanel

<StackPanel Orientation="Horizontal" Grid.Row="0" >
<StackPanel.Resources>
    
    <Style TargetType="{x:Type Button}">
      <Setter Property="Control.Background" Value="Yellow"/>
      <Setter Property="Height" Value="100" />
    </Style>
</StackPanel.Resources>
</StackPanel>

Come si nota, uno stile è una risorsa composta da oggetti Setter il cui compito è quello di applicare, attraverso l'opportuno Converter, il valore dichiarato nell'attributo Value alla proprietà indicata dall'attributo Property,in questo specifico caso lo stile "definisce" un colore di sfondo a Giallo e un altezza a 100px.
Rimane ora da definire come si applica lo stile: Nell'esempio sopra indicato lo stile è un Implicit Styling in quanto, attraverso l'attributo TargetType è stato indicato il tipo sul quale lo stile andrà automaticamente ad agire, nello specifico il tipo è Button, ciò significa che tutti i pulsanti presenti nello StackPanel avranno, by default, lo sfondo Giallo e un altezza di 100px.

Nel caso dei 3 pulsanti sopra indicati il pulsante "2" avrà, oltre allo stile predefinito, il Font=Bold, il pulsante 5 non avrà lo stile applicato mentre il pulsante 6 avrà, il colore di sfondo Azure anzichè Giallo ad indicare che definizioni locali hanno la precedenza rispetto all'eventuale stile associato.
Altra modalità di definizione è il Named Style

<Style x:Key="Style1" >
<Setter Property="Control.Background" Value="LightGreen"/>
<Setter Property="Button.Foreground" Value="Blue" />
</Style>

che viene utilizzato in questo modo:

<Button Height="100" Style="{StaticResource Style1}">3</Button>

Ovvero associando lo style attraverso {StaticResource NomeStyle} dove NomeStyle è quello definito con x:Key nello Style.
Gli stili possono ereditare da altri stili come in questo caso:

<Style x:Key="DerivedStyle" BasedOn="{StaticResource Style1}">
<Setter Property="Button.Foreground" Value="Red" />
</Style>

dove lo stile attraverso l'attributo BasedOn eredita da quello precedente e ridefinisce il Foreground color, ma potrebbe, volendo, aggiungere altri Setters.
L'utilizzo è esattamente la stess mostrata nel caso di Style1..
In tutti questi esempi l'applicazione dello stile è statica, attraverso l'uso di Triggers è possibile applicare gli stili al verificarsi di alcune condizioni, ne parlerò in un prossimo post.