Nasıl yapılır: Görsel Taslakla Özelliğe Animasyon Ekledikten Sonra Ayarlama
Bazı durumlarda, bir özelliğin değerini animasyonlu olarak değiştiremiyor gibi görünebilir.
Örnek
Aşağıdaki örnekte, bir Storyboard rengine animasyon animasyonu yapmak için SolidColorBrush kullanılır. Storyboard, düğmeye tıkıldığında tetiklenir. CompletedOlay, tamamlandığında programın bildirilecek şekilde ele ColorAnimation alındı.
<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>
Örnek
Tamamlandıktan ColorAnimation sonra program fırçanın rengini mavi olarak değiştirmeye çalışır.
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
Önceki kod hiçbir şey yapacak gibi görünmüyor: fırça sarı kalır ve fırça animasyonlu fırça ColorAnimation tarafından sağlanan değerdir. Temel alınan özellik değeri (temel değer) aslında mavi olarak değiştirilir. Ancak geçerli veya geçerli değer, hala temel değeri geçersiz k olduğu ColorAnimation için sarı kalır. Temel değerin yeniden etkili değer haline dönüşene kadar animasyonun özelliği etkilemesini durdurmanız gerekir. Bunu görsel film şeridi animasyonları ile yapmak için üç yol vardır:
Animasyonun özelliğini FillBehavior olarak ayarlayın Stop
Tüm Storyboard'ı kaldırın.
Animasyonu tek tek özellikten kaldırın.
Animasyonun FillBehavior özelliğini Stop olarak ayarlayın
olarak ayarerek, animasyona etkin döneminin sonuna ulaştıktan sonra hedef özelliğini FillBehaviorStop etkilemeyi durdurmasını söylersiniz.
<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
Tüm storyboard'ları kaldırma
Bir tetikleyici RemoveStoryboard veya yöntemi kullanarak, görsel pano animasyonlarına hedef özelliklerini Storyboard.Remove etkilemeyi durdurmalarını söylersiniz. Bu yaklaşım ile özelliği ayarlama arasındaki fark, görsel şeridi dilediğiniz zaman kaldırabilirsiniz, ancak özelliğin yalnızca animasyon etkin döneminin sonuna ulaştığında FillBehaviorFillBehavior bir etkisi olur.
<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
Tek bir özellikten animasyon kaldırma
Bir animasyonun özelliği etkilemesini durdurmanın başka bir tekniği de animasyonlu BeginAnimation(DependencyProperty, AnimationTimeline) nesnenin yöntemini kullanmaktır. İlk parametre olarak animasyonlu özelliği ve ikinci null parametre olarak belirtin.
<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
Bu teknik, görsel görsel olmayan animasyonlar için de çalışır.