Zooming and panning an image canvas

Question

I have a silverlight Canvas which holds an image with drawings on it (polygons). I need to develop a control to zoom and pan this canvas within a work area (Border within a Grid cell, as of now) as shown below. What is the best way to do this. Is there any libraries I can make use of?

I need to be able to add drawings to the zoomed/panned canvas too.

Murdock

You want the zoom slider to actually enlarge the canvas itself instead of the image so that the canvas fills up the entire work area? – Tugboat

yes. since the markings on the image should be in place. – Murdock

whether the canvas fills up the entire work area depends on how much zoom is set using the zoom slider. – Murdock

Answer 1

You can try creating a UserControl that is basically an image inside a canvas, and expose two transform properties to control the zooming and panning. A ScaleTransform would handle zooming, and a TranslateTransform would handle panning. You can create a CompositeTransform from both of them and assign that as the RenderTransform of the canvas.

You can bind the zoom slider to the ScaleTransform, and handle mouse events to change the TranslateTransform. As long as you get the mouse coordinates relative to the canvas itself that should work (i.e. mouseEventArgs.GetPosition(canvas)).

Poulenc

Answer 2

Found a useful discussion with multiple answers regarding similar question. Find more detailed answer by Ian Okes and others at pan-zoom-image-stackoverflow-answer.

Another great solution can be found on codeproject by Ashley Davis: A WPF Custom Control for Zooming and Panning.

Farthing

While this link may answer the question, it is better to include the essential parts of the answer here and provide the link for reference. Link-only answers can become invalid if the linked page changes. - From Review – Photon

Okay. I will include relevent parts in my answer. Thank you for the comment. – Farthing