旋轉動畫的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。