旋转动画的ItemTemplate在GridView控件 - C＃ - UWP

Question

我在我的应用程序，它有一个Template有GridView，这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; 
    } 
} 

在这里，我们应该在DataTemplate使用，而不是Storyboard.SetTargetName方法Storyboard.SetTarget方法，您StackPanel而且会有很多StackPanel s的的同名当GridView加载。

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

操作在活动动画或故事板上无效。 Root Storyboard必须先停下来。

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

最后，你还可能需要修改RotateAnimation为RepeatBehavior="1"指定一个的一天，是不符合逻辑的我，并指定一次我们应该用RepeatBehavior="1x"。欲了解更多信息，请参阅XAML值的RepeatBehavior structure。