方法 : 線を描画する

更新 : 2007 年 11 月

この例では、Line 要素を使用して線を描画する方法を示します。

線を描画するには、Line 要素を作成します。その要素の X1 プロパティと Y1 プロパティを使用して線の始点を設定し、X2 プロパティと Y2 プロパティを使用して終点を設定します。ストロークのない線は表示されないため、最後に Stroke と StrokeThickness を設定します。

線には内部領域がないので、線の Fill 要素を設定しても効果はありません。

Canvas 要素の内側に 3 本の線を描画する例を次に示します。

使用例

<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>

この例は、より大きなサンプルの一部分です。サンプル全体については「Shape 要素のサンプル」を参照してください。

参照

処理手順

Shape 要素のサンプル

参照

Line