Part 31: Multiple Selection with the LongListMultiSelector

Download this episode

Download Video

Download captions

Download Captions


Source Code:
PDF Version:

Our ultimate vision for the app is to allow the user to select one or more photos.

Game plan:

  1. We'll add a reference to the Windows Phone toolkit so that we can utilize the LongListMultiSelector, an improved version of the LongListSelector we've been using that allows a user to make multiple selections in the list.
  2. We'll convert our LongListSelector to a LongListMultiSelector and add attributes to its definition to enable its unique functionality


1. Install the Windows Phone toolkit package and review the samples

The Windows Phone Toolkit extends what we get out of the box with the Windows Phone 8 API, adding new components and functionality. I'm going to download the toolkit and samples just to see what this can do for us.


And click on the Downloads link.

Generic Episode Image


NOTE: THIS CHANGED SINCE THE SCREENSHOT ... Download the solution from the Source Code tab!

There's a single download that contains a solution for both Windows Phone 7 and 8 toolkits, as well as sample apps containing all the controls and features. I download it, right-click the zip file and Extract All:


Generic Episode Image


I'll put it in a temporary spot on my hard drive:


Generic Episode Image


And I'll open up the Solution folder, agreeing to the dialogs that warn me about downloading things from the Internet.
To run the Sample app:


Generic Episode Image


  1. Right-click the project in the Solution Explorer named: PhoneToolkitSample.WP8.
  2. Select "Set as StartUp Project" from the context menu.

Now, run the Solution in debug mode (F5).

There are dozens of samples featuring the controls and animations / transitions available in the toolkit:


Generic Episode Image


I love the date picker:


Generic Episode Image


... and the HubTile control which is strangely calming if you watch it for a few minutes:


Generic Episode Image


We're most interested in the LongListMultiSelector sample. It demonstrates several different modes that can be used to enable multi-selectable lists.

Click the "Select" button at the bottom:


Generic Episode Image


... and that puts the list into selection mode. Now, you can select the checkmarks next to each item, then click the icon in the App Bar which has changed to a Delete button:


Generic Episode Image


That's great, however not exactly what we need for our AroundMe project. Fortunately, the control's appearance and functionality can be configured in multiple ways.

If you swipe over to the Grid mode panel, there's another example that involves image thumbnails. If you click on an image, it shows a larger version in a light box. However, when you click the icon in the App Bar at the bottom, you can switch to Grid Selection Mode. This allows you to select one or more images. Each thumbnail that's selected will show a red triangle with a white checkmark icon in the upper-right-hand corner.


Generic Episode Image

That's what we'll want for the results of our Flickr API call results. This will allow the user to select multiple images to be saved to the phone and randomly used for the lock screen every 30 minutes.


2. Install the NuGet package into the project

To use the Windows Phone Toolkit package in our existing AroundMe project, the easiest way is to add it with NuGet.

Navigate to:


Generic Episode Image


I love the obvious package installation instructions on the NuGet site.

If the Package Manager Console is not already open, go to Visual Studio's Tools menu, select Library Package Manager, then the Package Manager Console sub menu option.

At the Package Manager command prompt, type: install-package WPToolkit

Generic Episode Image


Assuming you typed it correctly and it encountered no problems, you should see this:


Generic Episode Image


... and you should now see a reference to the Microsoft.Phone.Controls.Toolkit in the References section of the Solution Explorer for the AroundMe project:


Generic Episode Image


This NuGet package included some additional content ... a folder called Toolkit.Content with a few icon files, and a README_FIRST.txt file:


Generic Episode Image


The README_FIRST.txt file explains the purpose of the icons:


Generic Episode Image


3. Implement the LongListMultiSelector

Ok, so now we're ready to modify our SearchResults.xaml page. We'll be upgrading the LongListSelector control to the LongListMultiSelector control, changing a few attributes to enable the enhanced features we'll utilize:


