Scroll Windows With WPF ScrollViewer in C# and XAML

Content and data-focused Windows applications often require vertical and/or horizontal scrolling functionality to conveniently display large content on the screen. The WPF ScrollViewer control can be used to implement vertical and horizontal scrolling on Windows controls.

To implement scrolling functionality on a content control, the content control is placed as the default content of a ScrollViewer control using its Content property. A ScrollViewer can only have one child, typically a Panel element that can host a Children's collection of elements.

The simplest way to enable scrolling on a content control is by placing the content control inside a ScrollViewer control. The following code snippet places a StackPanel control within a ScorllViewer control.

<ScrollViewer HorizontalScrollBarVisibility="Auto">
    <StackPanel VerticalAlignment="Top" HorizontalAlignment="Left">
        <TextBlock>Resize window to auto enable or disable scrolling.</TextBlock>
        <Separator />
        <Rectangle Fill="DodgerBlue" Width="500" Height="500"></Rectangle>
    </StackPanel>
</ScrollViewer>

The code places a TextBlock and a Rectangle control on a StackPanel. The StackPanel is placed within a ScrollViewer. The scrolling is enabled by default and both horizontal and vertical scrollbars are visible because the content (Rectangle) is larger than the parent control, StackPanel.

You can resize the Window and you will see the ScrollViewer appear and disappear when the Windows is smaller and larger than the content, respectively.

The ScrollViewer control responds to both mouse and keyboard commands and defines numerous methods with which to scroll content by predetermined increments. You can use the ScrollChanged event to detect a change in a ScrollViewer state.

The VerticalScrollBarVisibility and HorizontalScrollBarVisibility properties enable or disable vertical and horizontal scrolling capabilities on a ScrollViewer. It has four values - Auto, Disabled, Hidden, and Visible that are self-explanatory. In most cases, you may want to keep the default Auto property that shows or hides scroll bars as needed.

The following code snippet sets both, vertical and horizontal scrollbars to Auto.

<ScrollViewer VerticalScrollBarVisibility="Auto" HorizontalScrollBarVisibility="Visible">

In our case, both scrollbars are visible.

You can disable and hide scrollbars by setting these values to Disabled and Hidden respectively. The Visible value makes sure the scrollbars are visible all the time regardless of whether the content needs scrolling or not.

Let’s add a ScrollViewer control as the root content of a Window. Then place a TextBlock control and a few more child controls as a part of the content.

<Window x:Class="WPFScrollViewerSample.MainWindow"
        xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
        xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
        xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
        xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
        xmlns:local="clr-namespace:WPFScrollViewerSample"
        mc:Ignorable="d"
        Title="MainWindow" Height="400" Width="400">
    <ScrollViewer VerticalScrollBarVisibility="Auto">
        <TextBlock TextWrapping="Wrap" VerticalAlignment="Top" FontSize="20" Padding="20">
            <InlineUIContainer>
                <TextBlock FontSize="28" FontWeight="Bold"><Run Text="Mahesh Chand"/></TextBlock>
            </InlineUIContainer>
            <LineBreak/>
            <Run Text="Microsoft Regional Director, Founder C"/>
            <Run Text="# Corner, "/><Run Text="CEO Mindcracker Inc."/><LineBreak/><LineBreak/>
            <Run Text="At Mindcracker Inc., I help technical teams to build better software solutions "/>
            <Run Text="by providing advice on architecture, design, usability, innovation, and team mentoring. "/>
            <Run Text="My expertise and interests include C#/.NET, UWP, Mixed-Reality, AI/ML, Cloud, Startups,"/>
            <Run Text="and Innovation. As a founder "/>
            <Run Text="of C# Corner, I enjoy working on new features "/>
            <Run Text="and ideas to help developers write better code and become better human being. "/>
            <Run Text="I love Philosophy, Cognitive Studies, Community, Public Speaking, Writing, Basketball,"/>
            <Run Text="and Philadelphia Eagles."/>
        </TextBlock>
    </ScrollViewer>
</Window>

The above code generates the following app that allows users to scroll its content.

How to enable the scrollbar in a WPF textbox?

The simplest way to add scrolling functionality to a TextBox control is by enabling its horizontal and vertical scrolling. The HorizontalScrollBarVisibility and VerticalScrollBarVisibility properties are used to set horizontal and vertical scroll bars of a TextBox.

The following code snippet enables horizontal and vertical scrollbars in a TextBox control.

<TextBox x:Name="TextBox" Height="39"
         HorizontalScrollBarVisibility="Visible"
         VerticalScrollBarVisibility="Visible"
         TextWrapping="Wrap" Margin="200,10,450,0" />
<!-- How to Add a vertical scrollbar to a WPF Grid -->
<!-- The following code snippet adds scrolling capability to a Grid control. -->
<ScrollViewer VerticalScrollBarVisibility="Auto" HorizontalScrollBarVisibility="Auto">
    <Grid Background="AliceBlue" Width="300" Height="200"></Grid>
</ScrollViewer>

How to enable ScrollBar on a WPF window?

You can use a ScrollViewer control to enable the scrollbar on a Window. The ScrollViewer needs to apply to the root container control.

The following code snippet adds scrolling to a StackPanel.

<Window x:Class="WPFScrollViewerSample.MainWindow"
        xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
        xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
        xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
        xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
        xmlns:local="clr-namespace:WPFScrollViewerSample"
        mc:Ignorable="d"
        Title="MainWindow" Height="400" Width="400">
    <ScrollViewer VerticalScrollBarVisibility="Auto" HorizontalScrollBarVisibility="Auto">
        <StackPanel VerticalAlignment="Top" HorizontalAlignment="Left">
            <TextBlock>Resize window to auto enable or disable scrolling.</TextBlock>
            <Separator />
            <Rectangle Fill="DodgerBlue" Width="450" Height="450"></Rectangle>
        </StackPanel>
    </ScrollViewer>
</Window>