Friday, March 2, 2012

Beware of the longlistselector.

I just finished and submitted our new app 'Timezone Converter' and feel I should warn people about a few issues I encountered with the longlistselector control.

The November 2011 update of the wp7 toolkit includes a longlist selector which is great for grouping together a long list of items. We used it for timezone regions. See screenshots below.


Overall the list worked great and in a fairly short amount of time I was able to populate the list with world timezone regions which were nicely grouped together under click-able headingss that allow the user to easily jump to different sections of the list.  (For information on working with timezones in wp7 see my earlier post on using the zoneinfo api in wp7).

Unfortunately I encountered two bugs in the control which I ended up wasting way too much time on.  The first problem is that binding the selecteditem did not work.  If you are using mvvm you will find this especially annoying.  The issue as well a workaround is described in detail here.  

The second issue (for which I found no information on the internet) can be repeated as follows:
  • Create an app and with a long list selector.  
  • Set it's visibility to collapsed
  • Include a button which when clicked sets the longlistselector's visibility property to 'visible'.
  • Run the app.  Click the button so that the long list selector is displayed then hold down the back button on your phone and switch to another application.
  • Hold down the back button and switch back to your application.
  • It will now hang on the resuming screen and eventually terminate without throwing an exception.

This bug was an absolute pain to get to get to the bottom of.  I tried to workaround it by just changing the margin of the grid containing the longlistselector so that it was either in view or out of view but this did not help. I also tried removing it from a grid and placing it in a stackpanel as well as just updating the longlistselector's visibilty directly but had no joy with that either.   In the end the workaround I used was simple.  I left the longlistselector as always being visible and just placed the grid containing my default form in front of it.  Instead of toggling the visibility on the longlistselector grid Ijust toggled the visibility of this default form and everything worked fine.  

Another obvious workaround would have been to just embed the longlistselector in a different xaml page and navigate back and forth between my main page and the longlistselector page.  However as my app was already working other than this bug I chose the first option.

I hope this helps someone as it took me quite a while to get to the bottom of both of these issues. 

3 comments:

  1. I am also getting issue of binding an ObservableCollection property to LLS. when i try it says InvalidCastException, but when i use List then it does not give error but then it does not bind. What i am doing wrong as both List and ObservableCollection implements IEnumerable.

    ReplyDelete
    Replies
    1. Hi it's hard to say without seeing your code. But my guess is that it has something to do with grouping. Here is a good example of how to provide an easy grouped observable collection for the long list selector.

      http://nicholasrogoff.wordpress.com/2011/01/28/creating-an-easy-grouped-observablecollection-for-the-longlistselector/

      Delete
  2. hi, is there a way to show the poped-up form of the longlistselector when the app loads?

    Its something like the first image on your post, but I want the longlist popped-up every time the user opens the app.

    ReplyDelete