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"/>

我不知道為什么，但是當移動一個Item時應該觸發ReorderThemeTransition ，但事實並非如此。

而不是move ，嘗試使用此：

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

它有點像你想要的，不是完全的，而是一系列刪除 - 添加動畫。

希望有所幫助。