CODEWITHSUNDEEP
c#silverlightxaml
blitzkriegz
blitzkriegz

Reputation: 9576

Zooming and panning an image canvas

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.

enter image description here

Upvotes: 6

Views: 1650

Answers (2)

Narayan Vaze
Narayan Vaze

Reputation: 3

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.

Upvotes: 0

Matt Bridges
Matt Bridges

Reputation: 49435

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)).

Upvotes: 1

Related Questions