c# - DataTemplate 中带有 DoubleAnimation 的 Storyboard

Question

我在 XAML 中有一个带有 ItemTemplate 的 ListView，每个项目都包含一个 Button 和一个 字体图标。按下按钮后，我想在 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 字典中提取 Storyboard。

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