Please note that as of October 24, 2014, the Nokia Developer Wiki will no longer be accepting user contributions, including new entries, edits and comments, as we begin transitioning to our new home, in the Windows Phone Development Wiki. We plan to move over the majority of the existing entries. Thanks for all your past and future contributions.

Handling ListPicker control inside ScrollViewer

From Wiki
Jump to: navigation, search

This article explains how to work with ListPicker control present in Windows Phone Toolkit when placed inside a ScrollViewer.

WP Metro Icon UI.png
WP Metro Icon Tools.png
WP Metro Icon WP8.png
Article Metadata
Code ExampleTested with
SDK: Windows Phone 8.0 SDK
Devices(s): Nokia Lumia 820, Emulator
Windows Phone 8
Created: vineet.jain (18 Jun 2014)
Last edited: vineet.jain (26 Jun 2014)



Sometimes in an app there's a requirement to place many UI controls on the screen like textbox, button, textblock etc. one after other or otherwise and it gives a bad user experience if those controls do not work as expected when user clicks/taps on it and ListPicker control is no different.

Try placing various UI controls along with ListPicker at the bottom with ScrollViewer encapsulating the screen, you will notice that only an item or two are visible to the user when ListPicker is tapped and rest of the items are hidden below the screen i.e. as expected ListPicker does not 'shifts-up' the UI controls above it to show all the items it contain.

Refer these pictures to have a better understanding :


Well i ran into the same problem and while searching for a workaround , found this fantastic blog by Mark Monster : make-the-listpicker-or-radlistpicker-behave-in-a-scrollviewer

To quickly summarize as what is depicted in this code blog is the need to make the ListPicker control visible all the time inside the ScrollViewer and to do so, some extension methods are written. Its a well explained blog so it won't be fair to copy here the same piece of code, instead attaching a running example project as how to actually use the code in the app would be useful.


The ListPicker control behaves in the way it should be, displaying all the contained items by properly shifting the other controls.


Example project showcasing the same can be downloaded from here :

Version Hint

Windows Phone: [[Category:Windows Phone]]
[[Category:Windows Phone 7.5]]
[[Category:Windows Phone 8]]

Nokia Asha: [[Category:Nokia Asha]]
[[Category:Nokia Asha Platform 1.0]]

Series 40: [[Category:Series 40]]
[[Category:Series 40 1st Edition]] [[Category:Series 40 2nd Edition]]
[[Category:Series 40 3rd Edition (initial release)]] [[Category:Series 40 3rd Edition FP1]] [[Category:Series 40 3rd Edition FP2]]
[[Category:Series 40 5th Edition (initial release)]] [[Category:Series 40 5th Edition FP1]]
[[Category:Series 40 6th Edition (initial release)]] [[Category:Series 40 6th Edition FP1]] [[Category:Series 40 Developer Platform 1.0]] [[Category:Series 40 Developer Platform 1.1]] [[Category:Series 40 Developer Platform 2.0]]

Symbian: [[Category:Symbian]]
[[Category:S60 1st Edition]] [[Category:S60 2nd Edition (initial release)]] [[Category:S60 2nd Edition FP1]] [[Category:S60 2nd Edition FP2]] [[Category:S60 2nd Edition FP3]]
[[Category:S60 3rd Edition (initial release)]] [[Category:S60 3rd Edition FP1]] [[Category:S60 3rd Edition FP2]]
[[Category:S60 5th Edition]]
[[Category:Symbian^3]] [[Category:Symbian Anna]] [[Category:Nokia Belle]]

This page was last modified on 26 June 2014, at 11:23.
67 page views in the last 30 days.