BlackWaspTM

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 a ScrollViewer Programmatically

Sometimes you'll want to scroll the contents of a ScrollViewer from code without the user's intervention, or in response to a user's activity with other controls. For example, you may want to synchronise the offsets of two ScrollViewers.

To scroll by a small amount you can use one of four methods. These are LineUp, LineDown, LineLeft and LineRight. In each case the name of the method refers to the direction of movement of the viewport. So if you call LineDown, the content of the ScrollViewer moves upwards slightly so that you can see information that is further down.

To scroll by a larger amount you can call PageUp, PageDown, PageLeft or PageRight. These scroll the contents of the ScrollViewer the same distance as the dimension of the parent control.

To demonstrate, replace the XAML for the window with the following. This keeps the same content but moves it into a DockPanel. A series of eight buttons is docked beneath the ScrollViewer. We will link each one to an event that calls one of the scroll methods.

<Window x:Class="ScrollViewerDemo.MainWindow"
        xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
        xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
        Title="ScrollViewer Demo"
        Width="250"
        Height="200">
    <DockPanel>
        <StackPanel DockPanel.Dock="Bottom" Orientation="Horizontal">
            <TextBlock>Line</TextBlock>
            <RepeatButton Content="ñ" FontFamily="Wingdings" Click="LineUp"/>
            <RepeatButton Content="ò" FontFamily="Wingdings" Click="LineDown"/>
            <RepeatButton Content="ï" FontFamily="Wingdings" Click="LineLeft"/>
            <RepeatButton Content="ð" FontFamily="Wingdings" Click="LineRight"/>
            <TextBlock>Page</TextBlock>
            <RepeatButton Content="ñ" FontFamily="Wingdings" Click="PageUp"/>
            <RepeatButton Content="ò" FontFamily="Wingdings" Click="PageDown"/>
            <RepeatButton Content="ï" FontFamily="Wingdings" Click="PageLeft"/>
            <RepeatButton Content="ð" FontFamily="Wingdings" Click="PageRight"/>
            <Label Name="ScrollDetails"/>
        </StackPanel>

        <ScrollViewer HorizontalScrollBarVisibility="Hidden" Name="Inferno">
            <TextBlock FontSize="20" TextWrapping="Wrap">
            Inferno · Canto I<LineBreak/>
            <LineBreak/>
            Nel mezzo del cammin di nostra vita<LineBreak/>
            mi ritrovai per una selva oscura,<LineBreak/>
            ché la diritta via era smarrita.<LineBreak/>
            <LineBreak/>
            Ahi quanto a dir qual era è cosa dura<LineBreak/>
            esta selva selvaggia e aspra e forte<LineBreak/>
            che nel pensier rinova la paura!<LineBreak/>
            <LineBreak/>
            Tant’ è amara che poco è più morte;<LineBreak/>
            ma per trattar del ben ch’i’ vi trovai,<LineBreak/>
            dirò de l’altre cose ch’i’ v’ho scorte.<LineBreak/>
            <LineBreak/>
            Io non so ben ridir com’ i’ v’intrai,<LineBreak/>
            tant’ era pien di sonno a quel punto<LineBreak/>
            che la verace via abbandonai.<LineBreak/>
            </TextBlock>
        </ScrollViewer>
                
    </DockPanel>
</Window>

To add the event code, switch to the code behind the window and add the following eight methods:

private void LineUp(object sender, RoutedEventArgs e)
{
    Inferno.LineUp();
}

private void LineDown(object sender, RoutedEventArgs e)
{
    Inferno.LineDown();
}

private void LineLeft(object sender, RoutedEventArgs e)
{
    Inferno.LineLeft();
}

private void LineRight(object sender, RoutedEventArgs e)
{
    Inferno.LineRight();
}

private void PageUp(object sender, RoutedEventArgs e)
{
    Inferno.PageUp();
}

private void PageDown(object sender, RoutedEventArgs e)
{
    Inferno.PageDown();
}

private void PageLeft(object sender, RoutedEventArgs e)
{
    Inferno.PageLeft();
}

private void PageRight(object sender, RoutedEventArgs e)
{
    Inferno.PageRight();
}

Try executing the program and using the buttons to navigate the ScrollViewer. Note that even though the horizontal scroll bar is not present the horizontal scrolling methods still work correctly.

WPF ScrollViewer Control with Programmatic Scrolling

15 May 2013