当ObservableCollection在UWP上排序时,如何在ListView中获得漂亮的动画?

时间:2018-03-26 12:34:18

标签: c# xaml uwp uwp-xaml

我无法在ListView中获得良好的重新排序动画 - 还尝试通过<Transitions><TransitionsCollection> ...属性覆盖所有各种内部过渡。没有。尝试使用简单的.Insert / .Remove和.Move并且都不能很好地工作。

插入/移除包含碰巧被推动的项目的动画,而.Move就像集合上的重置一样。

MainPage中的以下代码:

public sealed partial class MainPage : Page
{
    private ObservableCollection<Holder> Items = new ObservableCollection<Holder>(Enumerable.Range(0, 10).Select(x => new Holder(x)));
    public MainPage()
    {
        this.InitializeComponent();
        Items.CollectionChanged += Items_CollectionChanged;

    }

    private void Items_CollectionChanged(object sender, System.Collections.Specialized.NotifyCollectionChangedEventArgs e)
    {
    }

    private Random _random = new Random();
    private bool asc = true;
    private void Button_Click(object sender, RoutedEventArgs e)
    {
        IList<Holder> temp;
        //var temp = Items.Skip(1).Union(Items.Take(1)).ToList();
        // var temp = new Holder[] { Items.ElementAt(Items.Count - 1) }.Union(Items.Take(Items.Count - 1)).ToList();
        temp = Items.OrderBy(x => _random.NextDouble()).ToList();
        // temp = asc ? Items.OrderBy(x => x.I).ToList() : Items.OrderByDescending(x => x.I).ToList();

        asc = !asc;

        for (int i = 0; i < temp.Count; i++)
        {
            if (Items[i] != temp[i])
            {
                // When using Move, no animation occurs at all. When using Remove/Insert, there's partial
                // animation for the items that happened to stay at the same place.
                //Items.Move(Items.IndexOf(temp[i]), i);
                Items.Remove(temp[i]);
                Items.Insert(i, new Holder(temp[i].I));
            }
        }
    }
}

public class Holder
{

    public Holder(int i)
    {
        I = i;
    }

    public string Name => "Hey hey hey " + I.ToString();

    public int I { get; private set; }

    public override bool Equals(object obj)
    {
        return ((Holder)obj).I == I;
    }

    public override int GetHashCode()
    {
        return I.GetHashCode();
    }
}

使用以下XAML:

<Grid Background="{ThemeResource ApplicationPageBackgroundThemeBrush}">
    <Grid.RowDefinitions>
        <RowDefinition Height="*"/>
        <RowDefinition Height="Auto"/>
    </Grid.RowDefinitions>

    <Button Content="Mix" Click="Button_Click" Grid.Row="1"></Button>

    <ListView ItemsSource="{x:Bind Items}" >
        <ListView.ItemTemplate>
            <DataTemplate>
                <Border BorderThickness="3" BorderBrush="Blue">
                    <TextBlock Text="{Binding Name}" Margin="20"/>
                </Border>
            </DataTemplate>
        </ListView.ItemTemplate>

    </ListView>
</Grid>

0 个答案:

没有答案