Using XAML ScrollViewer in WPF

The XAML ScrollViewer element adds scrolling functionality to an area that may host other controls. This tutorial shows you how to use a ScrollViewer control in WPF.

Introduction

The ScrollViewer element in XAML represents a WPF ScrollViewer control.

<ScrollViewer></ScrollViewer>

The HorizontalScrollBarVisibility and VerticalScrollBarVisibility are two major used properties of ScrollViewer that enables horizontal and vertical scrolling. These properties are represented by a ScrollBarVisibility enumeration that has the four values Auto, Disabled, Hidden and Visible.

The Disabled and Hidden values are used to disable and hide scrolling on WPF controls. Visible is used to make it visible all the time. Auto is the most used value that makes scrolling visible when it is needed only.

The following adds scrolling functionality to a TextBlock.

<Window x:Class="ScrollViewerSample.Window1"
    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
    Title="Window1" Height="300" Width="300">

    <ScrollViewer HorizontalScrollBarVisibility="Auto">
        <TextBlock TextWrapping="Wrap" Width="260" Height="400" VerticalAlignment="Top"  >
            This TextBlock is placed within a ScrollViewer control
            with automatic scrolling enabled. If text goes outside of the width
            or height, scrolling will be enabled automatically.
            This TextBlock is placed within a ScrollViewer control
            with automatic scrolling enabled. If text goes outside of the width
            or height, scrolling will be enabled automatically.
        </TextBlock>
    </ScrollViewer>

</Window>

The ScrollViewer looks like Figure 1.


                                 Figure 1