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.
Currently I am doing this by using a Canvas and setting an ImageBrush as Background. This displays the image and I can add elements like a Label (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 Label 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.
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.
Any suggestions on how to do that in WPF? Maybe Canvas 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 🙂
I am interested in hearing your opinions on this.
Thanks
Of the top of my head you could write a converter class that would take in a percentage and return an absolute position. As an example if your window was 200 X 200 and you placed the label at 100 X 100 when you scale the window to 400 X 400 the label would stay where it is (as per your original question). However if you used a converter so that instead you could set the labels position to 50% of its parent container’s size then as the window scaled the label would move with it.
You may also need to use the same converter for width and height so that it increased in size to match as well.
Sorry for the lack of detail, if I get a chance I’ll edit this with example code in a little while.
Edited to add
This question gives some code for a percentage converter.