Was this page helpful?
Your feedback about this content is important. Let us know what you think.
Additional feedback?
1500 characters remaining
Export (0) Print
Expand All

Timeline.Completed Event

Occurs when this timeline has completely finished playing: it will no longer enter its active period.

Namespace: System.Windows.Media.Animation
Assembly: PresentationCore (in presentationcore.dll)
XML Namespace:  http://schemas.microsoft.com/winfx/2006/xaml/presentation

public event EventHandler Completed
/** @event */
public void add_Completed (EventHandler value)

/** @event */
public void remove_Completed (EventHandler value)

In JScript, you can handle the events defined by a class, but you cannot define your own.
<object Completed="EventHandler" .../>

If this timeline is the root timeline of a timeline tree, it has completed playing after it reaches the end of its active period (which includes repeats) and all its children have reached the end of their active periodss. If this timeline is a child timeline, it is considered to have completely finished playing when the root timeline of the timeline tree to which it belongs reaches the end of its active period and all its child timelines have finished playing.

Stopping a timeline does not trigger its completed event, but skipping it to its fill period does.

The Object parameter of the EventHandler event handler is the timeline's Clock.

Although this event handler appears to be associated with a timeline, it actually registers with the Clock created for this timeline. For more information, see the Timing Events Overview.

The Completed event notifies you when a Timeline completes. A timeline is considered to have completed after it has reached the end of its active period and will no longer play unless interactively restarted. Note that "completed" is not the same as "stopped playing": stopping a timeline does not trigger the Completed event (but skipping to the timeline's fill period does).

In the following example, two Storyboard objects are used to create an animation transition between two images, stored using ImageSource objects and displayed using an Image control. One storyboard shrinks the image control until it disappears. After it completes, the old ImageSource is swapped with the other ImageSource, and a second storyboard that expands the image control until it is full-sized again.

<!-- TimelineCompletedExample.xaml 
     This example creates an animated transition between
     two images. When the user clicks the Start Transition button,
     a storyboard shrinks an image until it disappears. 
     The Completed event is used to notify the class when this
     storyboard has completed. The code behind file handles
     this event by swapping the image and making it visible again.
-->
<Page xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
  xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
  x:Class="SDKSample.TimelineCompletedExample"
  WindowTitle="Timeline Completed Example"
  Loaded="exampleLoaded">
  <Page.Resources>

    <!-- A simple picture of a rectangle. -->
    <DrawingImage x:Key="RectangleDrawingImage">
      <DrawingImage.Drawing>
        <DrawingGroup>
          <GeometryDrawing Brush="White">
            <GeometryDrawing.Geometry>
              <RectangleGeometry Rect="0,0,100,100"  />
            </GeometryDrawing.Geometry>
          </GeometryDrawing>
          <GeometryDrawing Brush="Orange">
            <GeometryDrawing.Geometry>
              <RectangleGeometry Rect="25,25,50,50"  />
            </GeometryDrawing.Geometry>
          </GeometryDrawing>
        </DrawingGroup>
      </DrawingImage.Drawing>
    </DrawingImage>

    <!-- A simple picture of a cirlce. -->
    <DrawingImage x:Key="CircleDrawingImage">
      <DrawingImage.Drawing>
        <DrawingGroup>
          <GeometryDrawing Brush="White">
            <GeometryDrawing.Geometry>
              <RectangleGeometry Rect="0,0,100,100"  />
            </GeometryDrawing.Geometry>
          </GeometryDrawing>
          <GeometryDrawing>
            <GeometryDrawing.Geometry>
              <EllipseGeometry Center="50,50" RadiusX="25" RadiusY="25"  />
            </GeometryDrawing.Geometry>
            <GeometryDrawing.Brush>
              <RadialGradientBrush GradientOrigin="0.75,0.25" Center="0.75,0.25">
                <GradientStop Offset="0.0" Color="White" />
                <GradientStop Offset="1.0" Color="LimeGreen" />
              </RadialGradientBrush>
            </GeometryDrawing.Brush>
          </GeometryDrawing>
        </DrawingGroup>
      </DrawingImage.Drawing>
    </DrawingImage>

    <!-- Define the storyboard that enlarges the image.
         This storyboard is applied using code when
         ZoomOutStoryboard completes. -->
    <Storyboard x:Key="ZoomInStoryboardResource">
      <DoubleAnimation 
        Storyboard.TargetName="AnimatedImageScaleTranform" 
        Storyboard.TargetProperty="ScaleX" 
        Duration="0:0:5" To="1" />
      <DoubleAnimation 
       Storyboard.TargetName="AnimatedImageScaleTranform" 
       Storyboard.TargetProperty="ScaleY" 
       Duration="0:0:5" To="1" />
    </Storyboard>
  </Page.Resources>

  <StackPanel Margin="20" >
    <Border 
      BorderBrush="Gray" BorderThickness="2" 
      HorizontalAlignment="Center" VerticalAlignment="Center">

      <!-- Displays the current ImageSource. -->
      <Image
        Name="AnimatedImage" 
        Width="200" Height="200"
        RenderTransformOrigin="0.5,0.5">
        <Image.RenderTransform>
          <ScaleTransform x:Name="AnimatedImageScaleTranform" 
            ScaleX="1" ScaleY="1" />
        </Image.RenderTransform>
      </Image>
    </Border>


    <!-- This StackPanel contains buttons that control the storyboard. -->
    <StackPanel Orientation="Horizontal" Margin="0,30,0,0">

      <Button Name="BeginButton">Start Transition</Button>
      <Button Name="SkipToFillButton">Skip To Fill</Button>
      <Button Name="StopButton">Stop</Button>

      <StackPanel.Triggers>

        <!-- Begin the storyboard that shrinks the image. After the storyboard
             completes, -->
        <EventTrigger RoutedEvent="Button.Click" SourceName="BeginButton">
          <BeginStoryboard Name="ZoomOutBeginStoryboard">
            <Storyboard x:Name="ZoomOutStoryboard" 
              Completed="zoomOutStoryboardCompleted" FillBehavior="Stop">
              <DoubleAnimation 
                Storyboard.TargetName="AnimatedImageScaleTranform" 
                Storyboard.TargetProperty="ScaleX" 
                Duration="0:0:5" To="0" FillBehavior="Stop" />
              <DoubleAnimation 
               Storyboard.TargetName="AnimatedImageScaleTranform" 
               Storyboard.TargetProperty="ScaleY" 
               Duration="0:0:5" To="0" FillBehavior="Stop" />
            </Storyboard>
          </BeginStoryboard>
        </EventTrigger>

        <!-- Advances ZoomOutStoryboard to its fill period.
             This action triggers the Completed event. -->
        <EventTrigger RoutedEvent="Button.Click" SourceName="SkipToFillButton">
          <SkipStoryboardToFill BeginStoryboardName="ZoomOutBeginStoryboard" />
        </EventTrigger>

        <!-- Stops the storyboard. This action does not
             trigger the completed event. -->
        <EventTrigger RoutedEvent="Button.Click" SourceName="StopButton">
          <StopStoryboard BeginStoryboardName="ZoomOutBeginStoryboard" />
        </EventTrigger>
      </StackPanel.Triggers>
    </StackPanel>
  </StackPanel>
</Page>

// TimelineCompletedExample.xaml.cs
// Handles the ZoomOutStoryboard's Completed event.
// See the TimelienCompletedExample.xaml file
// for the markup that creates the images and storyboards.

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


namespace SDKSample
{

    public partial class TimelineCompletedExample : Page
    {
        
        private Storyboard zoomInStoryboard;
        private ImageSource currentImageSource;
        private ImageSource nextImageSource;

        public TimelineCompletedExample()
        {
            InitializeComponent();
        }

        private void exampleLoaded(object sender, RoutedEventArgs e)
        {
            // Cache the zoom-out storyboard resource.
            zoomInStoryboard = 
                (Storyboard) this.Resources["ZoomInStoryboardResource"];

            // Cache the ImageSource resources.
            currentImageSource = 
                (ImageSource) this.Resources["RectangleDrawingImage"];
            nextImageSource = 
                (ImageSource) this.Resources["CircleDrawingImage"];

            // Display the current image source.
            AnimatedImage.Source = currentImageSource;
        }

        // Handles the zoom-out storyboard's completed event. 
        private void zoomOutStoryboardCompleted(object sender, EventArgs e)
        {
            AnimatedImage.Source = nextImageSource;
            nextImageSource = currentImageSource;
            currentImageSource = AnimatedImage.Source;
            zoomInStoryboard.Begin(AnimatedImage, HandoffBehavior.SnapshotAndReplace);
        }

    }
}

For more information about timing events, see the Timing Events Overview.

Windows 98, Windows Server 2000 SP4, Windows CE, Windows Millennium Edition, Windows Mobile for Pocket PC, Windows Mobile for Smartphone, Windows Server 2003, Windows XP Media Center Edition, Windows XP Professional x64 Edition, Windows XP SP2, Windows XP Starter Edition

The Microsoft .NET Framework 3.0 is supported on Windows Vista, Microsoft Windows XP SP2, and Windows Server 2003 SP1.

.NET Framework

Supported in: 3.0

Community Additions

ADD
Show:
© 2015 Microsoft