Vector Graphics : Overlapping and ZIndex

<Grid Background="LightCyan">
    <Line X1="100" Y1="300"
          X2="200" Y2="50"
          Stroke="Blue" />

    <Line X1="50"  Y1="100"
          X2="300" Y2="200"
          Stroke="Red" />
</Grid>

The second one overlaps the first one. You can see that more clearly if you go beyond the default 1-pixel thickness of the line using StrokeThickness:

<Grid Background="LightCyan">
    <Line X1="100" Y1="300"
          X2="200" Y2="50"
          Stroke="Blue"
          StrokeThickness="5" />

    <Line X1="50" Y1="100"
          X2="300" Y2="200"
          Stroke="Red"
          StrokeThickness="30" />
</Grid>

If you would prefer that the blue line be on top of the red line, there are two ways you can do it. You could simply swap the order of the two lines in the Grid:

<Grid Background="LightCyan">
    <Line X1="50" Y1="100"
          X2="300" Y2="200"
          Stroke="Red"
          StrokeThickness="30" />

    <Line X1="100" Y1="300"
          X2="200" Y2="50"
          Stroke="Blue"
          StrokeThickness="5" />
</Grid>

Or, you could set the Canvas.ZIndex property. Although this property is defined by Canvas it works with any type of panel:

<Grid Background="LightCyan">
    <Line Canvas.ZIndex="1"
          X1="100" Y1="300"
          X2="200" Y2="50"
          Stroke="Blue"
          StrokeThickness="5" />

    <Line Canvas.ZIndex="0"
          X1="50" Y1="100"
          X2="300" Y2="200"
          Stroke="Red"
          StrokeThickness="30" />
</Grid>