PivotItem 元素动画答案

【问题标题】：PivotItem element AnimationPivotItem 元素动画
【发布时间】：2014-07-28 16:57:41
【问题描述】：

我有一个关于制作 pivotItem 动画的问题。我使用 PivotItem 作为控件而不是页面。

我想在 ItemTemplate 中制作动画的图片很少

   <Pivot.Resources>
                    <Storyboard x:Name="CardsShuffle">
                        <DoubleAnimation Duration="0:0:1" To="20" Storyboard.TargetProperty="(UIElement.RenderTransform).(CompositeTransform.Rotation)" Storyboard.TargetName="Card3"  d:IsOptimized="True"/>
                        <DoubleAnimation Duration="0:0:1" To="-20" Storyboard.TargetProperty="(UIElement.RenderTransform).(CompositeTransform.Rotation)" Storyboard.TargetName="Card1" d:IsOptimized="True"/>
                        <DoubleAnimation Duration="0:0:1" To="-20.833" Storyboard.TargetProperty="(UIElement.RenderTransform).(CompositeTransform.TranslateX)" Storyboard.TargetName="Card1" d:IsOptimized="True"/>
                        <DoubleAnimation Duration="0:0:1" To="-1.667" Storyboard.TargetProperty="(UIElement.RenderTransform).(CompositeTransform.TranslateY)" Storyboard.TargetName="Card1" d:IsOptimized="True"/>
                    </Storyboard>
            </Pivot.Resources>

还有枢轴结构本身

            <Pivot.HeaderTemplate>
                <DataTemplate>
                    <TextBlock HorizontalAlignment="Center" 
                                   VerticalAlignment="Center" Padding="10"
                                   FontSize="10"
                                   Text="{Binding PackName}"/>
                </DataTemplate>
            </Pivot.HeaderTemplate>
            <Pivot.ItemTemplate>
                <DataTemplate>
                    <StackPanel Tapped="PivotItemSelected">
                        <Grid x:Name="LayoutRoot">

                            <Grid.RowDefinitions>
                                <RowDefinition Height="7*"/>
                                <RowDefinition Height="*"/>
                            </Grid.RowDefinitions>

                            <Grid Grid.Row="0" Name="MyGrid">
                                <Image Name="Card3" Source="/Data/Images/img_test.png" MaxHeight="350">
                                    <Image.RenderTransform>
                                        <CompositeTransform CenterY="250" CenterX="90" />
                                    </Image.RenderTransform>
                                </Image>

                                <Image Name="Card2" Source="/Data/Images/img_test.png" MaxHeight="350">
                                    <Image.RenderTransform>
                                        <CompositeTransform Rotation="0"/>
                                    </Image.RenderTransform>
                                </Image>
                                <Image Name="Card1" Source="/Data/Images/img_test.png" MaxHeight="350" RenderTransformOrigin="0.5,0.5">
                                    <Image.RenderTransform>
                                        <CompositeTransform/>
                                    </Image.RenderTransform>
                                </Image>
                                <Button Click="ButtonBase_OnClick" Content="Animate"></Button>
                            </Grid>
                        </Grid>

                    </StackPanel>
                </DataTemplate>
            </Pivot.ItemTemplate>

首先我有一个关于绑定的问题。我无法找到或弄清楚如何处理绑定子元素而不是定义名称（在网格中工作但也不是枢轴）。尝试使用 Storyboard.Target="{Binding ElementName= PacksPivot, Path= '???' 但找不到合适的解决方案。

其次，我希望在 PivotSelectedIndex 更改后 x 秒触发动画，否则我想要初始状态。

关于这个问题的任何提示？

【问题讨论】：

所以你只是想翻转一些东西并在 X,Y 上轻推一下？第一部分我不太明白你在问什么，什么是 PacksPivot？绑定子元素是什么意思？也许只是对您想要完成的事情的快速模拟视觉会更简单地传达它。第二部分，您可以将BeginTime 附加到情节提要元素本身，以便在触发后延迟。作为一个周五即将下班的人，无论哪种方式都不能保证快速响应。
嘿，让我向您展示结构页面 -> 网格 -> 堆栈面板 -> 带有元素的枢轴 (PacksPivot)。我希望绑定的元素在一段时间延迟后具有动画（一些旋转和轻推 x，y）。我想通过“子”属性识别元素，因为我认为名称不适用于绑定。

标签： c# xaml windows-phone-8.1

【解决方案1】：

好的，我已经解决了:)

 <Grid x:Name="LayoutRoot">
                            <Grid.Triggers>
                                <EventTrigger RoutedEvent="Grid.Loaded">
                                    <BeginStoryboard>
                                        <Storyboard x:Name="CardsShuffle">
                                            <DoubleAnimation Duration="0:0:1" To="20" Storyboard.TargetProperty="(UIElement.RenderTransform).(CompositeTransform.Rotation)"  Storyboard.TargetName="Card3"  d:IsOptimized="True"/>
                                            <DoubleAnimation Duration="0:0:1" To="-20" Storyboard.TargetProperty="(UIElement.RenderTransform).(CompositeTransform.Rotation)" Storyboard.TargetName="Card1" d:IsOptimized="True"/>
                                            <DoubleAnimation Duration="0:0:1" To="-20.833" Storyboard.TargetProperty="(UIElement.RenderTransform).(CompositeTransform.TranslateX)" Storyboard.TargetName="Card1" d:IsOptimized="True"/>
                                            <DoubleAnimation Duration="0:0:1" To="-1.667" Storyboard.TargetProperty="(UIElement.RenderTransform).(CompositeTransform.TranslateY)" Storyboard.TargetName="Card1" d:IsOptimized="True"/>
                                        </Storyboard>
                                    </BeginStoryboard>
                                </EventTrigger>
                            </Grid.Triggers>

名称确实有效，我使用事件触发器来启动动画。

【讨论】：