Tuesday, October 28, 2008

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

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.

For more information, see http://www.codeproject.com/KB/list/FadingListView.aspx