DataTemplate 中带有 DoubleAnimation 的情节提要

Question

我在XAML 中有一个ListView 和一个ItemTemplate，每个项目都包含一个Button 和一个FontIcon。一旦按下按钮，我想在FontIcon 上做一个旋转动画。我已经在 DataTemplate 之外构建了它工作正常的行为，所以我将 Storyboard 添加到 ListView 中，现在我收到 Storyboard.TargetName 的错误。是否可以在DataTemplate 内的特定元素上执行DoubleAnimation，这是由DataTemplate 内的另一个元素触发的？

我之前在XAML 没有做过任何动画，所以如果我走错了路，请告诉我。

这是ListView 和Storyboard 的代码

<ListView x:Name="ItemList">
<ListView.ItemTemplate>
    <DataTemplate>
        <StackPanel Orientation="Horizontal">
            <StackPanel.Resources>
                <Storyboard x:Name="TestStoryboard">
                    <DoubleAnimation
                        Duration="0:0:0.2"
                        To="180"
                        Storyboard.TargetProperty="(UIElement.RenderTransform).(CompositeTransform.Rotation)"
                        Storyboard.TargetName="iconlist"
                        d:IsOptimized="True"/>
                </Storyboard>
            </StackPanel.Resources>
            <Button Click="ButtonTest_Click">
                <TextBlock Text="{Binding}" />
            </Button>
            <FontIcon x:Name="iconlist" Glyph="###" />
        </StackPanel>
    </DataTemplate>
</ListView.ItemTemplate>

为了更好地理解这里是我正在构建的屏幕截图。我想通过单击ListView 的相应项目内的按钮来旋转表情符号：

Answer 1

首先，TestStoryBoard 是数据模板的本地；它不是你班级的一个字段。

其次，您需要在目标上定义一个RenderTransform，以便动画具有动画效果。 （这也大大简化了目标属性的规范，因为您可以命名转换本身。）

这是一个稍作修改的示例，这样我就可以将一些东西拼凑在一起并声称它有效——它确实有效，但并不漂亮：

<ListView
    Grid.Row="2"
    ItemsSource="{x:Bind Items}">
    <ListView.ItemTemplate>
        <DataTemplate>
            <StackPanel Orientation="Horizontal">
                <StackPanel.Resources>
                    <Storyboard x:Name="TestStoryboard">
                        <DoubleAnimation
                            Duration="0:0:0.2"
                            To="180"
                            Storyboard.TargetProperty="Angle"
                            Storyboard.TargetName="transform" />
                    </Storyboard>
                </StackPanel.Resources>
                <Button Click="ButtonTestClick" Content="{Binding}" />
                <TextBlock Text="Hi">
                    <TextBlock.RenderTransform>
                        <RotateTransform
                            x:Name="transform"
                            CenterX="50"
                            CenterY="20"
                        />
                    </TextBlock.RenderTransform>
                </TextBlock>
            </StackPanel>
        </DataTemplate>
    </ListView.ItemTemplate>
</ListView>

代码隐藏：

public string[] Items { get; } =
    {
        "One", "Two", "Three",
    };

public MainPage()
{
    InitializeComponent();
}

private void ButtonTestClick(object sender, RoutedEventArgs e)
{
    UIElement clickedElement = sender as UIElement;
    StackPanel stackPanel = FindParent<StackPanel>(clickedElement);

    object value = null;
    stackPanel?.Resources.TryGetValue("TestStoryboard", out value);
    Storyboard storyboard = value as Storyboard;
    storyboard?.Begin();
}

public static T FindParent<T>(DependencyObject element)
    where T : DependencyObject
{
    while (element != null)
    {
        DependencyObject parent = VisualTreeHelper.GetParent(element);
        T candidate = parent as T;
        if (candidate != null)
        {
            return candidate;
        }

        element = parent;
    }

    return default(T);
}

请注意，我们需要将情节提要从StackPanel 的Resource 字典中提取出来。

我希望这可以作为你的起点。