XAML - Déclencheurs

Fondamentalement, un déclencheur vous permet de modifier les valeurs de propriété ou d'effectuer des actions en fonction de la valeur d'une propriété. Ainsi, cela vous permet essentiellement de modifier dynamiquement l'apparence et / ou le comportement de votre contrôle sans avoir à en créer un nouveau.

Les déclencheurs sont utilisés pour modifier la valeur d'une propriété donnée, lorsque certaines conditions sont satisfaites. Les déclencheurs sont généralement définis dans un style ou à la racine d'un document qui sont appliqués à ce contrôle spécifique. Il existe trois types de déclencheurs -

  • Déclencheurs de propriété
  • Déclencheurs de données
  • Déclencheurs d'événements

Déclencheurs de propriété

Dans les déclencheurs de propriété, lorsqu'une modification se produit dans une propriété, elle entraîne une modification immédiate ou animée d'une autre propriété. Par exemple, vous pouvez utiliser un déclencheur de propriété si vous souhaitez modifier l'apparence du bouton lorsque la souris est sur le bouton.

Exemple

L'exemple suivant montre comment modifier la couleur de premier plan d'un bouton lorsque la souris entre dans sa région.

<Window x:Class = "XAMLPropertyTriggers.MainWindow" 
   xmlns = "http://schemas.microsoft.com/winfx/2006/xaml/presentation"
   xmlns:x = "http://schemas.microsoft.com/winfx/2006/xaml" 
   Title = "MainWindow" Height = "350" Width = "604">
	
   <Window.Resources>
      <Style x:Key = "TriggerStyle" TargetType = "Button">
         <Setter Property = "Foreground" Value = "Blue" />
         <Style.Triggers>
            <Trigger Property = "IsMouseOver" Value = "True">
               <Setter Property = "Foreground" Value = "Green" />
            </Trigger> 
         </Style.Triggers>
      </Style>
   </Window.Resources>
	
   <Grid>
      <Button Width = "100" Height = "70" Style = "{StaticResource TriggerStyle}" 
         Content = "Trigger"/>
   </Grid>
	
</Window>

Lorsque vous compilez et exécutez le code ci-dessus, il produira la sortie suivante -

Lorsque la souris entre dans la zone du bouton, la couleur de premier plan passe au vert.

Déclencheurs de données

Un déclencheur de données effectue une action lorsque les données liées remplissent une condition. Jetons un coup d'œil au code XAML suivant dans lequel une case à cocher et un bloc de texte sont créés avec certaines propriétés. Lorsque la case est cochée, la couleur de premier plan devient rouge.

<Window x:Class = "XAMLDataTrigger.MainWindow" 
   xmlns = "http://schemas.microsoft.com/winfx/2006/xaml/presentation"
   xmlns:x = "http://schemas.microsoft.com/winfx/2006/xaml" 
   Title = "Data Trigger" Height = "350" Width = "604">
	
   <StackPanel HorizontalAlignment = "Center">
      <CheckBox x:Name = "redColorCheckBox" Content = "Set red as foreground color" Margin = "20"/>
		
      <TextBlock Name = "txtblock" VerticalAlignment = "Center" 
         Text = "Event Trigger" FontSize = "24" Margin = "20">
         <TextBlock.Style>
            <Style>
               <Style.Triggers>
                  <DataTrigger Binding = "{Binding ElementName = redColorCheckBox, Path = IsChecked}" 
                     Value = "true">
                     <Setter Property = "TextBlock.Foreground" Value = "Red"/>
                     <Setter Property = "TextBlock.Cursor" Value = "Hand" />
                  </DataTrigger>
               </Style.Triggers>
            </Style>
         </TextBlock.Style>
      </TextBlock>
   </StackPanel>
	
</Window>

Lorsque vous compilez et exécutez le code ci-dessus, il produira la sortie suivante -

Lorsque la case est cochée, la couleur de premier plan du bloc de texte passe au rouge.

Déclencheurs d'événements

Un déclencheur d'événement exécute une action lorsqu'un événement spécifique est déclenché. Il est généralement utilisé pour réaliser des animations telles que DoubleAnimation, ColorAnimation, etc. Le bloc de code suivant crée un bouton simple. Lorsque l'événement de clic est déclenché, il élargit la largeur et la hauteur du bouton.

<Window x:Class = "XAMLEventTrigger.MainWindow"
   xmlns = "http://schemas.microsoft.com/winfx/2006/xaml/presentation"
   xmlns:x = "http://schemas.microsoft.com/winfx/2006/xaml" 
   Title = "MainWindow" Height = "350" Width = "604">
	
   <Grid>
      <Button Content = "Click Me" Width = "60" Height = "30">
         <Button.Triggers>
            <EventTrigger RoutedEvent = "Button.Click">
               <EventTrigger.Actions>
                  <BeginStoryboard>
                     <Storyboard>
                     
                        <DoubleAnimationUsingKeyFrames Storyboard.TargetProperty = "Width" Duration = "0:0:4">
                           <LinearDoubleKeyFrame Value = "60" KeyTime = "0:0:0"/>
                           <LinearDoubleKeyFrame Value = "120" KeyTime = "0:0:1"/>
                           <LinearDoubleKeyFrame Value = "200" KeyTime = "0:0:2"/>
                           <LinearDoubleKeyFrame Value = "300" KeyTime = "0:0:3"/>
                        </DoubleAnimationUsingKeyFrames>
							
                        <DoubleAnimationUsingKeyFrames Storyboard.TargetProperty = "Height" Duration = "0:0:4">
                           <LinearDoubleKeyFrame Value = "30" KeyTime = "0:0:0"/>
                           <LinearDoubleKeyFrame Value = "40" KeyTime = "0:0:1"/>
                           <LinearDoubleKeyFrame Value = "80" KeyTime = "0:0:2"/>
                           <LinearDoubleKeyFrame Value = "150" KeyTime = "0:0:3"/>
                        </DoubleAnimationUsingKeyFrames>
							
                     </Storyboard>
                  </BeginStoryboard>
               </EventTrigger.Actions>
            </EventTrigger>
         </Button.Triggers>
      </Button>
   </Grid>
</Window>

Lorsque vous compilez et exécutez le code ci-dessus, il produira la sortie suivante -

Maintenant, cliquez sur le bouton et vous verrez qu'il commencera à se développer dans les deux dimensions.