时间戳

首页 > 解决方案 > UWP 动画列表项移动

c# - UWP 动画列表项移动

问题描述

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

谢谢！

标签： c#.netxamluwp

解决方案

的模板ListView已经包含这 4 个转换：

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

我不知道为什么，但是ReorderThemeTransition应该在 Item 被移动时触发，但事实并非如此。

而不是move，尝试使用这个：

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

它有点像你想要的，不是完全的，而是一系列删除 - 添加动画。

希望有帮助。

推荐阅读