Google Maps-Like Scrolling Panel in WPF

Question

I have a Canvas where I'm drawing a bunch of shapes and other UI elements. This canvas can be very large so I want to put this in a panel which allows me to zoom in/out using the mouse and scroll by dragging the mouse, just like Google Maps. The closest thing I could find was the ScrollViewer but obviously this isn't close enough.

Has anyone done this in WPF and have any XAML and/or C# code?

Thanks a bunch!

Answer 1

Would this link be of any help? I havent gotten into WPF but a quick search yields this link and hopefully it helps you out:

http://blogs.vertigo.com/personal/swarren/Blog/Lists/Posts/Post.aspx?ID=7

Answer 2

if I remember correctly here you can find something like you want.

http://www.codeproject.com/KB/vista/swordfishcharts.aspx

Answer 3

What you need here is a 'Virtualizing Canvas Panel' Please see a sample here http://blogs.msdn.com/jgoldb/archive/2008/03/08/performant-virtualized-wpf-canvas.aspx

More about VirtualizingPanel http://blogs.msdn.com/dancre/archive/2006/02/06/526310.aspx

Answer 4

I asked last week whether DeepZoom was planned for WPF (since it's available on Silverlight). I recieved a link to this code which sounds very much like your desired solution: Pan and Zoom in WPF

Answer 5

I think you're on the right track with using a large canvas/grid with the ScrollViewer. I've recently done something similar using the same setup.

For zooming in and out, you can use a ScaleTransform in the canvas's LayoutTransform property, then hook that up to the MouseWheel event. You can change the ScaleX and ScaleY to "zoom" in and out, and all of the canvas's child elements will "zoom" as well.

For panning, you can hide the scroll bars in the ScrollViewer, and use the MouseMove event to to call the ScrollViewers ScrollToHorizontalOffset() function to move the scroll bars programatically. Use the link that "Optimal Solutions" posted, it is exactly how to do it.

If I was at my dev machine, I could give you some example code.

Answer 6

Check out this CodeProject article by Sacha... He has a FrictionScrollViewer that does the scrolling by dragging the mouse (Also supports some physics...)