How to draw on an image when its size changed by uniformtofill strectch in ViewModel (wpf)

Question

I have an image that its size is relatively big (say 10K by 10K).

To show this image, I use an image control and set its stretch mode to StretchToFill.

Now I want to draw a line on this image and I have the line position (start and end point) based on original image size (say from (2000,1000) to (8000,6000).

How can I convert these values to screen coordinates so I can draw on image?

If I had the actual size of image, I can do this, but it seems that I can not bind to actual height and actual width of image in viewModel.

Answer 1

You could put the Image and the Line in a Viewbox:

<Viewbox Stretch="UniformToFill">
    <Grid>
        <Image Source="C:\Users\Public\Pictures\Sample Pictures\Desert.jpg"/>
        <Line Stroke="White" StrokeThickness="5" X1="100" Y1="100" X2="1000" Y2="500"/>
    </Grid>
</Viewbox>