Trigger, DataTrigger & EventTrigger

Jusqu'ici, nous avons travaillé avec des styles en paramétrant une valeur statique pour une propriété spécifique. Cependant, en utilisant des déclencheurs (Triggers), vous pouvez changer la valeur d'une propriété donnée, chaque fois qu'une certaine condition change. Les déclencheurs existent dans différentes nuances: Les déclencheurs par propriété, les déclencheurs par événement et les déclencheurs par donnée. Ils vous permettent de faire des choses, qui devraient normalement être faîtes dans le code, dans le balisage, ce qui est correpond plus à un processus de séparation du visuel et du code.

Propriété Trigger

Le déclencheur le plus courant est le déclencheur par Propriété, qui est définit par un simple élément <Trigger> dans le fichier de balisage. Il "surveille" une propriété particulière du controle, et lorsque cette propriété correspond à la valeur spécifiée, les propriétés peuvent changer. Cette explication peut sembler un peu compliquée, mais c'est en fait assez simple lorsque l'on regarde un exemple.

<Window x:Class="WpfTutorialSamples.Styles.StyleTriggersSample"
        xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
        xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
        Title="StyleTriggersSample" Height="100" Width="300">
    <Grid>
        <TextBlock Text="Hello, styled world!" FontSize="28" HorizontalAlignment="Center" VerticalAlignment="Center">
            <TextBlock.Style>
                <Style TargetType="TextBlock">
                    <Setter Property="Foreground" Value="Blue"></Setter>
                    <Style.Triggers>
                        <Trigger Property="IsMouseOver" Value="True">
                            <Setter Property="Foreground" Value="Red" />
                            <Setter Property="TextDecorations" Value="Underline" />
                        </Trigger>
                    </Style.Triggers>
                </Style>
            </TextBlock.Style>
        </TextBlock>
    </Grid>
</Window>

Dans la description de ce style, nous avons positionné la propriété Foreground du texte à bleu, pour le faire ressembler à un hyperlien. Ensuite, nous avons ajouté un déclencheur, pour surveilller la propriété IsMouseOver. Lorsque cette propriété passe à True, Nous appliquions deux modifications (Setters): Nous changeons le Foreground en rouge et nous passons le texte en souligné. C'est un super exemple qui montre bien comment il est facile d'utiliser les déclencheurs pour appliquer des modifications visuelles sans toucher au code-behind.

Nous définissons un style local pour ce TextBlock spécifique, mais comme indiqué dans les articles précédents, le style aurait également pu être défini globalement, si nous voulons qu'il s'applique à tous les contrôles TextBlock de l'application.

Le déclencheur de données

Les Déclencheurs de données, représentés par le <DataTrigger>, sont utilisés pour les propriétés qui ne sont pas nécessairement des propriétés de dépendance. Ils travaillent par la création d'une liaison à une propriété régulière, qui est ensuite surveillée pour modifications. Ceci ouvre également la possibilité de lier votre déclencheur à une propriété sur un autre contrôle. Par exemple, considérons l'exemple suivant:

<Window x:Class="WpfTutorialSamples.Styles.StyleDataTriggerSample"
        xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
        xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
        Title="StyleDataTriggerSample" Height="200" Width="200">
    <StackPanel HorizontalAlignment="Center" VerticalAlignment="Center">
        <CheckBox Name="cbSample" Content="Hello, world?" />
        <TextBlock HorizontalAlignment="Center" Margin="0,20,0,0" FontSize="48">
            <TextBlock.Style>
                <Style TargetType="TextBlock">
                    <Setter Property="Text" Value="No" />
                    <Setter Property="Foreground" Value="Red" />
                    <Style.Triggers>
                        <DataTrigger Binding="{Binding ElementName=cbSample, Path=IsChecked}" Value="True">
                            <Setter Property="Text" Value="Yes!" />
                            <Setter Property="Foreground" Value="Green" />
                        </DataTrigger>
                    </Style.Triggers>
                </Style>
            </TextBlock.Style>
        </TextBlock>
    </StackPanel>
</Window>

Dans cet exemple, nous avons un CheckBox et un TextBlock. À l'aide d'un DataTrigger, nous lions le TextBlock à la propriété IsChecked de la CheckBox. Nous attribuons un style par défaut, où le texte est "No" et la couleur de premier plan est rouge, puis, à l'aide d'un DataTrigger, nous fournissons un style lorsque la propriété IsChecked de CheckBox est remplacée par True, auquel cas nous la rendons verte avec un texte disant "Yes!" (comme on le voit sur la capture d'écran).

Événements Triggers

Les événements triggers, représentés par l'element <EventTrigger>, sont principalement utilisés pour déclencher une animation, en réponse à l'appel d'un événement. Nous n'avons pas encore discuté des animations, mais pour montrer comment fonctionne un déclencheur d'événement, nous les utiliserons quand même. Jetez un œil au chapitre sur les animations pour plus de renseignements. Voici l'exemple:

<Window x:Class="WpfTutorialSamples.Styles.StyleEventTriggerSample"
        xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
        xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
        Title="StyleEventTriggerSample" Height="100" Width="300">
    <Grid>
        <TextBlock Name="lblStyled" Text="Hello, styled world!" FontSize="18" HorizontalAlignment="Center" VerticalAlignment="Center">
            <TextBlock.Style>
                <Style TargetType="TextBlock">
                    <Style.Triggers>
                        <EventTrigger RoutedEvent="MouseEnter">
                            <EventTrigger.Actions>
                                <BeginStoryboard>
                                    <Storyboard>
                                        <DoubleAnimation Duration="0:0:0.300" Storyboard.TargetProperty="FontSize" To="28" />
                                    </Storyboard>
                                </BeginStoryboard>
                            </EventTrigger.Actions>
                        </EventTrigger>
                        <EventTrigger RoutedEvent="MouseLeave">
                            <EventTrigger.Actions>
                                <BeginStoryboard>
                                    <Storyboard>
                                        <DoubleAnimation Duration="0:0:0.800" Storyboard.TargetProperty="FontSize" To="18" />
                                    </Storyboard>
                                </BeginStoryboard>
                            </EventTrigger.Actions>
                        </EventTrigger>
                    </Style.Triggers>
                </Style>
            </TextBlock.Style>
        </TextBlock>
    </Grid>
</Window>

Ce balisage peut sembler un peu écrasant, mais si vous exécutez cet exemple et regardez le résultat, vous verrez que nous avons en fait accompli une animation assez cool, dans les deux sens, dans ~ 20 lignes de XAML. Comme vous pouvez le voir, j'utilise un EventTrigger pour répondre à deux événements: MouseEnter et MouseLeave. Lorsque la souris rentre, je fais une transition fluide et animée vers un FontSize de 28 pixels en 300 millisecondes. Quand la souris quitte le TextBlock, je change le FontSize à 18 pixels mais je le fais un peu plus lentement, afin qu'il ai un air plutôt cool.

Résumé

Les styles en WPF permettent de facilement obtenir une apparence cohérente, et avec des déclencheurs, cette apparence devient dynamique. Les styles sont très bien dans votre application, mais ils sont encore mieux quand ils sont utilisés dans des modèles de contrôles ... Vous pouvez en lire plus à ce propos ailleurs dans ce tutoriel.

Dans l'article suivant, nous allons voir les déclencheurs multiples, qui permettent d'appliquer des styles sur la base de plusieurs propriétés.