Windows Phone ListView Item Animation

Question

I downloaded the Silverlight Toolkit for Windows Phone from Codeplex. In the demo I noticed the main view had a StackPanel where items were listed and pressing an item gave the visual indication of such, similar to how native Windows Phone menus do. In trying to figure out how they did it, I see transition effects added at the top of the page with the following XAML:

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

My initial assumption is this is what makes the buttons have this animation, however I can't seem to figure out how they make it work. There is no obvious connection between the above XAML and everything else below.

Any tips? I'm trying to get a ListView's items to mimic this press visualization.

Answer 1

The animations you have listed are transition animations used when the page is navigated to and from. What it sounds like you're actually looking for are Tilt animations, also in the Silverlight toolkit.

As you've already downloaded the toolkit, you just need to make sure you've added it as a reference to your project and then insert the following code at the top of your page somewhere within the opening 'phone:PhoneApplicationPage' tag:

xmlns:toolkit="clr-namespace:Microsoft.Phone.Controls;assembly=Microsoft.Phone.Controls.Toolkit"
toolkit:TiltEffect.IsTiltEnabled="True"

This will automatically augment all Buttons and ListBoxItems with the Tilt effect. If you want other items to have the Tilt effect you can simply add 'toolkit:TiltEffect.IsTiltEnabled="True"' properties to the item's tag.

You can read about the Tilt animation in depth here: http://windowsphonegeek.com/articles/Silverlight-for-WP7-Toolkit-TiltEffect-in-depth