How to draw lines on top of image in silverlight?

Question

While displaying images in a silverlight application, I need to overlay a set of shapes likne lines exactly over the image. The line X1Y1 and X2 Y2 should be set by clicking mouse on image locations.

An image drawn like this:

and the canvas in the same grid cell for the shapes is like this:

    <Canvas Name="LeftLines" Grid.Row="1" Grid.Column="0">
        <Line Name="LeftTape" X1="20" X2="20" Y1="20" Y2="512" Stroke="Yellow" StrokeThickness="2" Visibility="Visible"></Line>
    </Canvas>

I can't figure out how to render the canvas on top of the image. I tried to use TransformGroup tg and then LefttLines.SetValue(Canvas.RenderTransformProperty, tg);

But something is missing.

Thanks for advice or examples. Val

Answer 1

Part 2

Aha. Thanks for the extra info. If you are happy for the image to retain a uniform aspect ratio you can put the image and the lines in a grid within a ViewBox within your grid cell (canvas not required).

Part 1

I am not sure I understand the problem. The canvas origin is relative to the same cell and should be rendered fine. The order of the items in the XAML is important as that determines the render order (last item in the XAML is normally rendered last).

If you set the start and end co-ordinates of the line, in pixels, it should appear where you want it (relative to the grid cell the canvas is in, therefore on top of the image in the grid cell).

This sample XAML resulted in the image below it (with your line on top of an image):

    <Grid x:Name="LayoutRoot" Background="White">
        <Grid.RowDefinitions>
            <RowDefinition Height="*"/>
            <RowDefinition Height="*"/>
        </Grid.RowDefinitions>
        <Grid.ColumnDefinitions>
            <ColumnDefinition Width="*"/>
            <ColumnDefinition Width="*"/>
        </Grid.ColumnDefinitions>
        <Image Source="images[1].jpg" Grid.Row="1"/>
        <Canvas x:Name="LeftLines" Grid.Row="1" Grid.Column="0">
            <Line x:Name="LeftTape" X1="20" X2="167" Y1="20" Y2="142" Stroke="Yellow" StrokeThickness="2" Visibility="Visible"/>
        </Canvas>
    </Grid>