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) at https://bitbucket.org/3david/elentok.framework, 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".

Comments

GCN93 said…
Hello,
You did an excellent work.
But I have find a small disadvantage in the rotation of the images.
I explain:
for a rectangular image if I make a rotation of 90 degrees, the vertical scrollbar be not resized and then it is not possible any more to see the edges high and low of the image.
Perhaps can one make differently?
Thank you
Anonymous said…
Excellent.
Too pro, i was lost at the beginning to understand

Popular posts from this blog

Restart the Windows File Sharing Service to fix weird problems

WPF, ImageSource and Embedded Resources

SharpDevelop dark color scheme