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" ...

Get Windows Presentation Foundation 4.5 Cookbook now with the O’Reilly learning platform.

O’Reilly members experience live online training, plus books, videos, and digital content from nearly 200 publishers.