WP8 How to animate a ListBox with Blend

Question

I wonder how do an animation with listbox so that the first item comes first than the second, then the third, and so when the listbox is loading as in the example below.

Answer 1

You can accomplish this with the TurnstileFeatherEffect from the Windows Phone Toolkit. Here is a complete sample page.

You accomplish this by adding the following transitions to your 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>

And then state in which order you want them to fly in. You do this by setting the FeatheringIndex on each item that you want animated. If you have a ListBox that you want to animate the items, you only need to set the index on the ListBox itself and not on the DataTemplate.

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