Completed

Completed Event

Occurs when the Storyboard has completed playing.

XAML	<object Completed="eventhandlerFunction" .../>
Scripting	[token = ]object.AddEventListener("Completed", eventhandlerFunction)

AddEventListener Parameters

token

integer

A token that is returned from the function, which you can optionally retain as a variable. If you intend to call RemoveEventListener to remove the handler, you will need this token.

eventhandlerFunction

object

The name of your event handler function as it is defined in script. When used as an AddEventListener parameter, quotes around the function name are not required. See Remarks.

Event Handler Parameters

sender

object

Identifies the object that invoked the event.

eventArgs

object

This parameter is always set to null.

Remarks

A Storyboard 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 periods. Interactively stopping a Storyboard does not trigger its completed event.

You can also add handlers in script using a quoted string for the event handler name:

object.AddEventListener("Completed", "eventhandlerFunction")

This syntax also returns a token; however, the token is not an absolute requirement for removing the handler, in cases where the handler was added by using a quoted string. For details, see RemoveEventListener.

Examples

The following example fires the Completed event after a Storyboard ends.

XAML
<Canvas xmlns="http://schemas.microsoft.com/client/2007" xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml" Width="200" Height="200" Background="White" x:Name="Page"> <Canvas.Triggers> <EventTrigger RoutedEvent="Canvas.Loaded"> <BeginStoryboard> <Storyboard x:Name="ColorStoryboard" Completed="onCompleted"> <!-- Animate the background color of the canvas from red to green over 4 seconds. --> <ColorAnimation BeginTime="00:00:00" Storyboard.TargetName="Page" Storyboard.TargetProperty="(Panel.Background).(SolidColorBrush.Color)" From="Red" To="Green" Duration="0:0:4" /> </Storyboard> </BeginStoryboard> </EventTrigger> </Canvas.Triggers> </Canvas>

XAML

<Canvas
  xmlns="http://schemas.microsoft.com/client/2007"
  xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
  Width="200" Height="200"
  Background="White"
  x:Name="Page">
  <Canvas.Triggers>
    <EventTrigger RoutedEvent="Canvas.Loaded">
      <BeginStoryboard>
        <Storyboard x:Name="ColorStoryboard" Completed="onCompleted">

          <!-- Animate the background color of the canvas from red to green
               over 4 seconds. -->
          <ColorAnimation BeginTime="00:00:00" Storyboard.TargetName="Page" 
           Storyboard.TargetProperty="(Panel.Background).(SolidColorBrush.Color)"
           From="Red" To="Green" Duration="0:0:4" />

        </Storyboard>
      </BeginStoryboard>
    </EventTrigger>
  </Canvas.Triggers>
</Canvas>

JavaScript
function onCompleted(sender, eventArgs) { alert("Storyboard has completed!"); }

Applies To

Storyboard

AddEventListener Parameters

Event Handler Parameters

Remarks

Examples

Applies To

See Also