×
Namespaces

Variants
Actions

Handling ListPicker control inside ScrollViewer

From Nokia Developer 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
Compatibility
Platform(s):
Windows Phone 8
Article
Created: vineet.jain (18 Jun 2014)
Last edited: vineet.jain (26 Jun 2014)

Contents

Problem

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 :

Solution

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.

EndResult

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

ExampleProject

Example project showcasing the same can be downloaded from here : Media:ListPickHandler.zip

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.
110 page views in the last 30 days.

Was this page helpful?

Your feedback about this content is important. Let us know what you think.

 

Thank you!

We appreciate your feedback.

×