Generic Episode Image


Before we can use it, we'll need to create an XML Namespace entry in the PhoneApplicationPage element at the very top of the page. See line 9:


Generic Episode Image


This XAML Namespace basically says this ... when you see an XAML element prefixed with toolkit, then look in the following assembly and the following CLR namespace for that class' definition. Somewhere in the Windows Phone Toolkit code, there's a namespace defined as Microsoft.Phone.Controls.Toolkit, and it has a class named LongListMultiSelector, among others. So, the compiler parses the element <toolkit:LongListMultiSelector />, and it knows to create an instance of that specific class.

In a nutshell, that's all there is to it, but you can learn even more about XAML Namespaces and mapping to custom classes and assemblies here:

Now that we have the XAML Namespace defined, we'll be able to reference the LongListMultiSelector like so:


Generic Episode Image


We can salvage most of the code, however we'll ...

  1. Change from <phone:LongListSelector to <toolkit:LongListMultiSelector as well as the closing element (line 51).
  2. Add the EnforceIsSelectionEnabled="True" attribute and setting. This property is important: it's what actually allows for the multi-selection behavior.
  3. Change from <phone:LongListSelector.ItemTemplate to <toolkit:LongListMultiSelector.ItemTemplate as well as the closing element (line 50).

Finally, we'll test to make sure we can actually multi-select:


Generic Episode Image





Just to recap, the big take away from this lesson is the Windows Phone toolkit ... what it is, what additional features it supplies, how to incorporate it into our app through NuGet and adding the XAML namespace, and so on. In most cases, all we have to do is think about the features we want to support and focus on those ... most of the heavy lifting has been done by someone else. Nonetheless, we need to be aware that these resources exist and know how to add them into our project.



Available formats for this video:

Actual format may change based on video formats available and browser capability.

    The Discussion

    • User profile image

      So I've been working on a project using the LongListMultiSelector and it's great, but my question is: how do I handle a single item being clicked in a list vs. the start & end of selecting multiple values? I want the user to be able to click through an item, but also be able to perform batch operations.





    • User profile image

      @tbarrasso: questions like that, I recommend just playing around and seeing what works best for you.  Personally I would mimic how the mail application works for large scale practice and the samples from have some good examples.  I'd highly suggest working on a small scale then integrate in.

    • User profile image

      @Clint:Thanks, I actually found the email sample too complex (and honestly poorly written, variable names like i, j, and k for ApplicationBarIcons is just bad practice). But I did find an older sample pretty helpful (using MultiselectList). I'm not sure a Tap listener within the DataTemplate is "best practice" but it works exactly like I wanted it to.

    • User profile image

      LongListMultiSelector is it possible apply into SoundBoard which from lesson 11 to 21?


    • User profile image

      @Howard: Sure.  Could leverage it to delete sounds for custom sounds if you wanted.  We wanted to include The multi-selection list in this example Smiley

    • User profile image

      @Clint: That's GREAT! I am very interesting about it. I was attempted apply multi-selection into soundboard about few days, but I get nothing. Hope can learn from tutorial video soon. Thanks

    • User profile image
      Rolie Precioso

      Is it possible to have different widths of images in a grid mode? Like what wrappanel does.

    • User profile image

      @Rolie Precioso: you can, just would require more work and additional bindings.  Nothing here is stopping you from using a wrap panel instead here,

    • User profile image
      Alan Feng

      Hi, I've build a MultiPhotoChooser after taking this serious of lesson for my first WP app Sweetshot.

      Please feel free to download and try it out if in need.

      Thank you so much for the lessons! Indeed shorten the learning curve of WP development.

    • User profile image

      @Alan Feng: Awesome, that is seriously cool.  Great work and I sincerely wish you all the success with your app and with your open source project!!!

    Comments closed

    Comments have been closed since this content was published more than 30 days ago, but if you'd like to send us feedback you can Contact Us.