Display updated list view items with fading color effects in a ListView control

• Download source files - 18.2 Kb

Figure 1: The demo application with the list view control.

Introduction

Normally a list view is updated by a user directly by selecting a list view item and then editing or deleting it. New items are usually added at the bottom of the list. This works fine since the user knows which items have been changed or deleted and where the new items will pop up. A drawback of it is that, if the list is sorted, then new items will not be displayed in a sorted way, instead they will be listed in the order of being created.

Some list views however are automatically modified because of some event which causes the list view to be updated. If these updates occur frequently, it will be difficult for the user to see what has changed, since the user has not initiated the change and did not expect it. An example of this is a list view displaying stock prices in real time. The stock prices are usually updated in a fast manner and keeping up with these updates is not an easy task. Highlighting these changes will definitely be a welcoming feature for the user.

The class FadingListView is a solution to these problems. A changed list view item is displayed in a different color than the other list view items to make it stick out; to show it is a “hot” item. The item will then slowly cool with time and change to its original color, i.e. normal color. The same goes for the added items as well; except we should use another color to display the fact that an item has been recently added and not recently edited. Since we now display added items with another color we do not need to display them at the bottom of the list, instead we will display them where the user expects them to be, nicely sorted in the list. Deleted items will work somewhat differently. Instead of directly removing them from the list, we first color them with some distinct color and then let them fade away, that is slowly changing their color to become same as the list view control’s background color. They will gradually become invisible and then it is time to remove them from the list.

Implementation of FadingListView

FadingListView inherits from ListView. The class ListView is very difficult to override through inheritance, since its logic is split up into so many classes, that is ListView, ListViewItemCollection, ListViewItem, and so on. Most of the methods and properties we need to override are non virtual so we need to solve this by adding new methods instead of overriding the existing ones.

So we need to add a few methods to call from any client code that wants to use the list view. The extra information we need for the list view item to handle color fading will be stored in the item’s user data tag, which is an associated data object which can be used for such purposes. We use a class called TagWrapper to hold a user’s data tag as well as an item’s status and current color. A timer which ticks every second is used to achieve the fading effect through a slow color transformation. Every second we loop through all existing list view items and then fade their colors by one step until they have faded back to their original color. If they are deleted, they will fade to the list view’s background color; that is become invisible. When that happens, we remove them from the list view. The source code for the class is richly commented so see the attached code for more details.

Using FadingListView

The FadingListView control has design time support to set a few of its properties. As can be seen in figure 2, different colors can be set to distinguish between changes to the list view items. Also the time for which these colors should be used before fading away can be set. Of course this can also be set in the code using public properties of the FadingListView class.

Figure 2: Design time support.

The following code shows how to use the FadingListView class while adding, editing and deleting list view items:

// Create a FadingListView object.

FadingListView fadingListView = new FadingListView();

// To add a list view item we call AddItem().

ListViewItem listViewItem = new ListViewItem();
// Update listViewItem.
fadingListView.AddItem(listViewItem);

// To change a list view item we call ChangeItem().
// Here we will change the currently selected item.

ListViewItem listViewItem = fadingListView.SelectedItems[0];
// Update listViewItem.
fadingListView.ChangeItem(listViewItem);

// To delete a list view item we call DeleteItem().
// Here we will delete the currently selected item.

ListViewItem listViewItem = fadingListView.SelectedItems[0];
fadingListView.DeleteItem(listViewItem);

Since we use the tag of a list view item, it just can’t be accessed as usual with the Tag property of a ListViewItem object. Instead we have two new static functions for that: SetTag() and GetTag(). In the code below, listViewItem is an object of type ListViewItem which should be added to our list view using the AddItem() method.

FadingListView.SetTag(listViewItem, "some reference"); 

string itemRef = (string)FadingListView.GetTag(listViewItem);

ColorTransform class

The class FadingListView uses a help class ColorTransform to do the actual color transformation. Explanation of the usage and internal workings of the ColorTransform class can be found in my C# blog, in this blog entry.

Limitations

The current implementation of FadingListView supports only single select. Since we loop every second over all the list view items, this implementation might get slow if the list view contains more items. The SetTag() and GetTag() methods require that a list view item be added to the list view before being called using the AddItem() method or an exception will be thrown.