How to: Specify HandoffBehavior Between Storyboard Animations

This example shows how to specify handoff behavior between storyboard animations. The HandoffBehavior property of BeginStoryboard specifies how new animations interact with any existing ones that are already applied to a property.

The following example creates two buttons that enlarge when the mouse cursor moves over them and become smaller when the cursor moves away. If you mouse over a button and then quickly remove the cursor, the second animation will be applied before the first one is finished. It is when two animations overlap like this that you can see the difference between the HandoffBehavior values of Compose and SnapshotAndReplace. A value of Compose combines the overlapping animations causing a smoother transition between animations while a value of SnapshotAndReplace causes the new animation to immediately replace the earlier overlapping animation.

<Pagexmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"><Page.Resources><!-- This Style specifies mouseover and mouseout behaviors. The button gets larger when
the cursor moves over it and smaller when the cursor moves away. Note that the same Properties
(ScaleX and ScaleY) are being targeted by both animations. The BeginStoryboard for each animation
uses a HandoffBehavior of "Compose" which causes the old animation to interpolate more gradually into
the new one. --><Stylex:Key="ButtonWithCompose"TargetType="{x:Type Button}"><SetterProperty="Button.RenderTransform"><Setter.Value><ScaleTransformCenterX="50"CenterY="50"ScaleX="1"ScaleY="1"/></Setter.Value></Setter><Style.Triggers><EventTriggerRoutedEvent="Mouse.MouseEnter"><EventTrigger.Actions><BeginStoryboard><Storyboard><DoubleAnimationDuration="0:0:2"Storyboard.TargetProperty="RenderTransform.ScaleX"To="3"/><DoubleAnimationDuration="0:0:2"Storyboard.TargetProperty="RenderTransform.ScaleY"To="3"/></Storyboard></BeginStoryboard></EventTrigger.Actions></EventTrigger><EventTriggerRoutedEvent="Mouse.MouseLeave"><EventTrigger.Actions><BeginStoryboardHandoffBehavior="Compose"><Storyboard><DoubleAnimationDuration="0:0:2"Storyboard.TargetProperty="RenderTransform.ScaleX"/><DoubleAnimationDuration="0:0:2"Storyboard.TargetProperty="RenderTransform.ScaleY"/></Storyboard></BeginStoryboard></EventTrigger.Actions></EventTrigger></Style.Triggers></Style><!-- For this button style, BeginStoryboard uses the default HandoffBehavior of "SnapShotAndReplace" --><Stylex:Key="ButtonWithSnapShotAndReplace"TargetType="{x:Type Button}"><SetterProperty="Button.RenderTransform"><Setter.Value><ScaleTransformCenterX="50"CenterY="50"ScaleX="1"ScaleY="1"/></Setter.Value></Setter><Style.Triggers><EventTriggerRoutedEvent="Mouse.MouseEnter"><EventTrigger.Actions><BeginStoryboard><Storyboard><DoubleAnimationDuration="0:0:2"Storyboard.TargetProperty="RenderTransform.ScaleX"To="3"/><DoubleAnimationDuration="0:0:2"Storyboard.TargetProperty="RenderTransform.ScaleY"To="3"/></Storyboard></BeginStoryboard></EventTrigger.Actions></EventTrigger><EventTriggerRoutedEvent="Mouse.MouseLeave"><EventTrigger.Actions><BeginStoryboard><Storyboard><DoubleAnimationDuration="0:0:2"Storyboard.TargetProperty="RenderTransform.ScaleX"/><DoubleAnimationDuration="0:0:2"Storyboard.TargetProperty="RenderTransform.ScaleY"/></Storyboard></BeginStoryboard></EventTrigger.Actions></EventTrigger></Style.Triggers></Style></Page.Resources><Canvas><ButtonStyle="{StaticResource ButtonWithSnapShotAndReplace}"Canvas.Top="200"Canvas.Left="200"Width="100"Height="100">
SnapShotAndReplace
</Button><ButtonStyle="{StaticResource ButtonWithCompose}"Canvas.Top="200"Canvas.Left="400"Width="100"Height="100">
Compose
</Button></Canvas></Page>