How to make an animated ListView? - xaml

Question

I realised that storyboard only working with silverlight Wp 8.1 apps. So what about non-silverlight? I've want to make an animation of smooth appearing elements of listview after page transition. How can i make it? I check VisualStateGroup, but to make animation like that i should make a code behind. Is it possible to make only by XAML?

Answer 1

If you want to use XAML you can use the built in transitions which you can choose from already predefined ones. One drawback is that you can't create your own transitions this way.
To change the item transitions change the ItemContainerTransitions property on your ListView:
<ListView x:Name="MyListView">
<ListView.ItemContainerTransitions>
<TransitionCollection>
<!--<ContentThemeTransition HorizontalOffset="0"/>-->
<!--<EntranceThemeTransition />-->
<!-- <AddDeleteThemeTransition /> -->
<!-- <RepositionThemeTransition/> -->
<!-- <ReorderThemeTransition /> -->
<!-- <PopupThemeTransition/> -->
<!-- <EdgeUIThemeTransition Edge="Top"/> -->
</TransitionCollection>
</ListView.ItemContainerTransitions>
</ListView>
You can combine them if you want. Just uncomment any of the above code and use which suits you best.
You can create custom item animations when you extend ListView and override the GetContainerForItemOverride or PrepareContainerForItemOverride methods. You can use XAML if you want for example a Storyboard defined in as a StaticResource. Here is an example:
public class MyListView : ListView
{
protected override DependencyObject GetContainerForItemOverride()
{
var container = base.GetContainerForItemOverride();
var da = new DoubleAnimation();
// init da...
var sb = new Storyboard();
// initi sb with container
sb.Begin();
return container;
}
protected override void PrepareContainerForItemOverride(DependencyObject element, object item)
{
base.PrepareContainerForItemOverride(element, item);
var da = new DoubleAnimation();
// init da...
var sb = new Storyboard();
// initi sb with element
sb.Begin();
}
}