Long list selector with item touch animation

Question

I am working on Windows Phone 8 , I have a long list of selectors with several elements in it. When I click on the elements, I need to add some animation to it, move the text and go back. How to achieve this? I am also trying to apply them to a list.

I tried this:

 <Style x:Key="LongListSelectorStyle1" TargetType="phone:LongListSelector"> <Setter Property="Background" Value="Transparent"/> <Setter Property="Foreground" Value="{StaticResource PhoneForegroundBrush}"/> <Setter Property="ItemTemplate"> <Setter.Value> <DataTemplate> <UserControl> <Border x:Name="MyBorder" Background="Transparent"> <VisualStateManager.VisualStateGroups > <VisualStateGroup x:Name="CommonStates"> <VisualState x:Name="Normal" /> <VisualState x:Name="Selected"> <Storyboard> <ObjectAnimationUsingKeyFrames Storyboard.TargetProperty="(Panel.Background)" Storyboard.TargetName="MyBorder"> <DiscreteObjectKeyFrame KeyTime="0" Value="#000000"/> </ObjectAnimationUsingKeyFrames> </Storyboard> </VisualState> </VisualStateGroup> </VisualStateManager.VisualStateGroups> </Border> </UserControl> </DataTemplate> </Setter.Value> </Setter> </Style> 

But it does not work.

Below is an example screenshot

How can i achieve this?

Answer 1

I would try using WPToolkit, which has an option where you can apply the tilt animation when you click an item in your ListBox or LongListSelector. Very cool. First you need to get the toolkit through NuGet in Visual Studio https://www.nuget.org/packages/WPtoolkit/4.2013.8.16 (link to the site, but you add it using the package manager console within Visual Studio, and it automatically installs all settings). Check this link http://www.davidsalter.com/2013/09/using-windows-phone-toolkit-in-wp8.html and after it appears. In the tag where you declared ListBox or LongListSelector, insert the following

 `<ListBox ... toolkit:TiltEffect.IsTiltEnabled="True" ../> 

That should work.