Creating a scrollable panel

The ScrollViewer controls enable scrolling functionality in a WPF application and help you to host other controls. When there are more contents available to show, but the viewable area is smaller than that, ScrollViewer is used to help the user to scroll through the content.

In this recipe, we will learn how to use a ScrollViewer inside a WPF application.

Getting ready

Let's open Visual Studio and create a project named CH03.ScrollViewerDemo. Be sure to create the project based on the WPF application template.

How to do it...

It's a quick step to surround a panel or control using the ScrollViewer. Perform the following steps to add a scrolling functionality to an image control:

1. Inside the project, add an image named demoImage.jpg.
2. Open the MainWindow.xaml file from Solution Explorer.
3. Now replace the existing Grid with a ScrollViewer.
4. Add an image pointing to the demoImage.jpg file, as follows:

<ScrollViewer HorizontalScrollBarVisibility="Auto" 
              VerticalScrollBarVisibility...