如何在 Silverlight 中为多个对象使用一个情节提要？

Question

我正在为三个不同的图像使用一个动画。我将如何使用相同的 Storyboard 来定位所有三个？谢谢....

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

不幸的是，没有办法在同一个DoubleAnimation 中设置多个目标（尽管如果你至少可以指定一个TargetType 来击中你所有的图像会很好吗？但是不，也不能这样做...)

但是...我已经使用了一种技巧，您可以将其应用于您的实例，您可以将其应用于一个实例，并允许它通过 Binding 等方式为其余部分提供相同的效果；

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

现在我们将它喂给一个目标，让其他目标以它为食...

<!-- 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>

并不是说这是“最好”的方式，但这是我多年来找到的唯一方式。否则，您将不得不硬着头皮为每个单独的目标设置一个单独的 DoubleAnimation。

希望这会有所帮助。

干杯！