.NET 4.0+

WPF Layout Controls - ScrollViewer

by Richard Carr, published at http://www.blackwasp.co.uk/WPFScrollViewer.aspx

The thirteenth part of the Windows Presentation Foundation Fundamentals tutorial continues the examination of the WPF layout controls. This article looks at the ScrollViewer control, which contains its children in a scrollable rectangle.

Hidden and Disabled Visibility

As mentioned above, the difference between Hidden and Disabled scroll bar visibility is subtle. The scroll bars themselves will always be hidden from view. The difference between the visibility options is that Disabled causes the ScrollViewer's content to be constrained by the width or height of the layout control. Hidden does not do this.

Try changing the ScrollViewer's opening XAML tag to make the horizontal scroll bar hidden and to make the ScrollViewer's width slightly less than that of the window.

<ScrollViewer HorizontalScrollBarVisibility="Hidden" Width="200" Background="LightBlue">

We'll also need to switch wrapping back on for the TextBlock.

<TextBlock FontSize="15" TextWrapping="Wrap">

Running the program gives the following results. Note that the text has not wrapped and each line is clipped at the right edge. As the TextBlock size is not constrained by the ScrollViewer it expands to its desired size, which is large enough for the text to appear without wrapping.

Now change the ScrollViewer to use Disabled for the HorizontalScrollBarVisibility:

<ScrollViewer HorizontalScrollBarVisibility="Disabled" Width="200" Background="LightBlue">

This time the width of the child control is limited to the size of its parent control, so the text wraps:

Deferred Scrolling

The ScrollViewer gives great feedback for the user when scrolling. Each movement of a scroll bar causes an update to the position of the child controls. In most cases this is immediate and fluid. However, if the content of the control is very complex, or if the user is using a remote desktop solution over a slow network connection, the updating can be slow and less pleasing.

In these situations you can elect to use deferred scrolling. With deferred scrolling the user can drag the thumb of the scroll bar to the desired position without the contents of the control updating automatically. Only when the thumb is released are the child controls redrawn.

Try changing the ScrollViewer's definition as shown below and running the program again to see the effect.

<ScrollViewer IsDeferredScrollingEnabled="True">