Introduction aux styles en WPF

Si vous venez du monde du développement web, vous utilisez de l'HTML et du CSS, vous allez très vite réaliser que l'XAML est très similaire à l'HTML. En utilisant des tags, vous définissez une structure de mise en forme de votre application. Vous pouvez même faire en sorte que vos éléments apparaissent d'une certaine manière, en utilisant des propriétés intégrées telles que Foreground (couleur du texte), FontSize (taille du texte) et plein d'autres, comme vous pouvez tout aussi bien styliser localement vos tags HTML.

Mais que se passe-t-il quand vous voulez utiliser exactement la même taille et couleur de texte sur trois contrôleurs TextBlock (Bloc de texte) différents ? Vous pouvez copier/coller les propriétés désirées à chacun d'entre eux, mais que se passe-t-il quand trois contrôleurs deviennent 50 contrôleurs, éparpillés sur plusieurs fenêtres ? Et que se passe-t-il quand vous réalisez que la taille du texte devrait être 14 au lieu de 12 ?

WPF introduit de la stylisation, qui est à l'XAML ce que le CSS est à l'HTML. En utilisant les styles, vous pouvez grouper un ensemble de propriétés et les assigner à des contrôleurs d'un type spécifique, et juste comme en CSS, un style peut hérité d'un autre style.

Exemple d'un style simple

Nous allons parler plus des détails, mais pour ce chapitre d'introduction, je veux vous montrer un exemple très simple sur comment utiliser la stylisation :

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

Pour les ressources de mon StackPanel, je définis un Style. J'utilise la propriété TargetType pour dire au WPF que ce style doit être appliqué à TOUS les contrôleurs TextBlock au sein de sa portée (dans le StackPanel), et ensuite, j'ajoute deux éléments Setter au style. Les éléments Setter sont utilisés pour définir des propriétés spécifiques pour les contrôleurs ciblés, dans ce cas les propriétés Foreground et FontSize. La propriété Property indique au WPF quelle propriété nous voulons cibler, et la propriété Value définie la valeur désirée.

Prenez note que le dernier TextBlock est bleu au lieu de gris. J'ai fais cela pour vous montrer que bien qu'un contrôleur peut être stylisé depuis un style désigné, vous êtes complètement libre de l'écraser localement dans le contrôleur. Les valeurs définies directement dans le contrôleur vont toujours être prioritaires sur les valeurs des styles.

Résumé

Les styles WPF rendent vraiment facile la création d'une apparence spécifique et ensuite son utilisation pour plusieurs contrôleurs. Bien que ce premier exemple était très local, je vais vous montrer comment créer des styles globaux dans les prochains chapitres.