Windows Phone Toolkit ListPicker Throws an Unhandled Exception

Question

I'm working on a Windows Phone 8 app. My app uses the ListPicker from the Tookit. My code in question looks like the following:

<toolkit:ListPicker x:Name="myListPicker" Margin="12,-6,12,-2" Loaded="myListPicker_Loaded">
  <toolkit:ListPicker.Items>
    <!-- Items are defined here -->
  </toolkit:ListPicker.Items>
</toolkit:ListPicker>


private void myListPicker_Loaded(object sender, RoutedEventArgs e)
{
  if ((myListPicker != null) && (viewModel != null))
  {

  }
}

Whenever the total number of items passes a certain threshold, my app throws an System.ArgumentException. I know this, because I have the following code:

    private void Application_UnhandledException(object sender, ApplicationUnhandledExceptionEventArgs e)
    {
        MessageBox.Show(e.ExceptionObject.Message + "\n\nException\n" + e.ExceptionObject.GetType().FullName + "\n" + e.ExceptionObject.StackTrace);
        if (Debugger.IsAttached)
        {
            // An unhandled exception has occurred; break into the debugger
            Debugger.Break();
        }
    }

The message says "Value does not fall within the expected range.". From what I can tell, this happens when the ListPicker needs to go into full screen mode. I can't figure out why this happens though.

Does anyone have any insights?

Answer 1

Seemingly, with full screen mode you cannot set the ListPicker's items to specific UI Elements within the xaml page. You must bind them or use templating.

After having this exact problem, I found an explanation here: http://silverlight.codeplex.com/workitem/9412

ListPickerItems are UIElements, and the ListPicker renders them in its presenter. When there are 5 or less items, the expanded mode opens on the current page, and you can see all the items in the presenter. When 6 or more items are present, opening the list picker goes to full mode which opens a new page. This new page has a listbox, which gets its items property set to the listpicker's items. This is where it breaks. By setting the listbox's items to the listpicker's items (in this case a list of listpickeritems), the listbox will put those UIElements into its view. Now a single listboxitem is included in two places on the visual tree.

Because of this issue, ListPicker only supports databinding and templating. DO NOT set the ListPicker's items to specific UIElements.

I managed to get my solution working doing something like this:

<toolkit:ListPicker x:Name="myListPicker" Margin="12,-6,12,-2" Loaded="myListPicker_Loaded">
  <toolkit:ListPicker.ItemTemplate>
      <DataTemplate>
          <TextBlock Text="{Binding Name}" Tag="{Binding ID}"/>
      </DataTemplate>
   </toolkit:ListPicker.ItemTemplate>
   <toolkit:ListPicker.FullModeItemTemplate>
      <DataTemplate>
          <TextBlock Text="{Binding Name}" Tag="{Binding ID}"/>
      </DataTemplate>
   </toolkit:ListPicker.FullModeItemTemplate>
</toolkit:ListPicker>


private void myListPicker_Loaded(object sender, RoutedEventArgs e)
{
  if ((myListPicker != null) && (viewModel != null))
  {
     myListPicker.ItemsSource = _Data; //_data is an array of objects with 2 properties named ID & Name
  }
}