WP8 如何使用 Blend 为 ListBox 设置动画

Posted

技术标签:

【中文标题】WP8 如何使用 Blend 为 ListBox 设置动画【英文标题】:WP8 How to animate a ListBox with Blend 【发布时间】:2013-07-20 01:16:38 【问题描述】:

我想知道如何使用列表框制作动画,以便第一个项目先于第二个,然后是第三个,这样当列表框加载时,如下例所示。

【问题讨论】:

【参考方案1】:

您可以使用 Windows Phone Toolkit 中的 TurnstileFeatherEffect 来完成此操作。这是complete sample page。

您可以通过将以下转换添加到您的页面来完成此操作

    <toolkit:TransitionService.NavigationInTransition>
    <toolkit:NavigationInTransition>
        <toolkit:NavigationInTransition.Backward>
            <toolkit:TurnstileFeatherTransition Mode="BackwardIn"/>
        </toolkit:NavigationInTransition.Backward>
        <toolkit:NavigationInTransition.Forward>
            <toolkit:TurnstileFeatherTransition Mode="ForwardIn"/>
        </toolkit:NavigationInTransition.Forward>
    </toolkit:NavigationInTransition>
</toolkit:TransitionService.NavigationInTransition>
<toolkit:TransitionService.NavigationOutTransition>
    <toolkit:NavigationOutTransition>
        <toolkit:NavigationOutTransition.Backward>
            <toolkit:TurnstileFeatherTransition Mode="BackwardOut"/>
        </toolkit:NavigationOutTransition.Backward>
        <toolkit:NavigationOutTransition.Forward>
            <toolkit:TurnstileFeatherTransition Mode="ForwardOut"/>
        </toolkit:NavigationOutTransition.Forward>
    </toolkit:NavigationOutTransition>
</toolkit:TransitionService.NavigationOutTransition>

然后说明您希望它们飞入的顺序。您可以通过在每个要设置动画的项目上设置 FeatheringIndex 来做到这一点。如果您有一个想要为项目设置动画的 ListBox,则只需在 ListBox 本身而不是 DataTemplate 上设置索引。

<ListBox toolkit:TurnstileFeatherEffect.FeatheringIndex="0">
</ListBox>

【讨论】:

我也一直在寻找这个。谢谢肖恩;) 在我的页面和列表框工具包中添加了所有没有问题的内容:TurnstileFeatherEffect.FeatheringIndex = "0" 加上没有任何反应,只是没有任何效果 您需要更改应用程序的RootFrame。在 App.xaml.cs 中将 RootFrame 分配更改为 RootFrame = new TransitionFrame(); 我这样做了,但是当列表加载时,第一页不会兴奋,只有当我离开页面时。我正在通过触发器 onload 加载它。 @famadori 你解决了这个问题了吗?我的转换也只有在离开页面时才有效。

以上是关于WP8 如何使用 Blend 为 ListBox 设置动画的主要内容,如果未能解决你的问题,请参考以下文章

零元学Expression Blend 4 - Chapter 31 看如何简单的把SampleData 绑进ListBox里

零元学Expression Blend 4 - Chapter 28 ListBox的基本运用与更改预设样式

如何在 Blend 中创建自定义列表

零元学Expression Blend 4 - Chapter 29 ListBox与Button结合运用的简单功能

用wpf或者blend怎么修改listbox被选中项的颜色

当 DataTemplate 为 Button 时,ListBox 项返回字符串