Monday, January 20, 2014

How not to highlight alternate items in a virtualised list

It's a common requirement: highlighting alternate items in a list. There are various reasons for wanting to do this and almost infinite ways to visually represent the highlighted item.

As I've been asked to show an example of how to do this right, I present this simple example.

Grab the full source.

Here's all the CS.

And here's the corresponding XAML.




This code is for a page containing a pivot with 2 items. The first contains a ListBox using the "BadConverter" and the second contains a LongListSelector using the "GoodConverter". The same view model is bound to both lists.



The simple way to do the highlighting is with a converter. In the bad example the converter uses it's own reference to keep track of which items to highlight. (It just alternates the color that it applies to the items as they are realized.) The good example always applies the color based on a property of the item. This will always be the same for each item.
This means that if the lists are scrolled quickly the bad list may end up highlighting items in an order different to the one they are displayed in but the good list will always be highlighted based on the identifying property of the items, assuming that the items are in the correct order.



Obviously there are some assumptions in the above that it's probably good to make clear:
  • The use of a LongListSelector is only to help remind that the ListBox is deprecated in favor of the LongListSelector.
  • The "Id" property is used exclusively for determining the highlighting color. It has no other value. If the underlying property has an "Id" property that represents something else and might not always be in a sequential order, with no gaps, then creating another property ("PositionInList"?) for this purpose would be appropriate.
  • The values of the "Id" property could just be "1" and "2" repeatedly. For this example they don't need to increment.
  • The "Entry" class could have a property that returns a color and this could be bound to the display. This probably couple the display logic to the underlying view model too strongly. MVVM purists will have very strong objections to this ;)

I hope this helps.


8 comments:

  1. Every Omega Seamaster 300m in addition to Rolex Submariner are usually magnificent replica watches uk timepieces which have the particular seal of approval related to beauty, professional in addition to position. When you would like the actual budget-friendly inexpensive rolex replica look out for casual placed on, these kinds of are not to suit your needs. Nevertheless when you would like something which might enhance your personal cultural standing in addition to provide you with a trendy page, they're the most effective recommendations. Regarding accumulating more info concerning 2 superb guys timepieces for example Omega Seamaster 300m in addition to Rolex Submariner, be sure you check out these kinds of back links. omega replica uk Look at Business setup inside 1918, are actually generating top quality timepieces for nearly a hundred years at this time. rolex replica uk timepieces have supplied most of us wonderful timepieces over the last millennium. Resident timepieces have always been related to outstanding designs in addition to best. Their very own tag heuer replica timepieces are actually connected together with durability in addition to design. Few of the amazing operates related to Resident Timepieces are actually analyzed under.

    ReplyDelete
  2. oakley sunglasses cheap, http://www.oakley.in.net/
    ray ban sunglasses sale, http://www.raybansunglass.us.com/
    true religion jeans, http://www.truereligionjeanscanada.com/
    snow boots outlet, http://www.wintercoats.us.com/
    coach outlet store, http://www.coachoutletstores.com.co/
    stuart weitzman sale, http://www.stuartweitzmanoutlet.us/
    giuseppe zanotti sale, http://www.giuseppe-zanotti-outlet.org/
    ugg outlet, http://www.uggoutletstore.eu.com/
    asics, http://www.asicsisrael.com/
    parajumpers sale, http://www.woolrichoutletstore.us.com/
    los angeles clippers, http://www.clippersjerseystore.com/
    tiffany jewelry, http://www.tiffany-outlet.us.com/
    calvin klein,calvin klein outlet online,calvin klein wholesale,calvin klein shoes,calvin klein underwear,calvin klein coats,calvin klein handbags
    cheap ugg boots, http://www.cheapuggboots.net.co/
    michael kors uk, http://www.michaelkorsoutlet.org.uk/
    ray ban sunglasses,ray ban sunglasses outlet,ray ban,rayban,ray bans,ray ban outlet,ray-ban,raybans,ray ban wayfarer,ray-ban sunglasses,raybans.com,rayban sunglasses,cheap ray ban
    arizona cardinals, http://www.arizonacardinalsjersey.us/
    manchester united jersey, http://www.manchesterunitedonline.com/
    kkk10 13

    ReplyDelete