UWP 动画列表项移动

Posted 2023-04-12

【中文标题】UWP 动画列表项移动

【英文标题】：UWP Animating list item move

【发布时间】：2019-02-04 01:35:23

【问题描述】：

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

谢谢！

【参考方案1】：

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

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

希望对您有所帮助。

【讨论】：

感谢您的有趣评论，这对某些情况很有用。

嗨@MartinRichards 上面的问题与this 重复。并且Muzib的回复是正确的，请考虑采纳。

对原始问题完全没有帮助。我正在寻找一个在排序操作期间非常有用的 MOVE 动画。我同意OP。这在 iOS 中是标准的，为什么在 UWP 中不可用？