Click here to Skip to main content
Click here to Skip to main content

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

, 10 Mar 2005
Rate this:
Please Sign up or sign in to vote.
If a list view is frequently updated it is often difficult for users to notice all updates. This ListView control will solve this problem by displaying changes to list view items with different colors depending on how it’s been changed, and let the item slowly fade to its original color.

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.

License

This article has no explicit license attached to it but may contain usage terms in the article text or the download files themselves. If in doubt please contact the author via the discussion board below.

A list of licenses authors might use can be found here

Share

About the Author

Patric_J
Web Developer
United States United States
I'm a software developer from Sweden who got tired of snow and cold weather and moved to USA. I choose New York City, so I wouldn't totally miss out on snow and cold weather. I work on Wall Street with financial systems (not much else to do in this neighborhood). I primarily use Visual C++/MFC or C#/.NET as development tool.
 
The picture is of my wife and me in Cannes, France, drinking the most expensive Coke we ever had.

Comments and Discussions

 
SuggestionThank you! PinmemberHovhannesT2-Apr-12 11:14 
QuestionVS2005 PinmemberRob Leenheer9-Sep-06 5:02 

General General    News News    Suggestion Suggestion    Question Question    Bug Bug    Answer Answer    Joke Joke    Rant Rant    Admin Admin   

Use Ctrl+Left/Right to switch messages, Ctrl+Up/Down to switch threads, Ctrl+Shift+Left/Right to switch pages.

| Advertise | Privacy | Mobile
Web04 | 2.8.141022.2 | Last Updated 10 Mar 2005
Article Copyright 2005 by Patric_J
Everything else Copyright © CodeProject, 1999-2014
Terms of Service
Layout: fixed | fluid