CODEWITHSUNDEEP
windowsxamluwpwindows-10-universal
Ian Munro
Ian Munro

Reputation: 267

Adding colour transition to newly added Listview items

I have written a windows universal app under windows 10 that has a ListView.

This ListView updates every five seconds if new data if available. Its data source is an ObservableCollection that only allows a maximum of ten items to be shown, with the newest being inserted at the front of the collection. This seems to work well as you see the ListView with items slowly scrolling down the screen.

What I want to do is add some sort of colour transition to the new items in the ListView, so that when they appear, the background of the item starts off grey and fades to white. I want this effect so that a user can easily see the new item or items that have just appeared in the ListView.

The new objects added to the collection have a flag set to indicate they are new. I thought this could be used as an indicator if the animation process was able to reset this flag after the animation? Or should I look to use an event off the ListView, if there is one?

I’m new to storyboards so am not sure the best approach. Can anyone advise on the areas I should research to get the animation or even if it's possible under the UWP?

Upvotes: 3

Views: 112

Answers (1)

Justin XL
Justin XL

Reputation: 39006

Basically, whenever a new item has been added, you want to animate its color to light gray and then animate it right back.

So the key thing is to find the event that's invoked during the item container creation. In this case, ContainerContentChanging is your friend.

Since you need to animate the color a few times during an animation, you will need ColorAnimationUsingKeyFrames rather than a normal ColorAnimation. The whole Timeline and Storyboard syntax can be a bit confusing at times so I have created a simple demo for you here. Hope it helps. :)

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

Here's how it looks like in a demo app.

enter image description here

Upvotes: 4

Related Questions