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>

现在我们将它喂给一个Target，然后让其他人吃掉它......

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

希望这有帮助。

干杯！

如何在Silverlight中为多个对象使用一个故事板？

1 个答案: