« Trigger » : différence entre les versions
De Banane Atomic
Aller à la navigationAller à la recherche
(Une version intermédiaire par le même utilisateur non affichée) | |||
Ligne 39 : | Ligne 39 : | ||
<kode lang="xaml"> | <kode lang="xaml"> | ||
<UserControl.Resource> | <UserControl.Resource> | ||
<local:IsValueAbove100Converter x:Key="IsValueAbove100Converter" /> | |||
<Style x:Key="RedAbove100Style" | <Style x:Key="RedAbove100Style" | ||
TargetType="TextBlock"> | TargetType="TextBlock"> | ||
Ligne 56 : | Ligne 57 : | ||
<TextBlock Text="{Binding Amount}" | <TextBlock Text="{Binding Amount}" | ||
Style="{StaticResource RedAbove100Style}"> | Style="{StaticResource RedAbove100Style}" /> | ||
</kode> | </kode> | ||
Dernière version du 16 juin 2020 à 15:42
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.
<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.
<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
<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.
<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.
<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.