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

时间:2013-07-20 01:16:39

标签: windows-phone-8 blend

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

enter image description here

1 个答案:

答案 0 :(得分:4)

您可以使用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>