Windows Phone listbox selected item transition

Question

In a Windows Phone 8 app, I would like to use the animation / transition /effect used into the Windows Phone Store app when an item is selected.

Here the explanation of the animation / transition :

• open the Official Windows Phone Store app
• do a research
• in the list of results click on an app
• watch the behaviour of the title of the app (it is going on the bottom right to reappear on the page with an animation too).

I am pretty sure that I have seen this effect on several other apps. So my question could be stupid, but is there a method or something into the SDK to do this effect / animation / transition or should I do "manually" ?

Thank you in advance for your tips about the subject !

Answer 1

I had searched for this as well some times back but could not find any template that I need to apply in order to get the same result.

At the end, I was creating my own animations to get a similar effect. I have a Button control which is used for a selection within my list. For the button template, I applied my own style that contains the following defintion for Visual State changes:

You can create button templates and style templates in Blend.

<Style x:Key="LongListSelectorButtonStyle" TargetType="Button">
    <Setter Property="Template">
        <Setter.Value>
            <ControlTemplate TargetType="Button">
                <Grid Background="Transparent">
                    <VisualStateManager.VisualStateGroups>
                        <VisualStateGroup x:Name="CommonStates">
                            <VisualState x:Name="Normal"/>
                            <VisualState x:Name="MouseOver"/>
                            <VisualState x:Name="Pressed">
                                <Storyboard>
                                    <DoubleAnimation Storyboard.TargetProperty="(Border.RenderTransform).(TranslateTransform.Y)"
                                                     Storyboard.TargetName="ButtonBackground"
                                                     From="0"
                                                     To="-6"
                                                     Duration="00:00:0.04"/>
                                    <DoubleAnimation Storyboard.TargetProperty="(Border.RenderTransform).(TranslateTransform.X)"
                                                     Storyboard.TargetName="ButtonBackground"
                                                     From="0"
                                                     To="2"
                                                     Duration="00:00:0.04"/>

                                </Storyboard>
                            </VisualState>
                            <VisualState x:Name="Disabled"/>
                        </VisualStateGroup>
                    </VisualStateManager.VisualStateGroups>

This animation will move the button a bit to the top right from its current position. You can change the animation to any other direction.