Windows Presentation Foundation 4.5 Cookbook

Creating a scrollable user interface

There are occasions when some data to display is larger than the display area; this requires scrolling capabilities. WPF provides that using a simple control, the ScrollViewer.

Getting ready

Make sure Visual Studio is up and running.

How to do it...

We'll create a simple image viewer that provides scrollbars if necessary when viewing a large image:

1. Create a new WPF application named CH03.ScrollDemo.
2. Add an image to the project. For example, you could select the Penguins.jpg file from the Pictures | Sample Pictures folder.
3. Open MainWindow.xaml. Add a ScrollViewer control inside the existing Grid.
4. Inside the ScrollViewer, add an Image element, and set its Source property to the image you added:

   <ScrollViewer> <Image Source="penguins.jpg" ...