Utiliser les styles en WPF

Dans le chapitre précédent, où nous avons introduit le concept des styles, nous avons utilisé un exemple basique d'un style défini localement, qui ciblait un type spécifique de contrôle : le TextBlock. Cependant, les styles peuvent être définis avec différents portées, selon où et comment vous voulez les utiliser, et vous pouvez même restreindre des styles pour être seulement utilisés dans des contrôles où vous les voulez explicitement. Dans ce chapitre, je vais vous montrer toutes les différentes façons par lesquelles un style peut être défini.

Style spécifique à un contrôle local

Vous pouvez définir un style directement dans un contrôle, comme ceci :

<Window x:Class="WpfTutorialSamples.Styles.ControlSpecificStyleSample"
        xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
        xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
        Title="ControlSpecificStyleSample" Height="100" Width="300">
    <Grid Margin="10">
        <TextBlock Text="Style test">
            <TextBlock.Style>
                <Style>
                    <Setter Property="TextBlock.FontSize" Value="36" />
                </Style>
            </TextBlock.Style>
        </TextBlock>
    </Grid>
</Window>

Dans cet exemple, le style affecte uniquement ce contrôle TextBlock spécifique, donc pourquoi s'embêter ? Et bien, dans ce cas, cela ne ferait aucun sens. J'aurais pu remplacer tout ce balisage en trop avec une seule propriété FontSize dans le contrôle TextBlock, mais comme nous le verrons plus tard, les styles peuvent faire un peu plus que juste appliquer des propriétés, par exemple, les déclencheurs de style pourraient rendre l'exemple ci-dessus très utile dans une application réelle. Toutefois, la plupart des styles que vous définirez seront probablement de plus grande portée.

Style local d'un contrôle enfant

En utilisant la section Resources d'un contrôle, vous pouvez cibler des contrôles enfants de ce contrôle (et les contrôles enfants de ses contrôles enfants et ainsi de suite). C'est basiquement ce que nous avons fait dans l'exemple d'introduction du dernier chapitre, ce qui ressemblait à ceci :

<Window x:Class="WpfTutorialSamples.Styles.SimpleStyleSample"
        xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
        xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
        Title="SimpleStyleSample" Height="200" Width="250">
    <StackPanel Margin="10">
        <StackPanel.Resources>
            <Style TargetType="TextBlock">
                <Setter Property="Foreground" Value="Gray" />
                <Setter Property="FontSize" Value="24" />
            </Style>
        </StackPanel.Resources>
        <TextBlock>Header 1</TextBlock>
        <TextBlock>Header 2</TextBlock>
        <TextBlock Foreground="Blue">Header 3</TextBlock>
    </StackPanel>
</Window>

Ceci est très bien pour les besoins de stylisation les plus locaux. Par exemple, ce serait parfaitement sensé de faire ceci dans une fenêtre de dialogue où vous avez simplement eu besoin d'un ensemble de contrôles.

Les styles appliqués à une fenêtre entière

La prochaine étape dans la hiérarchie des portées est de définir le (ou les) style(s) au sein des ressources de la Fenêtre. Ceci est fait exactement de la même manière que ci-dessus pour le StackPanel, mais c'est très utile dans ces situations où vous voulez qu'un style spécifique s'applique à tous les contrôles au sein d'une fenêtre (ou au sein d'un UserControl d'ailleurs) et non pas juste localement au sein d'un contrôle spécifique. Voici un exemple modifié :

<Window x:Class="WpfTutorialSamples.Styles.WindowWideStyleSample"
        xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
        xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
        Title="WindowWideStyleSample" Height="200" Width="300">
    <Window.Resources>
        <Style TargetType="TextBlock">
            <Setter Property="Foreground" Value="Gray" />
            <Setter Property="FontSize" Value="24" />
        </Style>
    </Window.Resources>
    <StackPanel Margin="10">
        <TextBlock>Header 1</TextBlock>
        <TextBlock>Header 2</TextBlock>
        <TextBlock Foreground="Blue">Header 3</TextBlock>
    </StackPanel>
</Window>

Comme vous pouvez voir, le résultat est exactement le même, mais il montre bien que vous pouvez avoir des contrôles placés n'importe où au sein de la fenêtre et que les styles s'y appliqueraient quand même.

Les styles appliqués à une application entière

Si vous voulez que vos styles soient utilisés partout dans l'application, au travers des différentes fenêtres, vous pouvez les définir pour l'application entière. Ceci est fait dans le fichier App.xml que Visual Studio a probablement créé pour vous, et ça se fait simplement comme dans l'exemple pour une fenêtre.

App.xaml

<Application x:Class="WpfTutorialSamples.App"
             xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
             xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
	 StartupUri="Styles/WindowWideStyleSample.xaml">
    <Application.Resources>
        <Style TargetType="TextBlock">
            <Setter Property="Foreground" Value="Gray" />
            <Setter Property="FontSize" Value="24" />
        </Style>
    </Application.Resources>
</Application>

Fenêtre

<Window x:Class="WpfTutorialSamples.Styles.WindowWideStyleSample"
        xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
        xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
        Title="ApplicationWideStyleSample" Height="200" Width="300">
    <StackPanel Margin="10">
        <TextBlock>Header 1</TextBlock>
        <TextBlock>Header 2</TextBlock>
        <TextBlock Foreground="Blue">Header 3</TextBlock>
    </StackPanel>
</Window>

Utiliser des styles explicitement

Vous avez beaucoup de contrôle sur comment et où appliquer la stylisation de vos contrôles, des styles locaux jusqu'aux styles appliqués à l'application toute entière, cela peut vous aider à avoir une apparence cohérente au sein de votre application, mais jusqu'à maintenant, tous nos styles ont ciblé un type de contrôle spécifique, et ainsi tous ces contrôles les ont utilisé. Néanmoins, cela n'est pas forcément obligatoire.

En paramétrant la propriété x:Key dans un style, vous dites au WPF que vous voulez seulement utiliser ce style quand vous y faites explicitement référence dans un contrôle spécifique. Essayons un exemple où c'est le cas :

<Window x:Class="WpfTutorialSamples.Styles.ExplicitStyleSample"
        xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
        xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
        Title="ExplicitStyleSample" Height="150" Width="300">
    <Window.Resources>
        <Style x:Key="HeaderStyle" TargetType="TextBlock">
            <Setter Property="Foreground" Value="Gray" />
            <Setter Property="FontSize" Value="24" />
        </Style>
    </Window.Resources>
    <StackPanel Margin="10">
        <TextBlock>Header 1</TextBlock>
        <TextBlock Style="{StaticResource HeaderStyle}">Header 2</TextBlock>
        <TextBlock>Header 3</TextBlock>
    </StackPanel>
</Window>

Veuillez remarquer que bien que le TargetType est défini sur TextBlock, et que bien que le style est défini pour toute la fenêtre, seul le TextBlock au milieu, où je référence explicitement au style HeaderStyle, utilise le style. Ceci vous permet de définir des styles qui ciblent un type de contrôle spécifique, mais de seulement l'utiliser dans les endroits où vous en avez besoin.

Résumé

La stylisation en WPF vous permet de facilement réutiliser une certainement apparence pour vos contrôles dans toute l'application. En utilisant la propriété x:Key, vous pouvez décider si un style devrait être référencé explicitement pour faire effet, ou si il devrait cibler tous les contrôles peu importe lesquels.