Efficiently display multiple markers on WPF image

Question

I need to display many markers on a WPF image. The markers can be lines, circles, squares, etc. and there can be several hundreds of them.

Both the image source and the markers data are updated every few seconds. The markers are associated with specific pixels on the image and their size should be absolute in relation to the screen (i.e. when I move the image the markers should move along with it, but if i zoom in, they should take the same space of the screen as before).

Currently, I've implemented this using the AdornerLayer. This solution has several problems but the most significant one is that the UI doesn't fare well under the load even for 120 such markers.

I wanted to ask what would be the best way to go about implementing this? I thought of two solutions:

• Inherit from Canvas and make sure it is invalidated not for every added marker but for a range of markers at once

• Create a control that holds an image and change its OnDraw to draw all the markers

I would appreciate some pointers from someone with experience with a similar problem.

Answer 1

Your use case looks quite specialized, so a specialized solution seems in order. I'd try a variant of your second option — extend Image, overriding its OnRender method.