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" Stretch="None" />
   </ScrollViewer>    

5. Set the Image Stretch property to None. This ensures the image is displayed in its original size.

6. Run the application. You should be able to scroll vertically as needed,...