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:
FadingListView fadingListView = new FadingListView();
ListViewItem listViewItem = new ListViewItem();
fadingListView.AddItem(listViewItem);
ListViewItem listViewItem = fadingListView.SelectedItems[0];
fadingListView.ChangeItem(listViewItem);
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.