Efficiently displaying and zooming/panning large images in WPF

4
votes

I'm currently working on an application with the need to display large engineering drawings that can be 8800x6800 or larger. The requirements state that the user should be able to pan and zoom the image. Ideally, they'd like to be able to annotate the images as well. If you look at the Windows Photo Viewer, you'll see the performance and features I'm looking to emulate, minus the annotation part.

So far, I've tried a couple different approaches for displaying the images and none seem to offer the performance that I'm looking for. Either they take up a lot of memory or they're slow. These are the approaches I've taken:

  • Viewbox with the Image as a child. Memory usage is OK, but re-sizing the Viewbox is slow. I haven't tried zooming/panning with this approach yet because of that.
  • InkCanvas with the Image set either as the background or as a child. With this approach zooming/panning by way of ScaleTransform and TranslateTransform seemed so-so, but memory usage could be up in the 450-600 MB range.

This is my first foray into image manipulation with .NET/WPF and my knowledge on the subject is fairly limited. What are some best-practices for dealing with large images, especially with WPF? I've read that tiling the image (like deep zoom) can help, but was unsure on how to do this or if it's the best idea in my situation. Do you know of any resources that might help me understand this better?

1
c#wpfzoomingimagingpan
Did you solve this problem in the end? – Phil Applegate

1 Answers

1
votes

By "tiling" if you mean splitting the image up into separate pieces and only displaying a small subset at once to improve performance, this would be called "virtualisation".

Microsoft has an excellent blog about virtualising items and even provides a reference implementation of a VirtualCanvas which you can use as the starting point for a virtualised control.

Link here: https://docs.microsoft.com/en-us/archive/blogs/jgoldb/virtualized-wpf-canvas

Note that this blog includes zoom and scale as part of the discussion as well as a discussion about smooth scrolling and pre-emptive loading of tiles for best UI responsiveness.