为新添加的 Listview 项目添加颜色过渡

Question

我在 windows 10 下编写了一个 windows 通用应用程序，它有一个 ListView。

如果有可用的新数据，此 ListView 每五秒更新一次。它的数据源是一个 ObservableCollection ，最多只允许显示十个项目，最新的被插入到集合的前面。当您看到 ListView 项目在屏幕上缓慢滚动时，这似乎很有效。

我想要做的是向 ListView 中的新项目添加某种颜色过渡，以便当它们出现时，项目的背景从灰色开始逐渐变为白色。我想要这种效果，以便用户可以轻松地看到新项目或刚刚出现在 ListView 中的项目。

添加到集合中的新对象设置了一个标志以表明它们是新的。如果动画过程能够在动画之后重置此标志，我认为这可以用作指示器？或者我是否应该考虑使用 ListView 之外的事件（如果有的话）？

我是故事板的新手，所以不确定最佳方法。任何人都可以建议我应该研究哪些领域来获得动画，或者即使在 UWP 下是可能的？

Answer 1

基本上，无论何时添加新项目，您都希望将其颜色设置为浅灰色，然后再设置动画。

所以关键是找到在项目容器创建过程中调用的事件。在这种情况下，ContainerContentChanging 是你的朋友。

由于您需要在动画过程中对颜色进行多次动画处理，因此您需要 ColorAnimationUsingKeyFrames 而不是普通的 ColorAnimation。整个 Timeline 和 Storyboard 语法有时会有点混乱，所以我在这里为您创建了一个简单的演示。希望能帮助到你。 :)

private void OnListViewContainerContentChanging(ListViewBase sender, ContainerContentChangingEventArgs args)
{
    if (args.ItemContainer != null && !args.InRecycleQueue && args.Phase == 0)
    {
        var colorAnimation = new ColorAnimationUsingKeyFrames
        {
            // 'cause the new item comes in with an animation of which duration is about 300s, we add a little delay here to only
            // animate the color after it appears.
            BeginTime = TimeSpan.FromMilliseconds(300)
        };
        var keyFrame1 = new LinearColorKeyFrame { KeyTime = KeyTime.FromTimeSpan(TimeSpan.FromMilliseconds(0)), Value = Colors.White };
        var keyFrame2 = new LinearColorKeyFrame { KeyTime = KeyTime.FromTimeSpan(TimeSpan.FromMilliseconds(400)), Value = Colors.LightGray };
        var keyFrame3 = new LinearColorKeyFrame { KeyTime = KeyTime.FromTimeSpan(TimeSpan.FromMilliseconds(1200)), Value = Colors.White };
        colorAnimation.KeyFrames.Add(keyFrame1);
        colorAnimation.KeyFrames.Add(keyFrame2);
        colorAnimation.KeyFrames.Add(keyFrame3);

        Storyboard.SetTarget(colorAnimation, args.ItemContainer);
        Storyboard.SetTargetProperty(colorAnimation, "(Control.Background).(SolidColorBrush.Color)");

        var storyboard = new Storyboard();
        storyboard.Children.Add(colorAnimation);
        storyboard.Begin();
    }
}

下面是它在 demo 应用中的样子。

为新添加的 Listview 项目添加颜色过渡

Adding colour transition to newly added Listview items

windows

xaml

uwp

windows-10-universal