Question

ListView中ItemTemplate XAML Button，FontIcon，FontIcon和DataTemplate。按下按钮后，我想在Storyboard上执行旋转动画。我已经在ListView以外的地方构建了正常工作的行为，因此我将Storyboard.TargetName添加到了DoubleAnimation，现在我收到的错误是DataTemplate。是否可以对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

的代码

ALTER TABLE x0 ADD counter INTEGER;
UPDATE x0 SET counter = ?

为了更好地理解，这里是我正在构建的屏幕截图。我想通过点击UPDATE x0 SET counter = ROWID;的相应项目内的按钮来旋转表情符号：

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的{{1}}词典中提取故事板。

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

DataTemplate中具有DoubleAnimation的故事板

1 个答案: