UWP Анимация перемещения элемента списка

Question

В ListView добавление и удаление элементов выполняется с помощью приятной анимации. Однако, когда я перемещаю элемент (или сортирую коллекцию), анимация отсутствует, кажется, она просто сбрасывается.

Кто-нибудь знает, как я могу оживить элементы, перемещенные на новое место? Я видел такое поведение в приложениях IOS, конечно, это возможно в UWP?

В этой демонстрации вы видите, что анимация удаления - это хорошо, а порядок - нет.

Простой пример кода:

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>

код

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; }
    }
}

Спасибо!

Answer 1

Шаблон ListView уже содержит следующие 4 перехода:

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

Я не знаю почему, но ReorderThemeTransition должен срабатывать при перемещении Предмета, но это не так.

Вместо move, попробуйте использовать это:

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

это делает то, что вы хотели, не полностью, а последовательность удаления - добавьте анимацию.

Надеюсь, это поможет.