Colin Eberhardt at ScottLogic has been doing some excellent work showing how we can make our own UIs animate in a fluid manner similar to the built in Microsoft UIs on Windows Phone.

His Fluid List Animation is particularly neat, and I thought I’d apply it to the UI I’m developing, specifically on a couple of LongListSelectors that I embed in Pivots.

Unfortunately his code didn’t work on the LongListSelector out of the box because although Colin went out of his way to make it work with any ItemsControl, the LongListSelector is not an ItemsControl.  Fortunately his code was well commented, and it was trivial to modify it to work with the LongListSelector.

All the changes are in the OnIsPivotAnimatedChanged method in the ListAnimation class.

private static void OnIsPivotAnimatedChanged(DependencyObject d, DependencyPropertyChangedEventArgs args)
{
//  ItemsControl list = d as ItemsControl;
    LongListSelector list = d as LongListSelector;

Next find the section that starts with the comment “locate the stack panel that hosts the items” and replace the code that follows it (up to and including the for loop) with:

var itemsInView = list.GetItemsWithContainers(true, true);

foreach (ContentPresenter item in itemsInView)
{
    var localItem = item;
    list.Dispatcher.BeginInvoke(() =>
    {
        var animationTargets = localItem.Descendants().Where(p => GetAnimationLevel(p) > -1);
        foreach (FrameworkElement target in animationTargets)
        {
            // trigger the required animation
            GetAnimation(target, fromRight).Begin();
        }
    });
}

The key is the call to GetItemsWithContainers – the first parameter indicates we only want items that are in view, and the second indicates we want the containers (hence the ContentPresenter type in the foreach).

That’s it – Colin did all the hard work – I just adapted it – all kudos to him.