Question

我有关于制作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 - 秒，否则我想拥有初始状态。

有关此问题的任何提示？

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

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

PivotItem元素动画

1 个答案: