Handoff Behavior in WPF Animation

Animation in WPF application has few major hurdles when it is not used in optimally. For public applications, you need to give more stress on performance of the UI. If you use animation for your application, you need to ensure that it goes smoothly. Certain abrupt change in animation may sometimes produce rusty animation for your application. Lets look how to deal with such situations.


<Style x:Key="BorderStyle2" TargetType="{x:Type Border}">
            <Setter Property="Background" Value="Blue" />
            <Setter Property="Border.RenderTransform">
                <Setter.Value>
                    <ScaleTransform CenterX="50" CenterY="50" ScaleX="1" ScaleY="1" />
                </Setter.Value>
            </Setter>
            <Style.Triggers>
                <EventTrigger RoutedEvent="Mouse.MouseEnter">
                    <EventTrigger.Actions>
                        <BeginStoryboard >
                            <Storyboard>
                                <DoubleAnimation Duration="0:0:2" Storyboard.TargetProperty="RenderTransform.ScaleX" To="3"  />
                                <DoubleAnimation Duration="0:0:2" Storyboard.TargetProperty="RenderTransform.ScaleY" To="3"  />
                            </Storyboard>
                        </BeginStoryboard>
                    </EventTrigger.Actions>
                </EventTrigger>
                <EventTrigger RoutedEvent="Mouse.MouseLeave">
                    <EventTrigger.Actions>
                        <BeginStoryboard>
                            <Storyboard>
                                <DoubleAnimation Duration="0:0:2" Storyboard.TargetProperty="RenderTransform.ScaleX" />
                                <DoubleAnimation Duration="0:0:2" Storyboard.TargetProperty="RenderTransform.ScaleY" />
                            </Storyboard>
                        </BeginStoryboard>
                    </EventTrigger.Actions>
                </EventTrigger>
            </Style.Triggers>
        </Style>
<Border Style="{StaticResource BorderStyle2}" Canvas.Top="100" Canvas.Left="200" Width="100" Height="100" />

In the above code, I have put a Style for my Border in Blue which Scale itself to 3 times when mouse is hovered over the control and returns to the original size when it is moved out of the control. This is the most common set of animation that you might have used most often. I have used EventTrigger to trigger event when MouseEnter and MouseLeave occurs, which ensures that Animation begins on those events.

The animation looks very simple and works great, but it had major performance issues. Say you turn the mouse over the control, the Control starts the animation generates the Scaling, but eventually turns on the Scale down algorithm just before the Scaleup event finishes. As a result, you get an overlapping animation at certain range of clock.

To improve the performance of the animation, each animation exposes Handoff behavior. The default style of ScaleAndReplace handoff behavior replace the animation immediately resulting a jerky animation, as the button is not scaled up to 3 when the second animation did started.

On the other hand, if you use Compose, it combines both the animation Clock times and generates a smooth animation. Just in the second Border :

<Style x:Key="BorderStyle1" TargetType="{x:Type Border}">
            <Setter Property="Background" Value="Green"/>
            <Setter Property="Border.RenderTransform">
                <Setter.Value>
                    <ScaleTransform CenterX="50" CenterY="50" ScaleX="1" ScaleY="1" />
                </Setter.Value>
            </Setter>
            <Style.Triggers>
                <EventTrigger RoutedEvent="Mouse.MouseEnter">
                    <EventTrigger.Actions>
                        <BeginStoryboard >
                            <Storyboard>
                                <DoubleAnimation Duration="0:0:2" Storyboard.TargetProperty="RenderTransform.ScaleX" To="3"  />
                                <DoubleAnimation Duration="0:0:2" Storyboard.TargetProperty="RenderTransform.ScaleY" To="3"  />
                            </Storyboard>
                        </BeginStoryboard>
                    </EventTrigger.Actions>
                </EventTrigger>
                <EventTrigger RoutedEvent="Mouse.MouseLeave">
                    <EventTrigger.Actions>
                        <BeginStoryboard HandoffBehavior="Compose">
                            <Storyboard>
                                <DoubleAnimation Duration="0:0:2" Storyboard.TargetProperty="RenderTransform.ScaleX" />
                                <DoubleAnimation Duration="0:0:2" Storyboard.TargetProperty="RenderTransform.ScaleY" />
                            </Storyboard>
                        </BeginStoryboard>
                    </EventTrigger.Actions>
                </EventTrigger>
            </Style.Triggers>
        </Style>
<Border Style="{StaticResource BorderStyle1}" Canvas.Top="100" Canvas.Left="100" Width="100" Height="100" />

The HandoffBehavior is set to Compose which results a smooth animation in case of overlapping storyboards.

So it is always better to use HandoffBehavior to Compose when you have a scenario with overlapping animation.

Download Sample – 30KB

Abhishek Sur

Abhishek Sur is a Microsoft MVP since year 2011. He is an architect in the .NET platform. He has profound theoretical insight and years of hands on experience in different .NET products and languages. He leads the Microsoft User Group in Kolkata named KolkataGeeks, and regularly organizes events and seminars in various places for spreading .NET awareness. He is associated with the Microsoft Insider list on WPF and C#, and is in constant touch with product group teams. He blogs at http://www.abhisheksur.com His Book : Visual Studio 2012 and .NET 4.5 Expert Development Cookbook. Follow Abhishek at Twitter : @abhi2434

2 Comments to “Handoff Behavior in WPF Animation”

Comments are closed.