Silverlight: Multiple animations on one property through Transforms

When you create two or more animations that work on the same property of an object, Silverlight will only use the last of the defined animations.

By using transforms you’re able to achieve the same effect anyway. For instance, I’ve got a rectangle that slides up and down by using an animation that works on the Canvas.Top property:

<userControl x:Class="TestAnimationTransform.MainPage"
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
xmlns:d="http://schemas.microsoft.com/expression/blend/2008" xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
mc:Ignorable="d" d:DesignWidth="640" d:DesignHeight="480">
<userControl.Resources>
<storyboard x:Name="WaveTop" AutoReverse="True" RepeatBehavior="Forever">
<doubleAnimationUsingKeyFrames x:Name="WaveAnimationTop" BeginTime="00:00:00" Storyboard.TargetName="Rectangle" Storyboard.TargetProperty="(canvas.top)">
<easingDoubleKeyFrame KeyTime="00:00:00" Value="50">
<easingDoubleKeyFrame.EasingFunction>
<sineEase EasingMode="EaseInOut"/>
</easingDoubleKeyFrame.EasingFunction>
</easingDoubleKeyFrame>
<easingDoubleKeyFrame KeyTime="00:00:10" Value="400">
<easingDoubleKeyFrame.EasingFunction>
<sineEase EasingMode="EaseInOut"/>
</easingDoubleKeyFrame.EasingFunction>
</easingDoubleKeyFrame>
</doubleAnimationUsingKeyFrames>
</storyboard>
</userControl.Resources>
<canvas x:Name="LayoutRoot">
<rectangle x:Name="Rectangle" Fill="Blue" Width="50" Height="50" Canvas.Top="240" Canvas.Left="200">
</rectangle>
</canvas>
<userControl>

This will create an effect like this:

If I want to apply an animation that jiggles the rectangle back and forth over the X- and Y-axis, I can’t use the Canvas.Top property anymore. So instead, we’ll add a Transform to the object and animate the properties of the Transform:

<storyboard x:Name="WaveJiggle" AutoReverse="True" RepeatBehavior="Forever">
<doubleAnimationUsingKeyFrames x:Name="XAnimation" BeginTime="00:00:00" Storyboard.TargetName="TranslateTransform" Storyboard.TargetProperty="X">
<easingDoubleKeyFrame KeyTime="00:00:00" Value="20">
<easingDoubleKeyFrame.EasingFunction>
<sineEase EasingMode="EaseInOut"/>
</easingDoubleKeyFrame.EasingFunction>
</easingDoubleKeyFrame>
<easingDoubleKeyFrame KeyTime="00:00:01" Value="80">
<easingDoubleKeyFrame.EasingFunction>
<sineEase EasingMode="EaseInOut"/>
</easingDoubleKeyFrame.EasingFunction>
</easingDoubleKeyFrame>
</doubleAnimationUsingKeyFrames>
<doubleAnimationUsingKeyFrames x:Name="YAnimation" BeginTime="00:00:00" Storyboard.TargetName="TranslateTransform" Storyboard.TargetProperty="Y">
<easingDoubleKeyFrame KeyTime="00:00:00" Value="20">
<easingDoubleKeyFrame.EasingFunction>
<sineEase EasingMode="EaseInOut"/>
</easingDoubleKeyFrame.EasingFunction>
</easingDoubleKeyFrame>
<easingDoubleKeyFrame KeyTime="00:00:01" Value="80">
<easingDoubleKeyFrame.EasingFunction>
<sineEase EasingMode="EaseInOut"/>
</easingDoubleKeyFrame.EasingFunction>
</easingDoubleKeyFrame>
</doubleAnimationUsingKeyFrames>
</storyboard>
<rectangle x:Name="Rectangle" Fill="Blue" Width="50" Height="50" Canvas.Top="240" Canvas.Left="200">
<rectangle.RenderTransform>
<translateTransform X="50" Y="50" x:Name="TranslateTransform"/>
</rectangle.RenderTransform>
</rectangle>

The result of this will look like the following:

Bookmark to:

Related posts:

1. Creating a 3D tagcloud in Silverlight (part 1)
2. Creating a 3D tagcloud in Silverlight (part 2)
3. Hosting your Silverlight application and media in the cloud
4. SharePoint 2010 Search: Property Restriction in Keyword Queries