WPF Pan, Zoom & Rotate Control

In the past few days I have been working on an image viewer control that allows the user to pan (via scrollbars and by dragging the mouse), zoom (by mouse wheel and by buttons) and rotate (by dragging the mouse in "rotate" mode).

I must say this was the funnest of all of my WPF experiences, I really love the elegance of WPF. The implementation ended up being a completely generic viewer that can contain whatever you want (not just images).

The viewer is actually two controls: ViewerControl and FullViewerControl.

The ViewerControl is the inner part (without the toolbar and statusbar), its behavior is completely customizable by setting the MouseClickHandler, MouseDragHandler and MouseWheelHandler dependency properties (these are not events, but three different interfaces that contain a method that handles the action; this way they even be modified in XAML).

The FullViewerControl wraps around the ViewerControl, sets the default behavior (mouse wheel zooms, ...) and adds a toolbar (to allow changing drag/pan/zoom-in/zoom-out modes and auto-fitting the contents) and a status bar that displays the current zoom level and rotation angle.

To use the FullViewerControl in your code, just add the following:

<v:FullViewerControl>
  <v:FullViewerControl.ExtraToolbarItems>

  <-- insert buttons here -->

  </v:FullViewerControl.ExtraToolbarItems>

  <-- insert viewer contents here -->

</v:FullViewerControl>

The source code for the viewer is freely available as a part of my Elentok.Framework project (LGPL license) here, in the "Elentok.Framework.Wpf" project, under "Controls/Viewer".

To build the framework project and test out the viewer, run the Scripts\Build-Debug.bat script and then run Build\Elentok.Framework.Wpf.Demos.exe.