Winrt phone 8.1 StackPanel 可见性动画答案

【问题标题】：Winrt phone 8.1 StackPanel Visibility AnimationWinrt phone 8.1 StackPanel 可见性动画
【发布时间】：2015-08-21 20:24:17
【问题描述】：

我有一个垂直的stackpanel，其中几乎有 10 个textblocks，其可见性在单击按钮时会发生变化，我们能否在 stackpanel 的可见性上应用动画，这意味着当它折叠或可见时，它会像打开一样显示动画从顶部开始。

我不知道这是否可能。或者是否容易实现。

【问题讨论】：

最好看 Storyboards msdn.microsoft.com/en-us/library/windows/apps/xaml/…

标签： windows-runtime windows-phone-8.1

【解决方案1】：

这是一个使用 AddDelete 过渡动画的工作示例： https://www.dropbox.com/l/9hcyf0V4q6qimmpvwal7no

解释： 您可以应用各种动画来实现您想要的效果，并且它可能会变得非常复杂。我发现的最简单的解决方案是使用 AddDeleteThemeTransition 动画。首先，您需要在 Windows.UI.Xaml 下引用 Media.Animation：

using Windows.UI.Xaml.Media.Animation;

您需要维护一个文本块的集合，因为您实际上会从堆栈面板中完全删除它们，而不是更改它们的可见性。

模块级变量：

List<TextBlock> textblocks = new List<TextBlock>();

您可以在此处以编程方式将文本框添加到列表中。

        Transition addDelete = new AddDeleteThemeTransition();
        for (int i = 1; i < 10; i++)
        {
            TextBlock textBlock = new TextBlock();
            textBlock.Transitions = new TransitionCollection();
            textBlock.Transitions.Add(addDelete);
            textBlock.Text = "Test Textblock " + i;
            //set font size, style, etc...
            textblocks.Add(textBlock);
        }

在文本块上添加 AddDeleteThemeTransition 后，您可以执行以下操作：

    private async Task showTextBlocks()
    {
        foreach (TextBlock tb in textblocks)
        {
            stackPanel.Children.Add(tb);
            await Task.Delay(50); //If you want them to stagger on... remove if not to stagger
        }
    }

    private async Task hideTextBlocks()
    {
        //remove the textblocks in reverse order
        for (int i = textblocks.Count - 1; i >= 0; i--)
        {
            TextBlock tb = textblocks[i];
            stackPanel.Children.Remove(tb);
            await Task.Delay(50); //if you want them to stagger off... remove if not to stagger
        }
    }

因为文本块元素应用了 AddDeleteThemeTransition 过渡，所以当它们被添加到堆栈面板或从堆栈面板中删除时，它们会产生动画。

这将提供一个动画...对它没有太多控制，但你可以玩弄它，看看它是否能满足你的需求。

有关其他转换类型的列表，您可以查看 Microsoft 文档here.

【讨论】：

【解决方案2】：

我相信您可以仅使用 xaml 来实现您想要的。故事板和 EventTriggerBehavior 是您所需要的。如果您有兴趣，我可以将示例与代码放在一起。

【讨论】：