Trigger

De Banane Atomic
Révision datée du 16 juin 2020 à 15:42 par Nicolas (discussion | contributions) (→‎DataTrigger with a Converter)
(diff) ← Version précédente | Voir la version actuelle (diff) | Version suivante → (diff)
Aller à la navigationAller à la recherche

Définition

Déclencheur d'actions en fonctions d’événements (souris ou clavier) ou de modifications de valeurs (propriétés ou data binding).

Propriété Trigger

La propriété Trigger fonctionne avec les propriétés des composants graphiques.

Xaml.svg
<Window.Resources>
    <Style TargetType="{x:Type TextBox}">
        <Style.Triggers>
            <!-- Déclenchement du Trigger sur la propriété IsMouseOver de la TextBox -->
            <Trigger Property="IsMouseOver" Value="True">
                <Setter Property="Background" Value="Cyan" />
            </Trigger> ...

DataTrigger

The Value property can not be bound because it is not a dependency property.

DataTrigger fonctionne avec les propriétés de l'objet référencé par le Binding.

Xaml.svg
<TextBlock Foreground="Black">
    <TextBlock.Style>
        <Style TargetType="{x:Type TextBlock}">
             <!-- Le trigger ne peut pas redéfinir les propriétés définies dans
             le control (ex : Foreground), pour faire cela, il faut plutôt
             définir les proprétés dans le Style -->
            <Setter Property="Background" Value="White"/>
            <Style.Triggers>
                <!-- Le trigger est déclenché lorsque Propriété passe à True -->
                <DataTrigger Binding="{Binding Path=Propriété}" Value="True">
                    <!-- Lorsque le trigger est déclenché, la propriété
                    Background est mise à Red. Lorsque Propriété passe à False,
                    Background reprend sa valeur initiale (White) -->
                    <Setter Property="Background" Value="Red"/>
                </DataTrigger> ...

DataTrigger with a Converter

Xaml.svg
<UserControl.Resource>
    <local:IsValueAbove100Converter x:Key="IsValueAbove100Converter" />
    <Style x:Key="RedAbove100Style"
           TargetType="TextBlock">
        <!-- define the DataContext type -->
        <d:Style.DataContext>
            <x:Type Type="local:ItemViewModel" />
        </d:Style.DataContext>

        <Style.Triggers>
            <DataTrigger Binding="{Binding Amount, Converter={StaticResource IsValueAbove100Converter}}"
                         Value="True">
                <Setter Property="Foreground" Value="Red" />
            </DataTrigger>
        </Style.Triggers>
    </Style>
</UserControl.Resource>

<TextBlock Text="{Binding Amount}"
           Style="{StaticResource RedAbove100Style}" />
IsValueAbove100Converter.cs
[ValueConversion(typeof(decimal), typeof(bool))]
class IsValueAbove100Converter : IValueConverter
{
    public object Convert(object value, Type targetType, object parameter, CultureInfo culture)
    {
        if (value is decimal number)
        {
            return number > 100m;
        }

        return DependencyProperty.UnsetValue;
    }

    public object ConvertBack(object value, Type targetTypes, object parameter, CultureInfo culture)
    {
        throw new NotImplementedException();
    }
}

MultiDataTrigger

Comme pour le DataTrigger mais avec plusieurs conditions de déclenchement.

Xaml.svg
<TextBox Text="TTT">
    <TextBox.Style>
        <Style TargetType="{x:Type TextBox}">
            <Setter Property="Background" Value="Green" />
            <Style.Triggers>
                <MultiDataTrigger>
                    <MultiDataTrigger.Conditions>
                        <!-- Ce Binding fait référence à la TextBox elle-même. Equivalent à la Propriété Trigger -->
                        <Condition Binding="{Binding RelativeSource={RelativeSource Self}, Path=IsMouseOver}"
                                          Value="True"/>
                        <!-- Ce Binding fait référence à la propriété ChangeColor du DataContext -->
                        <Condition Binding="{Binding Path=ChangeColor}" Value="True"/>
                    </MultiDataTrigger.Conditions>
                    <Setter Property="Background" Value="Orange" />
                </MultiDataTrigger> ...

EventTrigger

L'EventTrigger est utilisé pour déclencher une animation suite à un événement.

Xaml.svg
<UserControl>
    <UserControl.Triggers>
        <!-- Déclenchement lors du double-click sur le UserControl -->
        <EventTrigger RoutedEvent="UserControl.MouseDoubleClick">
            <EventTrigger.Actions>
                <BeginStoryboard>
                    <Storyboard/>
                </BeginStoryboard>
            </EventTrigger.Actions>
        </EventTrigger>

Pour lier un événement au lancement d'une commande, il vaut mieux utiliser InvokeCommandAction ou EventToCommand.