UWP Animating list item move

Question

In the ListView, adding and removing items is done with a nice animation. However when I move an item (or sort the collection) there is no nice animation, it seems to just reset.

Does anyone know how I can animate the items move to their new location? I've seen this behaviour in ios apps, surely it is possible in UWP?

You can see in this demo the remove animation is nice, the reorder is not.

Simple code example:

Xaml

<Page
    x:Class="ExampleApp.MainPage"
    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
    xmlns:local="using:ExampleApp"
    xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
    xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
    mc:Ignorable="d"
    Background="{ThemeResource ApplicationPageBackgroundThemeBrush}">
    <Grid>
        <Button Name="btnReorder" Content="Reorder" Click="btnReorder_Click" HorizontalAlignment="Left" Margin="10,10,0,0" VerticalAlignment="Top" Height="32" />
        <Button Name="btnRemove" Content="Remove" Click="btnRemove_Click"  HorizontalAlignment="Left" Margin="100,10,0,0" VerticalAlignment="Top" Height="32" />
        <ListView Name="list" Margin="0,200,0,0">
            <ListView.ItemTemplate>
                <DataTemplate x:DataType="local:MyData">
                    <Rectangle Width="100" Height="20" Fill="{x:Bind Path=Brush}" />
                </DataTemplate>
            </ListView.ItemTemplate>
        </ListView>
    </Grid>
</Page>

Code

using System.Collections.ObjectModel;
using Windows.UI;
using Windows.UI.Xaml;
using Windows.UI.Xaml.Controls;
using Windows.UI.Xaml.Media;

namespace ExampleApp
{
    public sealed partial class MainPage : Page
    {
        ObservableCollection<MyData> myCollection = new ObservableCollection<MyData>();

        public MainPage()
        {
            InitializeComponent();

            myCollection.Add(new MyData() { Brush = new SolidColorBrush(Colors.Red) });
            myCollection.Add(new MyData() { Brush = new SolidColorBrush(Colors.Blue) });
            myCollection.Add(new MyData() { Brush = new SolidColorBrush(Colors.Orange) });
            myCollection.Add(new MyData() { Brush = new SolidColorBrush(Colors.CornflowerBlue) });
            myCollection.Add(new MyData() { Brush = new SolidColorBrush(Colors.Yellow) });
            myCollection.Add(new MyData() { Brush = new SolidColorBrush(Colors.Green) });

            list.ItemsSource = myCollection;
        }

        private void btnReorder_Click(object sender, RoutedEventArgs e)
        {
            // moving an item does not animate the move
            myCollection.Move(2, 3);

        }

        private void btnRemove_Click(object sender, RoutedEventArgs e)
        {
            // removing does a nice animation
            myCollection.RemoveAt(1);
        }
    }

    public class MyData
    {
        public Brush Brush { get; set; }
    }
}

Thanks!

Answer 1

The template of ListView already contains these 4 transition:

<AddDeleteThemeTransition/>
<ContentThemeTransition/>
<ReorderThemeTransition/>
<EntranceThemeTransition IsStaggeringEnabled="False"/>

I don't know why, but ReorderThemeTransition should be triggered when an Item is moved, but it isn't.

Instead of move , try using this:

private void btnReorder_Click(object sender, RoutedEventArgs e)
    {
        var obj = myCollection[2];
        myCollection.RemoveAt(2);
        myCollection.Insert(3, obj);
    }

it sort of does what you wanted, not fully, but a sequence of remove - add animation.

Hope that helps.