Derik Whittaker



Creating Scrollable Edit Content in WP7

When building out phone applications real estate is at a premium.  If you need to provide any type of edit content on the screen you either need to make the decision to only allow a few edit boxes to remove the need for scrolling or allow for scrolling.

In this post We will take a look at how we can enable scrolling on your edit screens in WP7.  Imagine you have a screen like below which is trying to grab address information from a user. 



As you can see there are more text boxes on the page then can fit on one screen.  Because of this you need to provide the ability for the user to scroll through the content.   The good news for you this is dead simple with XAML/Silverlight.  The key to enabling scrolling in Silverlight is the ScrollViewer control.  The ScrollViewer enables content to be displayed in a smaller area than its actual size. When the content of the ScrollViewer is not entirely visible, the ScrollViewer displays scrollbars that the user can use to move the content areas that is visible. The area that includes all of the content of the ScrollViewer is the extent. The visible area of the content is the viewport.

To see how this would work with our code take a look below;

(Sorry for the screen shot of the code, I was having formatting issues w/ the XAML)

If you look at the code above you will see that we first create an entry for the ScrollViewer control.  We then put our ‘scrollable’ content inside this control.  By putting your content in this control it will enable scrolling if the content exceeds the bounds of the UI.

Hope this helps,

Till next time,

Posted 06-06-2010 8:20 AM by Derik Whittaker
Filed under: ,



zihotki wrote re: Creating Scrollable Edit Content in WP7
on 06-07-2010 12:51 PM

Hi, your link to screenshot was included as the code :). Could you please fix it?

About The CodeBetter.Com Blog Network
CodeBetter.Com FAQ

Our Mission

Advertisers should contact Brendan

Google Reader or Homepage Latest Items
Add to My Yahoo!
Subscribe with Bloglines
Subscribe in NewsGator Online
Subscribe with myFeedster
Add to My AOL
Furl Latest Items
Subscribe in Rojo

Member Projects
DimeCasts.Net - Derik Whittaker

Friends of
Red-Gate Tools For SQL and .NET


SmartInspect .NET Logging
NGEDIT: ViEmu and Codekana
NHibernate Profiler
Balsamiq Mockups
JetBrains - ReSharper
Web Sequence Diagrams
Ducksboard<-- NEW Friend!


Site Copyright © 2007 CodeBetter.Com
Content Copyright Individual Bloggers


Community Server (Commercial Edition)