如何在 WP8 中同时为容器的所有子项设置动画

Question

我正在使用 C# 为 Windows Phone 8 开发应用程序。

我有一张游戏卡的布局，现在我想为这张卡制作整体动画。我的问题是，当我启动动画时，它只会更改 CardPanel (Stackpanel) 的宽度，而不是它的子项（文本框、图像和形状）的宽度。

我的一般（简化）结构是这样的，试图用动画来翻转卡片。

<Stackpanel x:Name="CardPanel">
    <TextBox x:Name="Title"/>
    <Image   x:Name="Image"/>
    <!--other elements-->
    <Storyboard x:Name="TurnCardSB">
        <DoubleAnimation Storyboard.TargetName="CardPanel" 
                         Storyboard.TargetProperty="Width" 
                         From="400" To="5" Duration="0:0:0.5"
                         AutoReverse="True"/>
    </Storyboard>
</Stackpanel>

有没有一种聪明的方法可以将这个故事板应用到这个 Stackpanel 中的所有元素，而不是为所有元素创建一个动画？或者冻结布局并将其用作一张图片（我觉得这样有点脏）。

Answer 1

是的，有一个聪明的方法，不要为宽度设置动画。它完全按照您的指示进行动画处理，您会注意到，如果您只是手动更改面板的宽度（尤其是 StackPanel），它不会缩放以您期望的方式添加元素。

相反，使用 ScaleTransform 实际缩放面板及其内容：

<Stackpanel x:Name="CardPanel">
    <StackPanel.RenderTransform>
       <ScaleTransform x:Name=CardPanelTransform />
    </StackPanel.RenderTransform>
    <TextBox x:Name="Title"/>
    <Image   x:Name="Image"/>
    <!--other elements-->
    <Storyboard x:Name="TurnCardSB">
        <DoubleAnimation Storyboard.TargetName="CardPanelTransform " 
                         Storyboard.TargetProperty="ScaleX" 
                         From="1" To="0.01" Duration="0:0:0.5"
                         AutoReverse="True"/>
    </Storyboard>
</Stackpanel>

如何在 WP8 中同时为容器的所有子项设置动画

How to animate all children of a container at the same time in WP8

c#

xaml

animation

windows-phone-8

storyboard