Comment : définir une propriété après l'avoir animée avec un storyboard
Dans certains cas, il peut arriver que vous ne puissiez pas modifier la valeur d'une propriété qui a été animée.
Exemple
Dans l'exemple suivant, une Storyboard est utilisée pour animer la couleur d'un SolidColorBrush. La table de montage séquentiel est déclenchée lorsque vous cliquez sur le bouton. L'événement Completed est géré de telle sorte le programme est informé de la fin de l'ColorAnimation.
<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>
Une fois l'ColorAnimation terminée, le programme essaie de remplacer la couleur du pinceau par du bleu.
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
private void setButton1BackgroundBrushColor(object sender, EventArgs e)
{
// Does not appear to have any effect:
// the brush remains yellow.
Button1BackgroundBrush.Color = Colors.Blue;
}
Le code ci-dessus semble sans effet : le pinceau reste jaune, qui est la valeur fournie par l'ColorAnimation qui a animé le pinceau. La valeur de propriété sous-jacente (valeur de base) a en fait été remplacée par le bleu. La valeur effective, ou actuelle, reste toutefois le jaune car l'ColorAnimation continue de substituer la valeur de base. Si vous souhaitez que la valeur de base redevienne la valeur effective, vous devez faire en sorte que l'animation cesse d'influencer la propriété. Il y a trois façons de le faire avec les animations de table de montage séquentiel :
Affectez la valeur Stop à la propriété FillBehavior de l'animation.
Supprimez l'intégralité de la table de montage séquentiel.
Supprimez l'animation de la propriété individuelle.
Affectation de la valeur Stop à la propriété FillBehavior de l'animation
En affectant la valeur Stop à FillBehavior, vous demandez à l'animation de cesser d'affecter sa propriété cible lorsqu'elle arrive au terme 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 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
private void setButton2BackgroundBrushColor(object sender, EventArgs e)
{
// This appears to work:
// the brush changes to blue.
Button2BackgroundBrush.Color = Colors.Blue;
}
Suppression de l'intégralité de la table de montage séquentiel
En utilisant un déclencheur RemoveStoryboard ou la méthode Storyboard.Remove, vous demandez aux animations de la table de montage séquentiel de cesser d'affecter leurs propriétés cibles. La différence entre cette approche et la définition de la propriété FillBehavior est que vous pouvez supprimer la table de montage séquentiel à tout moment, tandis que la propriété FillBehavior ne prend effet que 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 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
private void setButton3BackgroundBrushColor(object sender, EventArgs e)
{
// This appears to work:
// the brush changes to blue.
MyStoryboard.Remove(Button3);
Button3BackgroundBrush.Color = Colors.Blue;
}
Suppression d'une animation d'une propriété individuelle
Une autre technique pour empêcher une animation d'affecter une propriété consiste à utiliser la méthode BeginAnimation(DependencyProperty, AnimationTimeline) de l'objet animé. Spécifiez la propriété animée comme premier paramètre et null comme second paramètre.
<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 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
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;
}
Cette technique fonctionne également pour les animations sans table de montage séquentiel.