Procedura: impostare una proprietà dopo averla animata con uno storyboard
Aggiornamento: novembre 2007
In alcuni casi, potrebbe sembrare che non sia possibile modificare il valore di una proprietà dopo che è stata animata.
Esempio
Nell'esempio seguente viene utilizzato un oggetto Storyboard per aggiungere un'animazione al colore di un oggetto SolidColorBrush. Lo storyboard viene attivato quando si fa clic sul pulsante. L'evento Completed viene gestito in modo che il programma riceva una notifica quando l'oggetto ColorAnimation viene completato.
<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>
Una volta completato l'oggetto ColorAnimation, il programma tenta di cambiare il colore del pennello nel colore blu.
private void setButton1BackgroundBrushColor(object sender, EventArgs e)
{
// Does not appear to have any effect:
// the brush remains yellow.
Button1BackgroundBrush.Color = Colors.Blue;
}
Il codice precedente non sembra eseguire alcuna azione: il pennello rimane giallo, vale a dire il valore fornito dall'oggetto ColorAnimation che ha animato il pennello. Il valore della proprietà sottostante (valore di base) è realmente passato a blu. Tuttavia, il valore effettivo o corrente rimane giallo in quanto l'oggetto ColorAnimation sta ancora eseguendo l'override del valore di base. Se si desidera che il valore di base divenga nuovamente il valore effettivo, è necessario interrompere l'effetto dell'animazione sulla proprietà. Esistono tre modi per eseguire questa operazione con le animazioni storyboard:
Impostare la proprietà FillBehavior dell'animazione su Stop
Rimuovere l'intero storyboard.
Rimuovere l'animazione dalla singola proprietà.
Impostare la proprietà FillBehavior dell'animazione su Stop
Impostando la proprietà FillBehavior su Stop, si indica all'animazione di interrompere l'effetto sulla proprietà di destinazione una volta raggiunta la fine del periodo attivo.
<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;
}
Rimuovere l'intero storyboard
Se si utilizza un trigger RemoveStoryboard o il metodo Storyboard.Remove, si indica alle animazioni dello storyboard di interrompere l'effetto sulle proprietà di destinazione. La differenza tra questo approccio e l'impostazione della proprietà FillBehavior consiste nel fatto che lo storyboard può essere rimosso in qualsiasi momento, mentre la proprietà FillBehavior ha effetto solo quando l'animazione raggiunge la fine del periodo attivo.
<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;
}
Rimuovere un'animazione da una singola proprietà
Un'altra tecnica per interrompere l'effetto di un'animazione su una proprietà consiste nell'utilizzare il metodo BeginAnimation(DependencyProperty, AnimationTimeline) dell'oggetto animato. Specificare la proprietà a cui si sta aggiungendo un'animazione come primo parametro e null come secondo.
<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;
}
Questa tecnica funziona anche per le animazioni non storyboard.
Vedere anche
Concetti
Cenni preliminari sull'animazione
Cenni preliminari sulle tecniche di animazione delle proprietà