如何将情节提要动画应用于多个 xaml 元素答案

【问题标题】：how to apply storyboard animation to multiple xaml element如何将情节提要动画应用于多个 xaml 元素
【发布时间】：2014-07-15 23:31:07
【问题描述】：

我创建了一个故事板动画，它适用于我的一个 XAML 元素，但是我如何将它应用到多个 XAML 元素？

这里是 XAML：

<Storyboard x:Name="FlipOpen">
        <DoubleAnimationUsingKeyFrames Storyboard.TargetProperty="(UIElement.Projection).(PlaneProjection.RotationY)" Storyboard.TargetName="Front">
            <EasingDoubleKeyFrame KeyTime="0" Value="0"/>
            <EasingDoubleKeyFrame KeyTime="0:0:0.4" Value="-90"/>
        </DoubleAnimationUsingKeyFrames>
        <DoubleAnimationUsingKeyFrames Storyboard.TargetProperty="(UIElement.Projection).(PlaneProjection.RotationY)" Storyboard.TargetName="Back">
            <EasingDoubleKeyFrame KeyTime="0:0:0.4" Value="-270"/>
            <EasingDoubleKeyFrame KeyTime="0:0:0.8" Value="-360"/>
        </DoubleAnimationUsingKeyFrames>
    </Storyboard>

和受控的 XAML：

                        <StackPanel Background="Blue" Width="420" x:Name="Front">
                            <StackPanel.Projection>
                                <PlaneProjection/>
                            </StackPanel.Projection>
                            <TextBlock Text="Front" FontSize="25" Height="40"/>
                            <TextBlock Text="alcim" FontSize="10" Height=" 20"/>
                        </StackPanel>

                        <StackPanel x:Name="Back" Width="420" Background="Red">
                            <StackPanel.Projection>
                                <PlaneProjection RotationY="-270" />
                            </StackPanel.Projection>
                            <TextBlock Text="Hátlap"/>
                        </StackPanel>
                    </Grid>

如何在代码中（多次）创建受控方，然后将情节提要应用于它？因为它们不能具有相同的 x:Name 属性...

【问题讨论】：

我不完全确定你在问什么...可能相关：stackoverflow.com/questions/24738976/…
嗯...我认为有一种更简单的方法可以将一个故事板链接到多个项目..
就像我说的，我真的不明白你想做什么。我的链接问题/答案可能相关，也可能不相关。你能澄清一下这个问题吗？
我想在多个项目（例如包含这些堆栈面板的 5-6 个网格）上使用定义的故事板，然后当所有网格都应该具有故事板效果时。如果您单击网格，故事板将在其中的元素上播放。

标签： c# xaml windows-phone-8

【解决方案1】：

将您的故事板定义为资源，并从您想要动画的控件或样式中引用它。

  <Storyboard x:Key="FlipOpenStoryboard">
        <DoubleAnimationUsingKeyFrames Storyboard.TargetProperty="(UIElement.Projection).(PlaneProjection.RotationY)">
            <EasingDoubleKeyFrame KeyTime="0" Value="0"/>
            <EasingDoubleKeyFrame KeyTime="0:0:0.4" Value="-90"/>
        </DoubleAnimationUsingKeyFrames>
   </Storyboard>

在您想要开始动画时在堆栈面板中定义。

    <StackPanel Background="Blue" Width="420" x:Name="Front">
        <StackPanel.Triggers>
            <EventTrigger RoutedEvent="StackPanel.Loaded">
                <EventTrigger.Actions>
                    <BeginStoryboard Storyboard="{StaticResource FlipOpenStoryboard}" />
                </EventTrigger.Actions>
            </EventTrigger>
        </StackPanel.Triggers>
        <StackPanel.Projection>
            <PlaneProjection/>
        </StackPanel.Projection>

        <TextBlock Text="Front" FontSize="25" Height="40"/>
        <TextBlock Text="alcim" FontSize="10" Height=" 20"/>
    </StackPanel>

我没有 PlaneProjection 控件，所以下面我为您提供了一个为面板的高度设置动画的工作示例。

动画：

<Storyboard x:Key="FlipOpenStoryboard">
    <DoubleAnimationUsingKeyFrames Storyboard.TargetProperty="Height" >
        <EasingDoubleKeyFrame KeyTime="0" Value="0"/>
        <EasingDoubleKeyFrame KeyTime="0:0:4" Value="500"/>
    </DoubleAnimationUsingKeyFrames>
</Storyboard>

面板：

<StackPanel Background="Blue" Width="420" Height="100">
    <StackPanel.Triggers>
        <EventTrigger RoutedEvent="StackPanel.Loaded">
            <EventTrigger.Actions>
                <BeginStoryboard Storyboard="{StaticResource FlipOpenStoryboard}" />
            </EventTrigger.Actions>
        </EventTrigger>
    </StackPanel.Triggers>

    <TextBlock Text="Front" FontSize="25" Height="40"/>
    <TextBlock Text="alcim" FontSize="10" Height=" 20"/>
</StackPanel>

【讨论】：

这听起来不错，我试过了，但是当我启动项目时我不断收到 XamlParseException
这意味着您的 xaml 中存在格式错误。确保所有标签都正确关闭。我编辑了我的答案并包含了一个工作示例。
嗯，即使我也将它放在新项目中，它仍然会为我丢弃同样的错误
看不到代码很难说有什么问题。尝试使用一个更简单的示例，即按照我包含的示例为高度设置动画，然后逐步建立您想要实现的目标。