Question

我的应用中有一个GridView，其Template Template包含TextBlock个项Image个StackPanel 1}}。我想在Z轴上旋转StackPanel（最好，你可以垂直说 - 不是循环方式 - 就像在模拟人生3中你可以旋转一个角色）（如果我错了就纠正我，它是不是Z轴。）但我无法做到这一点，因为无法从模板外部访问GridView的模板部分。因此DoubleAnimation返回一个错误，指出找不到元素的名称。我甚至尝试将目标设置为我Title的{{1}}我的模板但仍然显示找不到名称。

那么无论如何都要实现这个目标吗？我现在正在尝试以下代码。

Favorites.xaml

ItemsClass

Favorites.xaml.cs

<GridView ItemsSource="{x:Bind TVFavoritesList, Mode=OneWay}"
                      x:Name="TVDataGrid"
                      HorizontalAlignment="Left"
                      Height="350"
                      Margin="10"
                      IsItemClickEnabled="True"
                      ItemClick="dataGrid_ItemClick"
                      ScrollViewer.HorizontalScrollMode="Auto"
                      ScrollViewer.HorizontalScrollBarVisibility="Auto"
                      ScrollViewer.VerticalScrollMode="Disabled">
                <GridView.Header>
                    <TextBlock Text=""
                               x:Name="TVFavoritesHeader"
                               VerticalAlignment="Center"
                               TextAlignment="Center"
                               Margin="5,0"/>
                </GridView.Header>
                <GridView.HeaderTransitions>
                    <TransitionCollection>
                        <EdgeUIThemeTransition/>
                    </TransitionCollection>
                </GridView.HeaderTransitions>
                <GridView.ItemsPanel>
                    <ItemsPanelTemplate>
                        <ItemsWrapGrid Orientation="Vertical" />
                    </ItemsPanelTemplate>
                </GridView.ItemsPanel>
                <GridView.ItemContainerTransitions>
                    <TransitionCollection>
                        <PaneThemeTransition Edge="Top"/>
                    </TransitionCollection>
                </GridView.ItemContainerTransitions>
                <GridView.ItemTemplate>
                    <DataTemplate x:DataType="data:ItemsClass">
                        <StackPanel Margin="0,10,10,10"
                                    Name="rotateme"
                                    HorizontalAlignment="Center"
                                    BorderBrush="Red"
                                    BorderThickness="0,1"
                                    IsRightTapEnabled="True"
                                    PointerEntered="TVItemPanel_PointerEntered"
                                    RightTapped="ItemPanel_RightTapped">
                            <TextBlock x:Name="Title"
                                        Text="{x:Bind ItemTitle, Mode=OneWay}"
                                        TextAlignment="Center"
                                        TextWrapping="Wrap"
                                        Height="40"
                                        Width="200"/>
                            <Image x:Name="CoverImage"
                                    Source="{x:Bind ItemImageLink, Mode=OneWay}"
                                    Width="180"
                                    Height="250"
                                    Margin="0"/>
                            <Image Source="ms-appx:///Assets/newcontent.png"
                                   HorizontalAlignment="Center"
                                   Visibility="{x:Bind ItemUpdate, Mode=OneWay}"
                                   Width="150"
                                   Margin="0,-250,0,0"/>
                            <TextBlock Text="{x:Bind ItemType, Mode=OneWay}"
                                        TextAlignment="Center"
                                        TextWrapping="Wrap"/>
                            <StackPanel.RenderTransform>
                                <RotateTransform/>
                            </StackPanel.RenderTransform>
                        </StackPanel>
                    </DataTemplate>
                </GridView.ItemTemplate>
</GridView>


<Page.Resources>
<Storyboard x:Name="AnimationStoryboard">
<DoubleAnimation x:Name="RotateAnimation" To="360" RepeatBehavior="1"
Storyboard.TargetProperty="(UIElement.RenderTransform).(RotateTransform.Angle)">
</DoubleAnimation>
</Storyboard>
</Page.Resources>

ItemsClass.cs

private void TVItemPanel_PointerEntered(object sender, PointerRoutedEventArgs e)
{
        var pointer = (StackPanel)sender;
        var item = (ItemsClass)((FrameworkElement)e.OriginalSource).DataContext;
        Storyboard.SetTargetName(RotateAnimation, pointer.Name);
        //Storyboard.SetTargetName(RotateAnimation, item.ItemTitle);
        AnimationStoryboard.Begin();
}

这只是与动画相对应的（整个代码的）相关部分。

Answer 1

根据您的描述，似乎您想在输入指针时旋转StackPanel。如果是这样，您可以尝试使用以下代码：

private StackPanel CurrentTarget;

private void TVItemPanel_PointerEntered(object sender, PointerRoutedEventArgs e)
{
    var pointer = (StackPanel)sender;
    if (AnimationStoryboard.GetCurrentState() == ClockState.Active && CurrentTarget.Equals(pointer))
    {
        return;
    }
    else
    {
        AnimationStoryboard.Stop();

        Storyboard.SetTarget(RotateAnimation, pointer);

        AnimationStoryboard.Begin();
        CurrentTarget = pointer;
    }
}

在这里，我们应该使用Storyboard.SetTarget方法而不是Storyboard.SetTargetName方法作为StackPanel中的DataTemplate，并且会有很多StackPanel个<加载GridView时强>同名。

除此之外，我们还需要在指针移动到其他StackPanel时停止当前动画。如果没有，我们可能会收到如下错误：

操作在活动的动画或故事板上无效。必须先停止根故事板。

因此，我定义了一个CurrentTarget字段来存储当前目标StackPanel。

最后，您可能还需要修改RotateAnimation RepeatBehavior="1"指定一天，这对我来说不合逻辑并指定一次我们应该使用 RepeatBehavior="1x" 。有关详细信息，请参阅RepeatBehavior structure的 XAML值。

GridView中的ItemTemplate的旋转动画 - C＃ - UWP

1 个答案: