Pan Canvas Content in ScrollViewer

Question

I am trying to implement panning inside Canvas in scrollviewer, for example:

<ScrollViewer> <Canvas> <!-- some visual elements here --> </Canvas> </ScrollViewer> 

I need a click and drag operation in the canvas so that the contents of the canvas move. I tried to handle the MouseDown, MouseMove, and MouseUp events to make the translation described below, but it didn't work.

Any ideas?

Answer 1

You cannot do this with your current setup. The canvas will stretch beyond the parent container, and the scrollviewer will not know the size of the canvas (it will say that it does not need to scroll) and therefore cannot create handles.

If you want to skip this setting, change the canvas to the grid and use the Vertical Scroll and Horizontal Scroll and the corresponding set properties to move the visible section of the grid around.

Answer 2

Try to specify your canvas in the “Width and Height” set and give it a background color (transparent should be fine) and see if it helps you to receive mouse events.