Wednesday, March 30, 2011

The ScrollViewer

For today's WPF Tutorial we are going to be talking about the ScrollViewer in WPF!

Transcript from Video:

What is it?
Well, sometimes the content we want to display to the user is larger than the size of our window. So what the scrollviewer does for us is it allows the user to scroll through and see things would normally not be able to.

*run app*

We can clearly see here that my content is way bigger than the window.

How do I use it?
So how do we use the scrollviewer to fix this problem? It’s easy! You wrap it in a ScrollViewer tag. Now, the content easily scrolls up and down.

There are two different types of scrolling that the Scrollviewer supports: Physical and Logical scrolling. Physical scrolling allows the scrollviewer to scroll by a predetermined number of units: usually pixels. It’s basically what we’re doing right now.

Logical Scrolling is really cool, and would have been very useful to me a lot of times in the world of HTML, I think it’s a genius feature to put in WPF!

*So here is an example of Logical Scrolling*
*Show how to enable logical scrolling...*

So now, what you’ll notice is the ScrollViewer will scroll perfectly to the top of the next element in the StackPanel.

This type of scrolling only works if the container in the scrollviewer implements the IScrollInfo interface. The stackpanel is one such container that implements IScrollInfo.

If you want to force p.s. then set CanContentScroll to false.


  1. Thanks
    I've a doubt, y try to use a scrollviewer to show a very big image inside an expander. The scrollviewer takes up all the window (it's maximize for default but I put minwidth & -height)
    MY QUESTION: I want to the scrollviewer appear only y the corner if the user resize the windows. As a matter of fact when I run the application the scrollviewer always appears in the middle (beacuase the window's minsize is the middle of the maximize window).

  2. When you set the minwidth of the first textblock to 250 to show horizontal scrolling, why did the width of the other textblocks remain unaffected? What is actually setting the width of the other textblocks?

  3. Nice concise example. Thanks