Multiple selection in Listpicker

I thought I would write a quick how-to about how to use the ListPicker for selection of multiple items.

First create a ListPicker in XAML with a few deafult strings like below:

<toolkit:ListPicker Name="myListPicker" Header="Countries" FullModeHeader="CHOOSE COUNTRIES"
SelectionChanged="myListPicker_SelectionChanged" SelectionMode="Multiple">
   <sys:String>Denmark</sys:String>
   <sys:String>Finland</sys:String>
   <sys:String>Norway</sys:String>
   <sys:String>Sweden</sys:String>
</toolkit:ListPicker>

Notice the attribute SelectionMode=”Multiple”, which sets that the user can select multiple items, we also added an event handler for the SelectionChanged event.
Note: To use < sys:string > you need to add xmlns:sys=”clr-namespace:System;assembly=mscorlib” at the top in the < phone:PhoneApplicationPage> tag.

Now in the construct for the page, add the following code:

myListPicker.SummaryForSelectedItemsDelegate = SummarizeItems;

This assigns the function SummarizeItems to summarize the string to be shown for the selected items. Let’s create that function now:

private string SummarizeItems(IList items)
{
   if(items != null && items.Count > 0)
   {
      string summarizedString = "";
      for(int i = 0; i < items.Count;i++)
      {
         summarizedString += (string)items[i];
 
         // If not last item, add a comma to seperate them
         if(i != items.Count - 1)
            summarizedString += ", ";
      }
 
      return summarizedString;
   }
   else
      return "Nothing selected";
}

This function gets an IList with all selected items and we just loop through them and add to a string with a comma between every selected item. Then we return the string, which will be shown when the list picker is in normal mode.

Hope you enjoyed this quick how-to!

ListPicker inside ScrollViewer WP7 Toolkit Mango

Today I was going to add a ScrollViewer to my project, the problem is that inside the ScrollViewer control I had a ListPicker. Shouldn’t be a problem, right?

But unfortunatly that seems to be a known issue in the August release of the WP7 Toolkit. To resolve this I found a solution over att the Silverlight Toolkit website that seems to work. What you have to do is edit the source of the WP7 toolkit, more precisly the file ListPicker.cs. Here is how you do it:

On line 881, change the following:

if (IsValidManipulation(e.OriginalSource, e.ManipulationOrigin.X, e.ManipulationOrigin.Y)
     && 0 < Items.Count)
{
   if (Open())
   {
      e.Handled = true;
   }
}

To this:

Point point = new Point(e.ManipulationOrigin.X, e.ManipulationOrigin.Y);
if (e.ManipulationContainer != e.OriginalSource)
{
   var trans = e.ManipulationContainer.TransformToVisual((UIElement)e.OriginalSource);
   point = trans.Transform(point);
}
 
if (IsValidManipulation(e.OriginalSource, point.X, point.Y) && 0 < Items.Count)
{
   if (Open())
   {
      e.Handled = true;
   }
}

Credit for this goes to Drachen23 at CodePlex.

Source: http://silverlight.codeplex.com/workitem/9332

Note: The solution also mention, to handle the Tap event of the ListPicker does not seem to work, it correctly opens the ListPicker, but does not always react when user wants to close it in Expanded Mode.