How to: Draw a Line


This example shows you how to draw lines by using the Line element.

To draw a line, create a Line element. Use its X1 and Y1 properties to set its start point; and use its X2 and Y2 properties to set its end point. Finally, set its Stroke and StrokeThickness because a line without a stroke is invisible.

Setting the Fill element for a line has no effect, because a line has no interior.

The following example draws three lines inside a Canvaselement.

  <Canvas Height="300" Width="300">

    <!-- Draws a diagonal line from (10,10) to (50,50). -->
      X1="10" Y1="10"
      X2="50" Y2="50"
      StrokeThickness="4" />

    <!-- Draws a diagonal line from (10,10) to (50,50)
         and moves it 100 pixels to the right. -->
      X1="10" Y1="10"
      X2="50" Y2="50"
        <RadialGradientBrush GradientOrigin="0.5,0.5" Center="0.5,0.5" RadiusX="0.5" RadiusY="0.5">
            <GradientStop Color="Red" Offset="0" />
            <GradientStop Color="Blue" Offset="0.25" />

    <!-- Draws a horizontal line from (10,60) to (150,60). -->
       X1="10" Y1="60"
       X2="150" Y2="60"


This example is part of a larger sample; for the complete sample, see Shape Elements Sample.

Shape Elements Sample