Making your Content Scrollable
by kirupa  |  30 August 2010

  Have questions? Discuss this Windows Phone tutorial with others on the forums.

Every now and then, your application may require your users to scroll through a boatload of content. The following video shows an example of me scrolling through a large amount of content on the Windows Phone:

[ did you know that Chuck's first name is actually Carlos? ]

The scrolling behavior you see in my application in the video is not provided by default. Even though the content I was displaying was too large to display on a single screen, I had to perform some additional steps to make sure my custom content could actually be scrolled.

By the end of this brief tutorial, you too will learn the magic additional steps needed to allow users to scroll through your content.

Getting Started
For this tutorial, simply make sure you have everything up and running to be able to create a Windows Phone, Silverlight, or WPF project using Expression Blend.

While this tutorial is optimized for the Windows Phone, youíll be able to use what youíve learned in Silverlight and WPF as well.

Introducing the ScrollViewer
All of the content you create lives inside layout panels such as the Grid, Canvas, or WrapPanel. All of these controls have their own unique abilities to make it easier for you to place and arrange your content. What they don't have is the ability to deal with content that goes outside of their boundaries.

These panels simply display the content even though it can't really be seen when it goes outside the physical limitations of your screen, application, or container:

To solve this problem, you have a special layout panel called the ScrollViewer. What the ScrollViewer does is pretty awesome. It clips all of the content that goes outside its boundary, and to help you see the hidden (out-of-boundary) content, it provides you with scrolling powers:

In the next section, let's go ahead and take a look at how to use the ScrollViewer.

Using the ScrollViewer
Letís say you have a large collection of content that you want your users to be able to scroll through:

[ I have content that is too large to display in a single view ]

As you can see, my selected element exceeds the viewing area of the container (Grid in this case) that it is stored in. What I would like to do is allow users to scroll through to see the parts of the content that are currently missing, and as you learned earlier, I can use a ScrollViewer.

The easiest way to do that is to wrap the element whose contents are too too large into a ScrollViewer. In Expression Blend, right click on that element and select Group Into | ScrollViewer:

[ group your content into a ScrollViewer ]

Doing this will automatically wrap your selected content inside a ScrollViewer for you:

[ the ScrollViewer has wrapped all of your content ]

Once you have wrapped your content, make sure your ScrollViewer's Width and Height is the size you want. By default, you may find that your ScrollViewer's height and width take on the height of the content you wish to scroll:

[ make sure your ScrollViewer's Width and Height are set correctly ]

In such a case, just select your ScrollViewer and manually adjust the Width and Height properties (or just hit the Auto buttons) to make your ScrollViewer scroll your content as opposed to simply becoming a hulking behmoth like your content. Remember, you can only scroll if your ScrollViewer's content is larger than it is.

For the most part, that is all you have to do. If you run your application, you'll find that the ScrollViewer now takes over when you try to interact with your content by giving you the ability to scroll. In the next section, let's look at some simple tricks that may help you out.

Common Tricks
The ScrollViewer is very straightforward to use, but if you are like me, you'll find yourself in various situations where the default behavior or the obvious way to do something needs to be tweaked to make everything work just the way you want.

Inserting a ScrollViewer Manually
What I've shown you earlier is just how to wrap your content into a ScrollViewer. While that should satisfy most of your needs, you may be in situations where you need to insert a ScrollViewer independently of dealing with any of the content.

Fortunately, the ScrollViewer is a control just like a Button or ListBox. If you want to actually insert or draw a ScrollViewer, just search for it in your Assets Library:

[ you've found where the ScrollViewer lives ]

You can double-click or draw it out just like any other control that you can use from the Asset Library.

Scrolling Horizontally
By default, scrolling is only enabled Vertically. If you find that you must also enable horizontal scrolling for your content, set your ScrollViewer's HorizontalScrollbarVisibility property to either Auto or Visible:

[ you have to explicitly allow horizontal scrolling ]

If you do not set this value, even if your content exceeds the horizontal boundary of your ScrollViewer, your content will not scroll horizontally.

My Content Won't Scroll
If you've done everything correctly and your content still isn't scrolling, the primary cause might be one of two things:

  1. Your ScrollViewer is simply too large. Make sure its width and height is less than the width and height of the content you are scrolling.
  2. The content you are trying to scroll has some nested container whose width/height is set to an unnecessarily small value. Select the nearest layout panel that is contained inside your ScrollViewer and make sure its Width and Height is set to Auto.

I've used these two solutions to solve all of my ScrollViewer problems, but if you have other cases that I did not address, feel free to post in the discussion topic created for this tutorial.

Conclusion
The ScrollViewer is quite useful. While this tutorial showed how you can use it by yourself, a handful of controls use the ScrollViewer behind the scenes. The most common one that you may have used is the ListBox...another control which provides scrolling when a lot of content has been added to it.

Did You Like This?

Getting Help

If you have questions, need some assistance on this topic, or just want to chat - post in the comments below or drop by our friendly forums (where you have a lot more formatting options) and post your question. There are a lot of knowledgeable and witty people who would be happy to help you out. Plus, we have a large collection of smileys you can use

Share

Did you enjoy reading this and found it useful? If so, please share it with your friends:

If you didn't like it, I always like to hear how I can do better next time. Please feel free to contact me directly at kirupa[at]kirupa.com.

Cheers!

Kirupa Chinnathambi

 

Add Your Comment (or post on the Forums)

blog comments powered by Disqus




SUPPORTERS:

kirupa.com's fast and reliable hosting provided by Media Temple.