将颜色过渡添加到新添加的Listview项目

Question

我在Windows 10下编写了一个具有ListView的Windows通用应用程序。

如果新数据可用，则此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应用中的效果。