Keep lines, ellipses and polylines at the same position within an image during resizing (WinUI3)

Question

Hello,

Is there an easy way to achieve it in WinUI3?

I have an image within a grid that is resizable manually and there are ellipses, lines and polylines which mark positions in the image.

<Grid>
    <Image Source="myPath\\myImage.png"></Image>
    <Polyline Stroke="#999999" Points="202,92 250,180 400,180"></Polyline>
    <Line Stroke="#999999" X1="0" Y1="235" X2="100" Y2="235" ></Line>
    <Ellipse Margin="70,150,0,0" Height="6" Width="6" StrokeThickness="1" Stroke="White"></Ellipse>
</Grid>

I have tried it with a relative panel but that doesn't seem to work.

Is it possible that this cannot be done without calculating the x and y coordinates/points using code in the SizeChanged event of the grid or image?

(I also tried the calculation but I'm not sure exactly how to do it (do I calculate the scaling or the percentages?!)

Answer 1

God, think I got it! (I mean it looks right.)

// For images with same height & width.
static double GetNewCoordinate(double newDimension, double initialDimension , double initialCoordinate)
{	  	
	return (newDimension / initialDimension) * initialCoordinate; 
}

Thank you!