Comment : définir une propriété après l'avoir animée avec un storyboard

Article
10/18/2023

Dans certains cas, il peut apparaître que vous ne pouvez pas modifier la valeur d’une propriété une fois qu’elle a été animée.

Animer la couleur d’un SolidColorBrush

Dans l’exemple suivant, un Storyboard objet est utilisé pour animer la couleur d’un SolidColorBrush. Le storyboard est déclenché lorsque le bouton est cliqué. L’événement Completed est géré afin que le programme soit averti lorsque la ColorAnimation fin est terminée.

<Button
  Content="Animate and Then Set Example 1">
  <Button.Background>
    <SolidColorBrush x:Name="Button1BackgroundBrush"
      Color="Red" />
  </Button.Background>
  <Button.Triggers>
    <EventTrigger RoutedEvent="Button.Click">
      <BeginStoryboard>
        <Storyboard>
          <ColorAnimation
            Storyboard.TargetName="Button1BackgroundBrush"
            Storyboard.TargetProperty="Color"
            From="Red" To="Yellow" Duration="0:0:5"
            FillBehavior="HoldEnd"
            Completed="setButton1BackgroundBrushColor" />
        </Storyboard>
      </BeginStoryboard>
    </EventTrigger>
  </Button.Triggers>
</Button>

Modifier la couleur du pinceau

Une fois l’opération ColorAnimation terminée, le programme tente de changer la couleur du pinceau en bleu.

private void setButton1BackgroundBrushColor(object sender, EventArgs e)
{

    // Does not appear to have any effect:
    // the brush remains yellow.
    Button1BackgroundBrush.Color = Colors.Blue;
}

Private Sub setButton1BackgroundBrushColor(ByVal sender As Object, ByVal e As EventArgs)

    ' Does not appear to have any effect:
    ' the brush remains yellow.
    Button1BackgroundBrush.Color = Colors.Blue
End Sub

Le code précédent n’apparaît rien : le pinceau reste jaune, c’est-à-dire la valeur fournie par le ColorAnimation pinceau animé. La valeur de propriété sous-jacente (la valeur de base) est en fait modifiée en bleu. Toutefois, la valeur effective ou actuelle reste jaune, car la ColorAnimation valeur de base est toujours substituée. Si vous souhaitez que la valeur de base devienne à nouveau la valeur effective, vous devez empêcher l’animation d’influencer la propriété. Il existe trois façons de procéder avec des animations de table de montage séquentiel :

Définir la propriété de l’animation FillBehavior sur Stop
Supprimez l’intégralité du Storyboard.
Supprimez l’animation de la propriété individuelle.

Définir la propriété FillBehavior de l’animation sur Stop

En définissant FillBehavior Stopsur , vous indiquez à l’animation d’arrêter d’affecter sa propriété cible après qu’elle a atteint la fin de sa période active.

<Button
  Content="Animate and Then Set Example 2">
  <Button.Background>
    <SolidColorBrush x:Name="Button2BackgroundBrush"
      Color="Red" />
  </Button.Background>
  <Button.Triggers>
    <EventTrigger RoutedEvent="Button.Click">
      <BeginStoryboard>
        <Storyboard>
          <ColorAnimation
            Storyboard.TargetName="Button2BackgroundBrush"
            Storyboard.TargetProperty="Color"
            From="Red" To="Yellow" Duration="0:0:5"
            FillBehavior="Stop"
            Completed="setButton2BackgroundBrushColor" />
        </Storyboard>
      </BeginStoryboard>
    </EventTrigger>
  </Button.Triggers>
</Button>

private void setButton2BackgroundBrushColor(object sender, EventArgs e)
{

    // This appears to work:
    // the brush changes to blue.
    Button2BackgroundBrush.Color = Colors.Blue;
}

Private Sub setButton2BackgroundBrushColor(ByVal sender As Object, ByVal e As EventArgs)

    ' This appears to work:
    ' the brush changes to blue.
    Button2BackgroundBrush.Color = Colors.Blue
End Sub

Supprimer l’intégralité du storyboard

À l’aide d’un RemoveStoryboard déclencheur ou de la Storyboard.Remove méthode, vous indiquez aux animations de storyboard de cesser d’affecter leurs propriétés cibles. La différence entre cette approche et la définition de la FillBehavior propriété est que vous pouvez supprimer le storyboard à tout moment, tandis que la FillBehavior propriété n’a qu’un effet lorsque l’animation atteint la fin de sa période active.

<Button
  Name="Button3"
  Content="Animate and Then Set Example 3">
  <Button.Background>
    <SolidColorBrush x:Name="Button3BackgroundBrush"
      Color="Red" />
  </Button.Background>
  <Button.Triggers>
    <EventTrigger RoutedEvent="Button.Click">
      <BeginStoryboard Name="MyBeginStoryboard">
        <Storyboard x:Name="MyStoryboard">
          <ColorAnimation
            Storyboard.TargetName="Button3BackgroundBrush"
            Storyboard.TargetProperty="Color"
            From="Red" To="Yellow" Duration="0:0:5"
            FillBehavior="HoldEnd"
            Completed="setButton3BackgroundBrushColor" />
        </Storyboard>
      </BeginStoryboard>
    </EventTrigger>
  </Button.Triggers>
</Button>

private void setButton3BackgroundBrushColor(object sender, EventArgs e)
{

     // This appears to work:
    // the brush changes to blue.
    MyStoryboard.Remove(Button3);
    Button3BackgroundBrush.Color = Colors.Blue;
}

Private Sub setButton3BackgroundBrushColor(ByVal sender As Object, ByVal e As EventArgs)

     ' This appears to work:
    ' the brush changes to blue.
    MyStoryboard.Remove(Button3)
    Button3BackgroundBrush.Color = Colors.Blue
End Sub

Supprimer une animation d’une propriété individuelle

Une autre technique permettant d’empêcher une animation d’affecter une propriété consiste à utiliser la BeginAnimation(DependencyProperty, AnimationTimeline) méthode de l’objet animé. Spécifiez la propriété animée comme premier paramètre et null comme seconde.

<Button
  Name="Button4"
  Content="Animate and Then Set Example 4">
  <Button.Background>
    <SolidColorBrush x:Name="Button4BackgroundBrush"
      Color="Red" />
  </Button.Background>
  <Button.Triggers>
    <EventTrigger RoutedEvent="Button.Click">
      <BeginStoryboard>
        <Storyboard>
          <ColorAnimation
            Storyboard.TargetName="Button4BackgroundBrush"
            Storyboard.TargetProperty="Color"
            From="Red" To="Yellow" Duration="0:0:5"
            FillBehavior="HoldEnd"
            Completed="setButton4BackgroundBrushColor" />
        </Storyboard>
      </BeginStoryboard>
    </EventTrigger>
  </Button.Triggers>
</Button>

private void setButton4BackgroundBrushColor(object sender, EventArgs e)
{

     // This appears to work:
    // the brush changes to blue.
    Button4BackgroundBrush.BeginAnimation(SolidColorBrush.ColorProperty, null);
    Button4BackgroundBrush.Color = Colors.Blue;
}

Private Sub setButton4BackgroundBrushColor(ByVal sender As Object, ByVal e As EventArgs)

     ' This appears to work:
    ' the brush changes to blue.
    Button4BackgroundBrush.BeginAnimation(SolidColorBrush.ColorProperty, Nothing)
    Button4BackgroundBrush.Color = Colors.Blue
End Sub

Cette technique fonctionne également pour les animations hors storyboard.

Partager via