|
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.
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.
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.
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.
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.
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.
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.
If you've done everything correctly and your content
still isn't scrolling, the primary cause might be
one of two things:
- 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.
- 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.
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.
Need Help?
If you have questions, need some assistance on this topic, or just want to
chat - please drop by our friendly forums
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!
|
