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

它不是完全完成您想要的，而是一系列删除-添加动画。

希望有帮助。

UWP动画列表项移动

1 个答案: