windows-phone-8 - WP8 Blend で ListBox をアニメーション化する方法

Question

以下の例のように、リストボックスがロードされているときに、最初の項目が2番目の項目よりも最初に来て、次に3番目の項目になるように、リストボックスでアニメーションをどのように行うのだろうか。

Answer 1

これは、 Windows Phone Toolkitの TurnstileFeatherEffect で実現できます。ここに完全なサンプル ページがあります。

これを行うには、次のトランジションをページに追加します

    <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 がある場合は、DataTemplate ではなく、ListBox 自体にインデックスを設定するだけで済みます。

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