What if you want to use a single animation object (let's say DoubleAnimation) to target multiple objects? This is especially useful when you have a large number of objects that have similar animations applied to them. For example, you are displaying rows of images and you want to use an animation to highlight the image that currently has the mouse pointer over it. It is inconvenient and messy to have to create separate Storyboard objects for each image. It would be better to reuse the same Storyboard.
This content is also covered in my MSDN topic: Working with Animations Programmatically (Silverlight 2).
The following example has a number of rectangles that fade out and back into sight when you click them. All of these rectangles use the same Storyboard, because the DoubleAnimation that animates the Opacity changes its TargetName to whichever rectangle is clicked.
<StackPanel Orientation="Horizontal">
<StackPanel.Resources>
<Storyboard x:Name="myStoryboard">
<DoubleAnimation x:Name="myDoubleAnimation"
Storyboard.TargetProperty="Opacity"
From="1.0" To="0.0" Duration="0:0:2"
AutoReverse="True" />
</Storyboard>
</StackPanel.Resources>
<Rectangle
x:Name="MyAnimatedRectangle1"
Margin="3" Width="100" Height="100" Fill="Blue"
MouseLeftButtonDown="Start_Animation" />
<Rectangle
x:Name="MyAnimatedRectangle2"
Margin="3" Width="100" Height="100" Fill="Blue"
MouseLeftButtonDown="Start_Animation" />
<Rectangle
x:Name="MyAnimatedRectangle3"
Margin="3" Width="100" Height="100" Fill="Blue"
MouseLeftButtonDown="Start_Animation" />
<Rectangle
x:Name="MyAnimatedRectangle4"
Margin="3" Width="100" Height="100" Fill="Blue"
MouseLeftButtonDown="Start_Animation" />
</StackPanel>
// C# code.
public void Start_Animation(object sender, MouseEventArgs e){ // If the Storyboard is running and you try to change // properties of its animation objects programmatically, // an error will occur. myStoryboard.Stop(); // Get a reference to the rectangle that was clicked. Rectangle myRect = (Rectangle)sender; // Change the TargetName of the animation to the name of the // rectangle that was clicked. myDoubleAnimation.SetValue(Storyboard.TargetNameProperty, myRect.Name); // Begin the animation. myStoryboard.Begin();}
In the previous code, notice that you need to stop the Storyboard before you dynamically change the properties of its animation objects; otherwise, an error will occur.
In this example, it might not be desirable to stop an animation on one rectangle so that the animation can start on another rectangle. Perhaps you want both animations to run at the same time. However, you cannot use the same animation object to run two separate animations at the same time, because there is only one TargetName. This does not mean that you are back to creating a separate Storyboard for every object. Instead, you need one Storyboard for each animation that you want to run concurrently (synchronously). The following example is similar to the previous one, except that it contains three Storyboard objects instead of one. When you click a rectangle, the code looks for a Storyboard that is not currently in use and uses that one to create the animation.
<StackPanel Orientation="Horizontal">
<StackPanel.Resources>
<Storyboard x:Name="myStoryboard1" Completed="Storyboard_Completed">
<DoubleAnimation x:Name="myDoubleAnimation1"
Storyboard.TargetProperty="Opacity"
From="1.0" To="0.0" Duration="0:0:2" AutoReverse="True" />
</Storyboard>
<Storyboard x:Name="myStoryboard2" Completed="Storyboard_Completed">
<DoubleAnimation x:Name="myDoubleAnimation2"
Storyboard.TargetProperty="Opacity"
From="1.0" To="0.0" Duration="0:0:2"
AutoReverse="True" />
</Storyboard>
<Storyboard x:Name="myStoryboard3" Completed="Storyboard_Completed">
<DoubleAnimation x:Name="myDoubleAnimation3"
Storyboard.TargetProperty="Opacity"
From="1.0" To="0.0" Duration="0:0:2"
AutoReverse="True" />
</Storyboard>
</StackPanel.Resources>
<Rectangle x:Name="MyAnimatedRectangle1"
Margin="3" Width="100" Height="100" Fill="Blue"
MouseLeftButtonDown="Start_Animation" />
<Rectangle x:Name="MyAnimatedRectangle2"
Margin="3" Width="100" Height="100" Fill="Blue"
MouseLeftButtonDown="Start_Animation" />
<Rectangle x:Name="MyAnimatedRectangle3"
Margin="3" Width="100" Height="100" Fill="Blue"
MouseLeftButtonDown="Start_Animation" />
<Rectangle x:Name="MyAnimatedRectangle4"
Margin="3" Width="100" Height="100" Fill="Blue"
MouseLeftButtonDown="Start_Animation" />
</StackPanel>
// C#
bool storyboard1Active = false;
bool storyboard2Active = false;
bool storyboard3Active = false;
public void Start_Animation(object sender, MouseEventArgs e)
{
// Get a reference to the rectangle that was clicked.
Rectangle myRect = (Rectangle)sender;
if (!storyboard1Active)
{
myStoryboard1.Stop();
myDoubleAnimation1.SetValue(Storyboard.TargetNameProperty, myRect.Name);
myStoryboard1.Begin();
storyboard1Active = true;
}
else if (!storyboard2Active)
{
myStoryboard2.Stop();
myDoubleAnimation2.SetValue(Storyboard.TargetNameProperty, myRect.Name);
myStoryboard2.Begin();
storyboard2Active = true;
}
else if (!storyboard3Active)
{
myStoryboard3.Stop();
myDoubleAnimation3.SetValue(Storyboard.TargetNameProperty, myRect.Name);
myStoryboard3.Begin();
storyboard3Active = true;
}
}
public void Storyboard_Completed(object sender, EventArgs e)
{
Storyboard myStoryboard = sender as Storyboard;
switch (myStoryboard.GetValue(NameProperty).ToString())
{
case "myStoryboard1": storyboard1Active = false; break;
case "myStoryboard2": storyboard2Active = false; break;
case "myStoryboard3": storyboard3Active = false; break;
}
}
In the previous example, only three animations can run at the same time (equal to the number of Storyboard objects). This is fine if you do not anticipate a need for more concurrent animations, which would require more Storyboard objects. If you expect a lot of independent animations to be running at the same time, you might want to create your Storyboard objects dynamically. See my earlier post Create an Animation in Code (e.g. C#, VB .NET, etc) for more information.
Nois!
Sam Landstrom - MSFT
