Share via

Nasıl yapılır: Görsel Taslakla Özelliğe Animasyon Ekledikten Sonra Ayarlama

  • Makale

Bazı durumlarda, animasyon oluşturulduktan sonra bir özelliğin değerini değiştiremeyebilirsiniz.

SolidColorBrush rengine animasyon ekleme

Aşağıdaki örnekte, bir Storyboard öğesinin rengine animasyon eklemek için kullanılır SolidColorBrush. Düğmeye tıklandığında görsel taslak tetikleniyor. Olay Completed , tamamlandığında programa bildirilmesi için ColorAnimation işlenir.

<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>

Fırça rengini değiştirme

ColorAnimation Tamamlandıktan 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 yapmıyor gibi görünüyor: fırça sarı kalır; bu, fırçayı animasyonlu yapan tarafından ColorAnimation 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ılması nedeniyle ColorAnimation sarı kalır. Temel değerin yeniden etkin değer olmasını istiyorsanız, animasyonunun özelliği etkilemesini durdurmanız gerekir. Bunu görsel taslak animasyonlarıyla yapmanın üç yolu vardır:

  • Animasyon FillBehavior özelliğini şu şekilde ayarlayın: Stop

  • Görsel Taslak'ın tamamını kaldırın.

  • Animasyonu tek tek özellikten kaldırın.

Animasyonunun FillBehavior özelliğini Durdur olarak ayarlayın

olarak ayarlayarak FillBehaviorStop, animasyona etkin süresinin sonuna ulaştıktan sonra hedef özelliğinin etkilenmesini 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

Görsel şeridin tamamını kaldırma

Tetikleyici RemoveStoryboard veya Storyboard.Remove yöntemi kullanarak görsel taslak animasyonlarına hedef özelliklerini etkilemeyi durdurmalarını söylersiniz. Bu yaklaşım ile özelliği ayarlama FillBehavior arasındaki fark, görsel taslakları istediğiniz zaman kaldırabilmenizdir, ancak özelliğin FillBehavior yalnızca animasyon etkin süresinin sonuna ulaştığında 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 durdurmak için kullanılan bir diğer teknik de animasyonlu nesnenin yöntemini kullanmaktır BeginAnimation(DependencyProperty, AnimationTimeline) . Animasyonlu özelliğini ilk parametre olarak, null ikinci 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 taslak olmayan animasyonlar için de çalışır.

Ayrıca bkz.