Så här gör du: Ställ in en egenskap efter att ha animerat den med ett storyboard

2025-05-07

I vissa fall kan det verka som om du inte kan ändra värdet för en egenskap efter att den har animerats.

Animera färgen på en SolidColorBrush

I följande exempel används en Storyboard för att animera färgen på en SolidColorBrush. Storyboard utlöses när knappen klickas. Händelsen Completed hanteras så att programmet meddelas när det ColorAnimation är klart.

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

Ändra penselfärgen

När det ColorAnimation är klart försöker programmet ändra penselns färg till blå.

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

Den föregående koden verkar inte göra något: penseln förblir gul, vilket är det värde som tillhandahålls av den ColorAnimation animerade penseln. Det underliggande egenskapsvärdet (basvärdet) ändras faktiskt till blått. Det effektiva eller aktuella värdet förblir dock gult eftersom ColorAnimation det fortfarande överskrider basvärdet. Om du vill att basvärdet ska bli det effektiva värdet igen måste du stoppa animeringen från att påverka egenskapen. Det finns tre sätt att göra detta med storyboard-animeringar:

Ange animeringens FillBehavior egenskap till Stop
Ta bort hela Storyboard.
Ta bort animeringen från den enskilda egenskapen.

Ställ in animeringens fillbehavior-egenskap på Stoppa

Genom att ange FillBehavior till Stopuppmanar du animeringen att sluta påverka dess målegenskap när den når slutet av den aktiva perioden.

<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

Ta bort hela storyboarden

Genom att använda en RemoveStoryboard utlösare eller Storyboard.Remove -metod kan du be storyboard-animeringarna att sluta påverka deras målegenskaper. Skillnaden mellan den här metoden och att ange FillBehavior egenskapen är att du kan ta bort storyboarden när som helst, medan FillBehavior egenskapen bara har en effekt när animeringen når slutet av den aktiva perioden.

<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

Ta bort en animering från en enskild egenskap

En annan teknik för att stoppa en animering från att påverka en egenskap är att använda BeginAnimation(DependencyProperty, AnimationTimeline) metoden för objektet som animerats. Ange egenskapen som animeras som första parameter och null som den andra.

<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

Den här tekniken fungerar också för animeringar som inte är storyboard-

Se även

Feedback

Var den här sidan till hjälp?