How to: Receive Notification When a Clock's State Changes

A clock's CurrentStateInvalidated event occurs when its CurrentState becomes invalid, such as when the clock starts or stops. You can register for this event with directly using a Clock, or you can register using a Timeline.

In the following example, a Storyboard and two DoubleAnimation objects are used to animate the width of two rectangles. The CurrentStateInvalidated event is used to listen for clock state changes.

Example

<Page xmlns="https://schemas.microsoft.com/winfx/2006/xaml/presentation" 
  xmlns:x="https://schemas.microsoft.com/winfx/2006/xaml" 
  x:Class="Microsoft.Samples.Animation.TimingBehaviors.StateExample"
  Background="LightGray">
  <StackPanel Margin="20">
  
    <TextBlock 
      Name="ParentTimelineStateTextBlock"></TextBlock>
    <TextBlock 
      Name="Animation1StateTextBlock"></TextBlock>
    <Rectangle 
      Name="Rectangle01"
      Width="100" Height="50" Fill="Orange" />    
    <TextBlock Name="Animation2StateTextBlock"></TextBlock>
    <Rectangle 
      Name="Rectangle02"
      Width="100" Height="50" Fill="Gray" />  
      
    <Button Content="Start Animations" Margin="20">
      <Button.Triggers>
        <EventTrigger RoutedEvent="Button.Click">
          <BeginStoryboard>
            <Storyboard RepeatBehavior="2x" AutoReverse="True"
              CurrentStateInvalidated="parentTimelineStateInvalidated" >
              <DoubleAnimation
                Storyboard.TargetName="Rectangle01"
                Storyboard.TargetProperty="Width"
                From="10" To="200" Duration="0:0:9"
                BeginTime="0:0:1" 
                CurrentStateInvalidated="animation1StateInvalidated"/>
              <DoubleAnimation
                Storyboard.TargetName="Rectangle02"
                Storyboard.TargetProperty="Width"
                From="10" To="200" Duration="0:0:8"
                BeginTime="0:0:1" 
                CurrentStateInvalidated="animation2StateInvalidated" />            
            </Storyboard>
          </BeginStoryboard>
        </EventTrigger>
      </Button.Triggers>
    </Button>
  
  
  </StackPanel>
</Page>

using System;
using System.Windows;
using System.Windows.Controls;
using System.Windows.Media;
using System.Windows.Media.Animation;

namespace Microsoft.Samples.Animation.TimingBehaviors
{

    public partial class StateExample : Page
    {        
        
        private void parentTimelineStateInvalidated(object sender, EventArgs args)
        {
            Clock myClock = (Clock)sender;
            ParentTimelineStateTextBlock.Text += 
                myClock.CurrentTime.ToString() + ":" 
                + myClock.CurrentState.ToString() + " ";        
        }
        
        private void animation1StateInvalidated(object sender, EventArgs args)
        {
        
            Clock myClock = (Clock)sender;
            
            Animation1StateTextBlock.Text += 
                myClock.Parent.CurrentTime.ToString() + ":" 
                + myClock.CurrentState.ToString() + " ";     
        }
        
        private void animation2StateInvalidated(object sender, EventArgs args)
        {

            Clock myClock = (Clock)sender;
            Animation2StateTextBlock.Text += 
                myClock.Parent.CurrentTime.ToString() + ":" 
                + myClock.CurrentState.ToString() + " ";                 
        }
    }
}

The following illustration shows the different states the animations enter as the parent timeline (Storyboard) progresses.

The following table shows the times at which Animation1's CurrentStateInvalidated event fires:

Time (Seconds)	1	10	19	21	30	39
State	Active	Active	Stopped	Active	Active	Stopped

The following table shows the times at which Animation2's CurrentStateInvalidated event fires:

Time (Seconds)	1	9	11	19	21	29	31	39
State	Active	Filling	Active	Stopped	Active	Filling	Active	Stopped

Notice that Animation1's CurrentStateInvalidated event fires at 10 seconds, even though its state remains Active. That's because its state changed at 10 seconds, but it changed from Active to Filling and then back to Active in the same tick.