如何在故事板动画中绑定图像

时间:2012-03-29 23:16:32

标签: c# windows-phone-7

我需要绑定到故事板,但我不知道如何。我有绑定工作在另一个控件,但似乎无法使用它。你能帮我吗,这可能吗?

我怎样才能代替这个xaml

<Storyboard x:Key="CandleStoryboardXaml" RepeatBehavior="Forever">
<ObjectAnimationUsingKeyFrames Storyboard.TargetName="CandleImage" Storyboard.TargetProperty="Source">
    <DiscreteObjectKeyFrame KeyTime="0:0:0.50" Value="/images/candle_01.jpg" />
    <DiscreteObjectKeyFrame KeyTime="0:0:0.100" Value="/images/candle_02.jpg" />
    <DiscreteObjectKeyFrame KeyTime="0:0:0.150" Value="/images/candle_03.jpg" />
    <DiscreteObjectKeyFrame KeyTime="0:0:0.200" Value="/images/candle_04.jpg" />
    <DiscreteObjectKeyFrame KeyTime="0:0:0.250" Value="/images/candle_05.jpg" />
    ...
</ObjectAnimationUsingKeyFrames>
</Storyboard>`

这样的事情

<Storyboard x:Key="CandleStoryboardXaml" RepeatBehavior="Forever">
 <ObjectAnimationUsingKeyFrames Storyboard.TargetName="CandleImage" Storyboard.TargetProperty="Source">
     <DiscreteObjectKeyFrame  Value="{Binding SourceItem}" />         
 </ObjectAnimationUsingKeyFrames>
</Storyboard>

2 个答案:

答案 0 :(得分:2)

如果您想使用绑定创建第一个故事板 ,答案是您不能。 Silverlight中的集合绑定由ItemsControl执行,{{1}}基于模板构建项目并将其添加到可视树中。故事板没有可视化树,因此您无法在此上下文中使用此方法。

我建议根据您的图像数组编写一些代码来创建故事板。如果您担心代码隐藏,您可以始终将代码打包为附加行为。

答案 1 :(得分:0)

尝试使用堆叠面板并以水平或垂直方式逐个添加图像。

            <StackPanel.Resources>

            <EventTrigger x:Name="event" RoutedEvent="StackPanel.Loaded">
            <EventTrigger.Actions>

            <BeginStoryboard>

            <Storyboard x:Name="mystoryboard">

          <DoubleAnimationUsingKeyFrames
           Storyboard.TargetName="Trans" 
           Storyboard.TargetProperty="X">
         <LinearDoubleKeyFrame Value="-387" KeyTime="0:0:1" />




         </DoubleAnimationUsingKeyFrames>


  <Image Height="165" HorizontalAlignment="Left" Margin="400,40,-400,0"  VerticalAlignment="Top" Width="175" Source="{Binding SourceItem}">
                                    <Image.RenderTransform>
                                        <TranslateTransform x:Name="Trans" X="0" Y="0" />
                                    </Image.RenderTransform>
                                </Image>