Appel de deux animations différentes à partir du même événement de clic

Question

Je travaille actuellement sur une application Surface où j'ai besoin d'appeler deux animations différentes lorsqu'un bouton est tapé.

Comment exactement devrais-je faire cela? J'aimerais le faire de façon déclarative si c'est possible. Devrais-je utiliser MultiTriggers pour cela, ou?

Merci d'avance!

Answer 1

Vous pouvez le faire avec un EventTrigger.

Vous pouvez définir le déclencheur dans une propriété FrameworkElement.Triggers de n'importe quel conteneur du bouton et des cibles d'animation.

<StackPanel 
     Orientation="Horizontal"> 

     <StackPanel.Triggers> 

      <EventTrigger 
       SourceName="TheButton" 
       RoutedEvent="Button.Click"> 

       <BeginStoryboard> 
        <Storyboard> 
         <ColorAnimation 
          Storyboard.TargetName="LimeRect" 
          Storyboard.TargetProperty="Fill.Color" 
          To="Red" /> 
         <ColorAnimation 
          Storyboard.TargetName="RedRect" 
          Storyboard.TargetProperty="Fill.Color" 
          To="Lime" /> 
        </Storyboard> 
       </BeginStoryboard> 

      </EventTrigger> 

     </StackPanel.Triggers> 


     <Button 
      x:Name="TheButton" 
      Content="Play" /> 

     <Rectangle 
      x:Name="LimeRect" 
      Fill="Lime" 
      Width="50" 
      Height="50" /> 

     <Rectangle 
      x:Name="RedRect" 
      Fill="Red" 
      Width="50" 
      Height="50" /> 

    </StackPanel> 

S'il y a un chemin par rapport à vos objectifs, vous pouvez utiliser Storyboard.Target="{Binding PathToTarget}" en place de Storyboard.TargetName="TargetName".

EDIT: (voir commentaires)

Si vous animez le bouton lui-même, vous pouvez mettre les éléments déclencheurs droit sur le bouton et vous ne avez pas besoin de noms cibles.

Exemple - Animer la taille d'un ToggleButton:

<ToggleButton 
     Content="Toggle" 
     Width="50" 
     Height="50"> 

     <ToggleButton.Triggers> 

      <EventTrigger 
       RoutedEvent="ToggleButton.Checked"> 
       <BeginStoryboard> 
        <Storyboard> 
         <DoubleAnimation 
          Duration="00:00:00.2" 
          Storyboard.TargetProperty="Width" 
          To="100" /> 
         <DoubleAnimation 
          Duration="00:00:00.2" 
          Storyboard.TargetProperty="Height" 
          To="100" /> 
        </Storyboard> 
       </BeginStoryboard> 
      </EventTrigger> 

      <EventTrigger 
       RoutedEvent="ToggleButton.Unchecked"> 
       <BeginStoryboard> 
        <Storyboard> 
         <DoubleAnimation 
          Duration="00:00:00.2" 
          Storyboard.TargetProperty="Width" 
          To="50" /> 
         <DoubleAnimation 
          Duration="00:00:00.2" 
          Storyboard.TargetProperty="Height" 
          To="50" /> 
        </Storyboard> 
       </BeginStoryboard> 
      </EventTrigger> 

     </ToggleButton.Triggers> 

    </ToggleButton>