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.

Ayrıca bkz.