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

本文关键字：对象 一个故事 Silverlight | 更新日期: 2023-09-27 17:51:16

我为三个不同的图像使用一个动画。我如何用相同的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>

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

不幸的是，没有办法在同一个DoubleAnimation中设置多个目标(尽管如果你至少可以指定一个TargetType来击中你所有的图像，那就太好了?然而，不，也不能那样做…)

然而

…我使用了一个技巧，你可以在你的实例中应用，你将它应用到一个实例中，并允许它通过绑定为其他实例提供相同的效果，如;

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

希望对你有帮助。

干杯!

相关文章：