Zooming and panning an image

Question

I have a silver Canvas light, on which there is an image with drawings (multi-angled). I need to develop a control to scale and pan this canvas in the workspace (currently Border inside the Grid cell), as shown below. What is the best way to do this. Are there any libraries that I can use?

I also need to be able to add drawings to an enlarged / panned canvas.

Answer 1

Many sample code is available online. Check out ZoomControl and CodePlex .

Answer 2

You can try creating a UserControl, which is basically an image inside the canvas, and set two transformation properties to control scaling and panning. ScaleTransform will handle the scaling, and TranslateTransform will handle the pan. You can create a CompositeTransform from both of them and assign it as a canvas RenderTransform.

You can bind the zoom slider to a ScaleTransform and handle mouse events to modify the TranslateTransform. For now, you get the mouse coordinates relative to the canvas itself, which should work (i.e. mouseEventArgs.GetPosition(canvas) ).