2017-02-22 9 views
3

Я написал универсальное приложение для Windows под окнами 10, которое имеет ListView.Добавление перехода цвета к вновь добавленным элементам Listview

Этот ListView обновляется каждые пять секунд, если имеются новые данные. Его источником данных является ObservableCollection, который позволяет отображать максимум десять элементов, причем новейшие вставляются в начале коллекции. Это, похоже, работает хорошо, как вы видите ListView с элементами, медленно прокручивающимися по экрану.

Что я хочу сделать, это добавить какой-то переход цвета к новым элементам в ListView, так что когда они появятся, фон элемента начнет серо и станет белым. Я хочу этот эффект, чтобы пользователь мог легко увидеть новый элемент или элементы, которые только что появились в ListView.

Новые объекты, добавленные в коллекцию, имеют флаг, указывающий, что они новы. Я думал, что это можно использовать в качестве индикатора, если процесс анимации смог сбросить этот флаг после анимации? Или мне нужно использовать событие с ListView, если оно есть?

Я новичок в раскадках, поэтому не уверен в лучшем подходе. Может ли кто-нибудь посоветовать те области, которые я должен исследовать, чтобы получить анимацию или даже если это возможно в рамках UWP?

ответ

3

В принципе, всякий раз, когда новый элемент был добавлен, вы хотите оживить его цвет до светло-серого, а затем оживить его прямо назад.

Итак, главное - найти событие, которое вызывается при создании контейнера элементов. В этом случае 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.

enter image description here

+1

Это то, что мне нужно. Пора прочитать немного больше в этой области, чтобы я мог лучше понять. –

Смежные вопросы