How can I use one storyboard for multiple objects in Silverlight?

Question

I'm using one animation for three different images. How would I target all three with the same Storyboard ? Thanks....

C#

public TheGame()
{
     InitializeComponent();
     CompositionTarget.Rendering += new EventHandler(CompositionTarget_Rendering);
     FadeImageStoryboard.Begin();
}

XAML;

<UserControl 
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"


xmlns:sdk="http://schemas.microsoft.com/winfx/2006/xaml/presentation/sdk" x:Class="Capitals.TheGame"

mc:Ignorable="d"
d:DesignHeight="300" d:DesignWidth="400" Height="480" Width="640" KeyDown="UserControl_KeyDown" >

<Canvas x:Name="LayoutRoot" Background="#FF6AC3FF" >

    <Grid x:Name="MyGrid" Height="235" Canvas.Left="10" Canvas.Top="85" Width="620" >
        <Grid.RowDefinitions>
            <RowDefinition />
            <RowDefinition />
        </Grid.RowDefinitions>

        <Grid.Resources>
            <Storyboard x:Name="FadeImageStoryboard">
                <DoubleAnimation From="1.0" 
                             To="0.3" 
                             Duration="0:0:2"
                             RepeatBehavior="Forever"
                             AutoReverse="True" 
                             Storyboard.TargetName="cloud1"
                             Storyboard.TargetProperty="Opacity" />
            </Storyboard>
        </Grid.Resources>


        <StackPanel Grid.RowSpan="2">

            <Image x:Name="cloud1" Source="Cloud.png" Height="115" Width="184" Margin="29,78,407,42" />
            <Image x:Name="cloud2" Source="Cloud.png" Height="115" Width="184" Margin="218,78,218,42" 
                Opacity="{Binding Opacity, ElementName=cloud1}"/>
            <Image x:Name="cloud3" Source="Cloud.png" Height="115" Width="184" Margin="402,78,34,42"
                Opacity="{Binding Opacity, ElementName=cloud1}"/>
        </StackPanel>

        <sdk:Label Height="28" VerticalContentAlignment="Center" HorizontalContentAlignment="Center" Canvas.Left="255" Canvas.Top="52" Width="120" Content="Capitals" Background="#FF68A0D8" Foreground="#FF6AC3FF" FontFamily="Comic Sans MS" FontStyle="Italic" FontWeight="Bold" FontSize="20" Margin="250,-33,250,123"/>
        <sdk:Label x:Name="detailLabel" HorizontalAlignment="Center" VerticalAlignment="Center" Height="28" Canvas.Left="405" Canvas.Top="52" Canvas.ZIndex="1" FontFamily="Comic Sans MS" FontSize="14" Foreground="#FF5D5D5D" Content="PlayerName| PlayerScore" Margin="150,10,150,80" Width="320"/>
        <sdk:Label x:Name="option1"  HorizontalAlignment="Center" Height="28" Margin="70,0,430,89" Grid.Row="1" VerticalAlignment="Center" Width="120" Foreground="#FF5D5D5D" FontFamily="Comic Sans MS" FontSize="13" Content="Maybe..."/>
        <sdk:Label x:Name="option2"  HorizontalAlignment="Center" Height="28" Margin="250,0,250,89" Grid.Row="1" VerticalAlignment="Center" Width="120" Foreground="#FF5D5D5D" FontFamily="Comic Sans MS" FontSize="13" Content="Wrong?"/>
        <sdk:Label x:Name="option3"  HorizontalAlignment="Center" Height="28" Margin="440,0,60,89" Grid.Row="1" VerticalAlignment="Center" Width="120" Foreground="#FF5D5D5D" FontFamily="Comic Sans MS" FontSize="13" Content="Correct?"/>

    </Grid>
    <sdk:Label x:Name="questionLabel" HorizontalAlignment="Center" VerticalAlignment="Center" Height="28" Canvas.Left="80" Canvas.Top="320" Width="480" Foreground="#FF5D5D5D" FontFamily="Comic Sans MS" FontSize="20" Content="Capital of which country?"/>
</Canvas>

Answer 1

Unfortunately there's no way of setting multiple Target's within the same DoubleAnimation (though it would be nice if you could at least specify a TargetType to hit all your images right?? However nay, can't do that either...)

However... I have used a trick you can do to apply in your instance wherein you apply it to one, and allow it to feed the rest the same effect via Binding like;

<Storyboard x:Name="FadeImageStoryboard">
    <DoubleAnimation From="1.0" To="0.0" 
                     Duration="0:0:1"
                     RepeatBehavior="Forever" AutoReverse="True"
                     Storyboard.TargetName="cloud1" 
                     Storyboard.TargetProperty="Opacity" />
</Storyboard>

Now we feed it to one Target, and let the others feed off of it...

<!-- Yea, I stripped your properties for the sake of example :P -->
<StackPanel>

    <Image x:Name="cloud1" Source="Cloud.png" Height="115" Width="184"/>

    <Image x:Name="cloud2" Source="Cloud.png" Height="115" Width="184" 
           Opacity="{Binding Opacity, ElementName=cloud1}"/>
    <Image x:Name="cloud3" Source="Cloud.png" Height="115" Width="184"
           Opacity="{Binding Opacity, ElementName=cloud1}"/>
    <Image x:Name="cloud4" Source="Cloud.png" Height="115" Width="184"
           Opacity="{Binding Opacity, ElementName=cloud1}"/>
    <Image x:Name="cloud5" Source="Cloud.png" Height="115" Width="184"
           Opacity="{Binding Opacity, ElementName=cloud1}"/>
</StackPanel>

Not saying it's the "best" way, but it's the only way I've found over the years. Otherwise you're left with having to bite the bullet and just have a separate DoubleAnimation for each individual Target.

Hope this helps.

Cheers!