title: How to keep relative position of WPF elements on background image
body: <p>I am new to WPF, so the answer to the following question might be obvious, however it isn't to me.
  I need to display an image where users can set markers on (As an example: You might want to mark a person's face on a photograph with a rectangle), however the markers need to keep their relative position when scaling the image.</p>
  
  <p>Currently I am doing this by using a <code>Canvas</code> and setting an <code>ImageBrush</code> as Background. This displays the image and I can add elements like a <code>Label</code> (as replacement for a rectangle) on top of the image. But when I set a label like this, it's position is absolute and so when the underlying picture is scaled (because the user drags the window larger) the <code>Label</code> stays at it's absolute position (say, 100,100) instead of moving to the new position that keeps it "in sync" with the underlying image.</p>
  
  <p>To cut the matter short: When I set a marker on a person's eye, it shouldn't be on the person's ear after scaling the window.</p>
  
  <p>Any suggestions on how to do that in WPF? Maybe <code>Canvas</code> is the wrong approach in the first place? I could keep a collection of markers in code and recalculate their position every time the window gets resized, but I hope there is a way to let WPF do that work for me :-)</p>
  
  <p>I am interested in hearing your opinions on this.
  Thanks</p>