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,