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). -->
    <Line
      X1="10" Y1="10"
      X2="50" Y2="50"
      Stroke="Black"
      StrokeThickness="4" />

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

    <!-- Draws a horizontal line from (10,60) to (150,60). -->
    <Line
       X1="10" Y1="60"
       X2="150" Y2="60"
       Stroke="Black"
       StrokeThickness="4"/>

  </Canvas>

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

Line
Shape Elements Sample

Show: