Click here to Skip to main content
13,457,851 members
Click here to Skip to main content
Add your own
alternative version


22 bookmarked
Posted 13 Mar 2011

Zooming and panning in WPF with fixed focus

, 14 Mar 2011
Rate this:
Please Sign up or sign in to vote.
How to do zooming and panning in WPF with fixed focus.



I have found quite a few articles about zooming into a fixed point. I have also tried many solutions, some worked, some did not. The ones that did work were too complicated to my needs. The ones that did not work could not hold focus or they overlapped other parts of the screen when zooming in. Another common problem was when panning. Many solutions did not record the original position of the mouse, so when you started panning, your image would make a sudden jump so you held on to the top left corner and not where your mouse was before. In my Windows Forms solution, one of the biggest issues was to limit the image size so that it wouldn't overlap other parts; in WPF, it was much easier as I could set the "cliptobounds" to accomplish the same.


Using the code

After a lot of trials and errors, I ended up with a quite simple code.

A few event handlers to catch some mouse events:

WPFWindow.MouseWheel += MainWindow_MouseWheel;
image.MouseLeftButtonDown += image_MouseLeftButtonDown;
image.MouseLeftButtonUp += image_MouseLeftButtonUp;
image.MouseMove += image_MouseMove;

First, I declare some global variables. Start to store the position of the mouse when the mouse button is first clicked, and origin to store the original offset of the image before it was moved.

private Point origin;  // Original Offset of image
private Point start;   // Original Position of the mouse

MouseDown sets the two variables.

private void image_MouseLeftButtonDown(object sender, MouseButtonEventArgs e)
    if (image.IsMouseCaptured) return;

    start = e.GetPosition(border);
    origin.X = image.RenderTransform.Value.OffsetX;
    origin.Y = image.RenderTransform.Value.OffsetY;

MouseMove takes care of the panning. I move the image around relative to the position saved in the MouseDown event. I just set the offset to the difference between the original position of the mouse and the current position of the mouse, and add that value to the original offset.

private void image_MouseMove(object sender, MouseEventArgs e)
    if (!image.IsMouseCaptured) return;
    Point p = e.MouseDevice.GetPosition(border);

    Matrix m = image.RenderTransform.Value;
    m.OffsetX = origin.X + (p.X - start.X);
    m.OffsetY = origin.Y + (p.Y - start.Y);

    image.RenderTransform = new MatrixTransform(m);

MouseWheel does the actual zooming. It uses ScaleAtPrepend which not only does the zooming, but also keeps the focus. This was a lot easier than the Windows Forms version.

private void MainWindow_MouseWheel(object sender, MouseWheelEventArgs e)
    Point p = e.MouseDevice.GetPosition(image);

    Matrix m = image.RenderTransform.Value;
    if (e.Delta > 0)
        m.ScaleAtPrepend(1.1, 1.1, p.X, p.Y);
        m.ScaleAtPrepend(1/1.1, 1/1.1, p.X, p.Y);

    image.RenderTransform = new MatrixTransform(m);

Points of Interest

It is important to notice the "cliptobounds" in the XAML. If it is true, it ensures that the image is held within the border and doesn't overlap other parts of the window.

<border grid.row="1" name="border" cliptobounds="True">
    <img name="image" opacity="1" 

       source="/WPF%20Image%20Pan%20and%20Zoom;component/Images/test.tif" />


  • Initial release.


This article, along with any associated source code and files, is licensed under The Code Project Open License (CPOL)


About the Author

Lars Pehrsson
Software Developer (Senior) DSR
Denmark Denmark
No Biography provided

You may also be interested in...

Comments and Discussions

GeneralVery Nice - 5 Pin
David Roh15-Mar-11 6:15
memberDavid Roh15-Mar-11 6:15 

General General    News News    Suggestion Suggestion    Question Question    Bug Bug    Answer Answer    Joke Joke    Praise Praise    Rant Rant    Admin Admin   

Use Ctrl+Left/Right to switch messages, Ctrl+Up/Down to switch threads, Ctrl+Shift+Left/Right to switch pages.

Permalink | Advertise | Privacy | Terms of Use | Mobile
Web01 | 2.8.180323.1 | Last Updated 15 Mar 2011
Article Copyright 2011 by Lars Pehrsson
Everything else Copyright © CodeProject, 1999-2018
Layout: fixed | fluid