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

Question

I have a GridView in my app which has a Template and this Template includes a couple of TextBlock items and an Image inside a StackPanel . I want to Rotate the StackPanel in Z axis (preferably, as you can say vertically - not in circular way - as in Sims 3 you can rotate a character) ( correct me if I am wrong and it is not Z axis. ) but I am not able to do that since Template part of the GridView cannot be accessed from outside the template. So the DoubleAnimation returns an error that the name of the element was not found. I even tried to set the target to the Title of my ItemsClass for my Template but still it says the name was not found.

So is there anyway to achieve this? I am trying the following code for now.

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

This is only the relevant part (of the entire code) that corresponds to the animation.

Answer 1

According to your description, it seems you want to rotate the StackPanel when pointer entered. If so, you can try with following code:

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

Here we should use Storyboard.SetTarget method instead of Storyboard.SetTargetName method as your StackPanel in DataTemplate and there will be a lot of StackPanel s with the same name when the GridView loaded.

Besides this, we also need to stop current animation when pointer moving into other StackPanel . If not, we might get error like:

Operation is not valid on an active Animation or Storyboard. Root Storyboard must be stopped first.

So I defined a CurrentTarget field to store current target StackPanel .

At last, you may also need to modify RotateAnimation as RepeatBehavior="1" specifies one day which is not logical to me and to specifies one time we should use RepeatBehavior="1x" . For more info, please see XAML Values of RepeatBehavior structure .