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

Question

我的应用程序中有一个GridView，它有一个Template，这个Template 包括几个TextBlock 项目和一个Image 在StackPanel 内。我想在 Z 轴上旋转 StackPanel （最好，正如你所说的垂直 - 不是以圆形方式 - 如在模拟人生 3 中你可以旋转一个角色）（如果我错了，请纠正我不是 Z轴。）但我不能这样做，因为不能从模板外部访问GridView 的模板部分。因此DoubleAnimation 返回一个错误，即找不到元素的名称。我什至尝试将目标设置为我的模板的ItemsClass 的Title，但它仍然说找不到名称。

那么有没有办法做到这一点？ 我现在正在尝试以下代码。

Favorites.xaml

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

Favorites.xaml.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();
}

ItemsClass.cs

namespace WatchfreeWebsite
{
public class ItemsClass
  {

    public int ItemID
    { get; set; }

    public string ItemTitle
    { get; set; }

    public string ItemType
    { get; set; }

    public string ItemImageLink
    { get; set; }

    public string ItemPageLink
    { get; set; }

    public Visibility ItemUpdate
    { get; set; }
  }
}

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

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方法作为DataTemplate中的StackPanel，并且会有很多StackPanels与同名时GridView 已加载。

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

操作在活动动画或情节提要上无效。必须先停止根 Storyboard。

所以我定义了一个CurrentTarget 字段来存储当前目标StackPanel。

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