Les triggers

Comprendre et manipuler les triggers.

12/14/2010 7 281 lectures 3 commentaires 4.7/5 (6 votes) Julien Flawinne Sébastien Sougnez

La structure interne ainsi que le design d'AreaProg ont récemment été modifiés.
Suite à cela, le format de certains articles a été perturbé. Le problème est connu et en cours de résolution. Merci de votre compréhension.

Les triggers :

Dans la suite logique du cours précédent, nous allons maintenant aborder la notion de triggers. Tout d’abord qu’est-ce qu’un trigger ? Un trigger est un déclencheur. Que déclenche-t-il ? une nouvelle valeur sur une propriété si la valeur de la propriété qu’il surveille a changé. Avec quoi affecte-t-il cette nouvelle valeur ? Un setter comme on l’a vu précédemment.

Property-triggers :

Les property-triggers sont des triggers qui ne vont monitorer qu’une propriété et changer la valeur de la propriété cible du trigger lorsque la valeur de la propriété monitorée va changer. Un exemple : Nous avons un bouton et nous voudrions que lorsque la souris passe au-dessus de celui-ci, la couleur de fond du bouton devienne rouge. Comment faire ? En utilisant un trigger. Bien sûr, un trigger ne s’utilise pas seul, il faut le coupler avec un style et un setter , matière vue dans le cours précédent. Voici le code :
<Window x:Class="coursWPF.Window1"
    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
    Title="Cours WPF" Height="114" Width="400" Loaded="Window_Loaded">
    <Window.Resources>
        <Style x:Key="forExemple">
            <Style.Triggers>
                <Trigger Property="Button.IsMouseOver" Value="True">
                    <Setter Property="Button.Background" Value="Red"/>
                </Trigger>
            </Style.Triggers>
        </Style>
    </Window.Resources>
    <StackPanel x:Name="stack1">
        <Button x:Name="bt1"
                Content="Put your mouse over me!"
                Style="{StaticResource forExemple}"
                />
    </StackPanel>
</Window>
Comme on le voit ici, le trigger est placé dans un style et englobe un objet Setter. Les différentes propriétés à initialiser pour un trigger sont :
  • Property : Il faut lui affecter la propriété à surveiller (monitorer) (ici la propriété IsMouseOver du bouton).
  • Value : Propriété à laquelle il faut affecter la valeur que la propriété surveillée doit prendre pour déclencher le trigger.
  • Setters : Contient une collection de setter à éxécuter.
Concrètement dans cet exemple on dit que lorsque la propriété IsMouseOver du bouton aura la valeur True, on déclenchera le Setter qui va affecter la valeur Red à la propriété Background du bouton. Petite remarque... Vous vous êtes surement aperçu que ce type de trigger ne permet que de gérer les propriétés d’un seul type de contrôle. Comment faire si par exemple, on a une textbox et l’on voudrait faire en sorte de changer la couleur d’arrière-plan d’un label suivant le texte tapé dans la textbox ? En utilisant un autre type de trigger.

Les Data-triggers :

Les Data-trigger sont un type de trigger qui va monitorer la valeur d’une propriété liée (bound property). Comment utiliser ces triggers ? Reprenons l’exemple cité ci-dessus : On va faire en sorte que lorsque l’on tape trigger dans la textbox, la couleur d’arrière-plan du label se change en rouge et que la couleur du texte se change en blanc :
<Window x:Class="coursWPF.Window1"
    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
    Title="Cours WPF" Height="114" Width="400" Loaded="Window_Loaded"  
    >
    <Window.Resources>
        <Style x:Key="forExemple">
            <Style.Triggers>
                <DataTrigger Binding="{Binding ElementName=enter , Path=Text}" Value="trigger">
                    <Setter Property="Label.Background" Value="Red"/>
                    <Setter Property="Label.Foreground" Value="White"/>
                </DataTrigger>
            </Style.Triggers>
        </Style>
    </Window.Resources>
    <StackPanel x:Name="stack1">
        <TextBox x:Name="enter"
                 Width="200"
                 Height="25"
                 />
        <Label x:Name="label"
               Content="Watch this!"
               Style="{StaticResource forExemple}"
               />
    </StackPanel>
</Window>
Voici le résultat :
Image
Explications : L’implémentation du trigger reste la même, il est toujours appliqué à un style. Cependant, nous n’utilisons plus la classe Trigger mais bien DataTrigger. Quelles sont les nouvelles propriétés intéressantes de cette classe : Binding : Nous n’avons pas encore vu le binding au niveau de WPF, retenez juste que cette propriété sert à lier la propriété d’un autre objet à surveiller, à notre trigger.

Les multi-trigger :

Les multi-triggers sont comparables aux property-triggers à l’exception qu’ils monitorent plusieurs propriétés en même temps. Le trigger déclenchera le(s) setter(s) lorsque toutes les propriétés surveillées auront la valeur attendue. Par exemple on voudrait changer la couleur d’arrière-plan d’un bouton si le curseur de la souris est dessus et qu’en plus il a le focus (il est sélectionné). Voici le code:
<Window x:Class="coursWPF.Window1"
    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
    Title="Cours WPF" Height="114" Width="400" Loaded="Window_Loaded"  
    >
    <Window.Resources>
        <Style x:Key="forExemple">
            <Style.Triggers>
                <MultiTrigger>
                    <MultiTrigger.Conditions>
                        <Condition Property="Button.IsMouseOver" Value="True"/>
                        <Condition Property="Button.IsFocused" Value="True"/>
                    </MultiTrigger.Conditions>
                    <MultiTrigger.Setters>
                        <Setter Property="Button.Background" Value="Red"/>
                    </MultiTrigger.Setters>
                </MultiTrigger>
            </Style.Triggers>
        </Style>
    </Window.Resources>
    <StackPanel x:Name="stack1">

        <Button x:Name="bt1"
               Content="Test me!"
               Style="{StaticResource forExemple}"
               />
    </StackPanel>
</Window>
On affecte à la propriété Triggers de l’objet Style un objet Multitrigger. Cet objet a une propriété Conditions qui va contenir en fait une collection d’objet Condition , et c’est les propriétés de ces objets (Property et Value) qu’il faut initialiser.

Les multi-Data-Triggers :

Ce type permet d’utiliser, comme pour le multi-triggers, plusieurs Multi-triggers. Ils s’emploient exactement de la même manière que les multi-triggers.

Les Event-triggers :

Ce trigger est particulier. Là où les autres types de triggers monitorent la valeur d’une propriété, l’event-trigger lui va surveiller le déclenchement d’un évènement (event). De plus ce type ne contient pas une collection de setter. Il a, à la place, une collection d’Actions. Comme nous n’avons pas encore vu les actions et les animations, je vais juste mettre ici un exemple de code auquel vous pourrez revenir une fois le chapitre des actions et animations vu. Voici par exemple comment jouer un son lorsqu’un bouton est cliqué :
<Window x:Class="coursWPF.Window1"
    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
    Title="Cours WPF" Height="114" Width="400" Loaded="Window_Loaded"  
    >
    <Window.Resources>
        <Style x:Key="forExemple">
            <Style.Triggers>
                <EventTrigger RoutedEvent="Button.Click">
                    <EventTrigger.Actions>
                        <SoundPlayerAction Source="C:Ding.wav" />
                    </EventTrigger.Actions>
                </EventTrigger>
            </Style.Triggers>
        </Style>
    </Window.Resources>
    <StackPanel x:Name="stack1">

        <Button x:Name="bt1"
               Content="Test me!"
               Style="{StaticResource forExemple}"
               />
    </StackPanel>
</Window>
Nous voyons bien ici que le trigger n’est plus lié à une propriété mais bien à un évènement (ici l’évènement Click d’un Button) et que les actions à éffectuer se situent bien dans une collection d’Actions.

Noter

Veuillez vous identifier ou vous inscrire pour donner une note à cet article.

Commentaires / Questions

Istace Emmanuel (02/05/2011 - 20:57)

Sympa comme article ^^

orel (14/05/2012 - 12:01)

Comment connaitre la liste des "EventTrigger.Actions" ?
La il n'y a qu'un exemple avec SoundPlayerAction.
Merci.

sofi@ne (28/04/2013 - 15:03)

comment faire si la propriete value = "trigger" est une liste de valeur c_a_dire :il verifie si la valeur demandée est bien appartient à un ensemble de valeurs si c'est le cas le declencheur se declenche je dis bien une liste de valeurs et non pas une seule valeur

Veuillez vous identifier ou vous inscrire pour réagir à cet article.

Avatar

Julien Flawinne

Envoyer un mail Site web Twitter Rédacteur

0 point

Avatar

Sébastien Sougnez

Envoyer un mail Site web Windows live messenger LinkedIn Twitter Facebook MVP Administrateur

0 point