How to: Recieve Notification When a Timeline Completes

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.
--><Pagexmlns="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. --><DrawingImagex:Key="RectangleDrawingImage"><DrawingImage.Drawing><DrawingGroup><GeometryDrawingBrush="White"><GeometryDrawing.Geometry><RectangleGeometryRect="0,0,100,100"/></GeometryDrawing.Geometry></GeometryDrawing><GeometryDrawingBrush="Orange"><GeometryDrawing.Geometry><RectangleGeometryRect="25,25,50,50"/></GeometryDrawing.Geometry></GeometryDrawing></DrawingGroup></DrawingImage.Drawing></DrawingImage><!-- A simple picture of a cirlce. --><DrawingImagex:Key="CircleDrawingImage"><DrawingImage.Drawing><DrawingGroup><GeometryDrawingBrush="White"><GeometryDrawing.Geometry><RectangleGeometryRect="0,0,100,100"/></GeometryDrawing.Geometry></GeometryDrawing><GeometryDrawing><GeometryDrawing.Geometry><EllipseGeometryCenter="50,50"RadiusX="25"RadiusY="25"/></GeometryDrawing.Geometry><GeometryDrawing.Brush><RadialGradientBrushGradientOrigin="0.75,0.25"Center="0.75,0.25"><GradientStopOffset="0.0"Color="White"/><GradientStopOffset="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. --><Storyboardx:Key="ZoomInStoryboardResource"><DoubleAnimationStoryboard.TargetName="AnimatedImageScaleTranform"Storyboard.TargetProperty="ScaleX"Duration="0:0:5"To="1"/><DoubleAnimationStoryboard.TargetName="AnimatedImageScaleTranform"Storyboard.TargetProperty="ScaleY"Duration="0:0:5"To="1"/></Storyboard></Page.Resources><StackPanelMargin="20"><BorderBorderBrush="Gray"BorderThickness="2"HorizontalAlignment="Center"VerticalAlignment="Center"><!-- Displays the current ImageSource. --><ImageName="AnimatedImage"Width="200"Height="200"RenderTransformOrigin="0.5,0.5"><Image.RenderTransform><ScaleTransformx:Name="AnimatedImageScaleTranform"ScaleX="1"ScaleY="1"/></Image.RenderTransform></Image></Border><!-- This StackPanel contains buttons that control the storyboard. --><StackPanelOrientation="Horizontal"Margin="0,30,0,0"><ButtonName="BeginButton">Start Transition</Button><ButtonName="SkipToFillButton">Skip To Fill</Button><ButtonName="StopButton">Stop</Button><StackPanel.Triggers><!-- Begin the storyboard that shrinks the image. After the storyboard
completes, --><EventTriggerRoutedEvent="Button.Click"SourceName="BeginButton"><BeginStoryboardName="ZoomOutBeginStoryboard"><Storyboardx:Name="ZoomOutStoryboard"Completed="zoomOutStoryboardCompleted"FillBehavior="Stop"><DoubleAnimationStoryboard.TargetName="AnimatedImageScaleTranform"Storyboard.TargetProperty="ScaleX"Duration="0:0:5"To="0"FillBehavior="Stop"/><DoubleAnimationStoryboard.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. --><EventTriggerRoutedEvent="Button.Click"SourceName="SkipToFillButton"><SkipStoryboardToFillBeginStoryboardName="ZoomOutBeginStoryboard"/></EventTrigger><!-- Stops the storyboard. This action does not
trigger the completed event. --><EventTriggerRoutedEvent="Button.Click"SourceName="StopButton"><StopStoryboardBeginStoryboardName="ZoomOutBeginStoryboard"/></EventTrigger></StackPanel.Triggers></StackPanel></StackPanel></Page>