Jak ustawić właściwość po zanimowaniu jej za pomocą scenorysu

Artykuł
10/18/2023

W niektórych przypadkach może się wydawać, że nie można zmienić wartości właściwości po jej animowanym.

Animowanie koloru solidColorBrush

W poniższym przykładzie element jest Storyboard używany do animowania koloru elementu SolidColorBrush. Scenorys jest wyzwalany po kliknięciu przycisku. Zdarzenie Completed jest obsługiwane, aby program był powiadamiany po zakończeniu 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>

Zmienianie koloru pędzla

Po zakończeniu ColorAnimation program próbuje zmienić kolor pędzla na niebieski.

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

Poprzedni kod nie wydaje się nic robić: szczotka pozostaje żółta, czyli wartością dostarczaną przez ColorAnimation ten animowany pędzl. Wartość właściwości bazowej (wartość podstawowa) jest rzeczywiście zmieniana na niebieską. Jednak efektywna lub bieżąca wartość pozostaje żółta, ponieważ ColorAnimation wartość jest nadal zastępowana wartością bazową. Jeśli chcesz, aby wartość podstawowa stała się ponownie efektywną wartością, musisz zatrzymać animację przed wpływem na właściwość. Istnieją trzy sposoby, aby to zrobić za pomocą animacji scenorysu:

Ustaw właściwość animacji FillBehavior na Stop
Usuń cały scenorys.
Usuń animację z właściwości indywidualnej.

Ustaw właściwość FillBehavior animacji na Stop

FillBehavior StopUstawiając wartość , informujesz animację, aby przestała wpływać na jej właściwość docelową po osiągnięciu końca jego aktywnego okresu.

<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

Usuwanie całej scenorysu

Korzystając z RemoveStoryboard wyzwalacza lub Storyboard.Remove metody, opowiadasz animacje scenorysu, aby przestać wpływać na ich właściwości docelowe. Różnica między tym podejściem a ustawieniem FillBehavior właściwości polega na tym, że można usunąć scenorys w dowolnym momencie, podczas gdy FillBehavior właściwość ma wpływ tylko wtedy, gdy animacja osiągnie koniec aktywnego okresu.

<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

Usuwanie animacji z pojedynczej właściwości

Inną techniką, która uniemożliwia animację wpływania na właściwość, jest użycie BeginAnimation(DependencyProperty, AnimationTimeline) metody animowanego obiektu. Określ właściwość, która jest animowana jako pierwszy parametr i null jako drugi.

<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

Ta technika działa również w przypadku animacji innych niż scenorysy.

Udostępnij za pośrednictwem