Sdílet prostřednictvím

Pokyny k: Nastavení vlastnosti po jejím animování pomocí Storyboardu

  • Článek

V některých případech se může zdát, že po animaci nelze změnit hodnotu vlastnosti.

Animovat barvu štětce SolidColorBrush

V následujícím příkladu se Storyboard používá k animaci barvy SolidColorBrush. Scénář se aktivuje po kliknutí na tlačítko. Událost Completed je zpracována tak, aby program byl upozorněn na dokončení ColorAnimation.

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

Změna barvy štětce

Po dokončení ColorAnimation se program pokusí změnit barvu štětce na modrou.

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

Předchozí kód zdánlivě nic nedělá: štětec zůstává žlutý, což je hodnota určená ColorAnimation, která určila animaci štětce. Hodnota základní vlastnosti (základní hodnota) se ve skutečnosti změní na modrou. Efektivní nebo aktuální hodnota však zůstává žlutá, protože ColorAnimation stále přepisuje základní hodnotu. Pokud chcete, aby se základní hodnota stala účinnou hodnotou znovu. Je nutné zastavit ovlivňování vlastnosti animací. Existují tři způsoby, jak to udělat pomocí animací scénáře:

  • Nastavte vlastnost FillBehavior animace na Stop

  • Odstraňte celý Storyboard.

  • Odeberte animaci z jednotlivé vlastnosti.

Nastavení vlastnosti FillBehavior animace na Hodnotu Stop

Nastavením FillBehavior na Stopřeknete animaci, aby přestala mít vliv na jeho cílovou vlastnost, jakmile dosáhne konce aktivního období.

<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

Odstraňte celý storyboard

Pomocí triggeru RemoveStoryboard nebo metody Storyboard.Remove řeknete animacím scénáře, aby přestaly ovlivňovat jejich cílové vlastnosti. Rozdíl mezi tímto přístupem a nastavením vlastnosti FillBehavior spočívá v tom, že scénář můžete kdykoli odebrat, zatímco vlastnost FillBehavior má efekt pouze v případě, že animace dosáhne konce aktivního období.

<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

Odstranit animaci z jednotlivé vlastnosti

Další technikou zastavení animace, která ovlivňuje vlastnost, je použití BeginAnimation(DependencyProperty, AnimationTimeline) metody animace objektu. Zadejte vlastnost, která se bude animovat jako první parametr, a jako druhý parametr null.

<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

Tato technika funguje také pro animace, které nejsou scénářem.

Viz také