This web site uses cookies. By using the site you accept the cookie policy.This message is for compliance with the UK ICO law.

Windows Presentation Foundation
.NET 4.0+

WPF Layout Controls - ScrollViewer

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.

Scrolling to a Specific Position

Instead of scrolling by a fixed amount, you can programmatically move the scrolling offsets to a specific position. There are eight methods available that permit this. They are:

  • ScrollToTop. Scrolls to the top of the content.
  • ScrollToBottom. Scrolls to the bottom of the content.
  • ScrollToLeftEnd. Scrolls to the far left of the content.
  • ScrollToRightEnd. Scroll to the far right of the content.
  • ScrollToHome. Scrolls to the top left. This gives the same end result as calling ScrollToTop and ScrollToLeft.
  • ScrollToEnd. Scrolls to the bottom left. This gives the same end result as calling ScrollToBottom and ScrollToRight.
  • ScrollToHorizontalOffset. Scrolls to a specific horizontal position. The position is provided as the only argument to the method. The parameter requires a double-precision floating point number, where zero indicates the leftmost position.
  • ScrollToVerticalOffset. Scrolls to a specific vertical position. The position is provided as a double argument and zero indicates the topmost position.

NB: If the ScrollViewer's FlowDirection is set to RightToLeft, all of the horizontal scrolling methods are reversed. For example, ScrollToLeftEnd scrolls to the rightmost point.

Detecting Scrolling

In can be useful to detect when the user scrolls a ScrollViewer. There are various ways in which this can be achieved. For this article we'll consider the ScrollChanged event. This is raised whenever the ScrollViewer scrolls. It provides an event argument of the type, ScrollChangedEventArgs. ScrollChangedEventArgs includes a number of useful properties that allow you to examine the current state of the ScrollViewer and to understand the scrolling action that took place.

For simplicity we won't look at all of the properties here. Instead we'll just subscribe to the event using XAML and use two common properties. These are HorizontalOffset and VerticalOffset. As the names suggest, these allow you to determine the current horizontal and vertical scrolling distances relative to the top and left edge of the parent control.

To subscribe to the event modify the ScrollViewer element as follows.

<ScrollViewer HorizontalScrollBarVisibility="Hidden" Name="Inferno" ScrollChanged="Scroll">

We can now add the event handler code to the C# behind the window. We'll read the two offset properties, combine their values in a string and use this string as the content of the ScrollDetails label. You may have noticed this as yet unused label to the right of the buttons.

private void Scroll(object sender, ScrollChangedEventArgs e)
    var x = (int)e.HorizontalOffset;
    var y = (int)e.VerticalOffset;
    var coords = string.Format("{0},{1}", x, y);
    ScrollDetails.Content = coords;

Run the program and scroll using the scroll bar or the buttons at the bottom of the window to see the offset values updating.

WPF ScrollViewer Control Event

15 May 2013