Добавление перехода цвета к вновь добавленным элементам Listview

Question

Я написал универсальное приложение для Windows под окнами 10, которое имеет 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.