【WPF】Pathで線形を書く（直線のみ）

目的

XAMLで適当な線形を書きたい。
なのでSystem.Windows.Shapes名前空間のPathを使って書いてみる。

環境

・IDE :Visual Studio 2017

方法

事前にPathタグにStrokeプロパティ(色)とStrokeThicknessプロパティ(太さ)を設定しておく。

そしてDataプロパティに線形の座標を設定する。

線形の始点

線形の書き始めに"M"を書く。
そのうしろに始点を、親要素（Pathが置かれている要素）の原点から見た座標で書く。
座標は「0,50」のように、X座標とY座標をカンマで区切って書く
（空白区切りでも書けるようだが、見た目が分かりにくいので個人的に非推奨）。

例：親要素から見て右方向に5、下方向に10の座標から書き始める場合

始点のみ.xml

<Path Stroke="Red" StrokeThickness="1" Data="M5,10"/>

線形の終点

線形の続きを書くには、直前の座標から空白をあけて"L"か"l"（小文字のL）を書く。
そのあとに設定する座標を、このPathの親要素から見た位置(絶対座標)で書きたいときは"L"を、直前の座標から見た位置(相対座標)で書きたいときは"l"を書く。
また続けて直線を引く場合は、Lを再度書く必要はなく、座標だけ書けばよい。

直線を続けて書く.xml

<Path Stroke="Red" StrokeThickness="1" Data="M1,0 l3,0 0,4 2,0 0,-4 2,0 "/>

"L"か"l"を指定したときの座標の書き方の違いについての例
どちらの例も始点から下方向に長さ10の垂直線をひくものである。
・”L"（絶対座標）で指定する場合

絶対座標で指定する場合.xml

<Path Stroke="Red" StrokeThickness="1" Data="M5,10 L5,20"/>

・相対座標で指定する場合

相対座標で指定する場合.xml

<Path Stroke="Red" StrokeThickness="1" Data="M5,10 l0,10"/>

　※2つ目の座標のX座標は"10"ではなく"l(エル)0"

描画される線形は以下の通り（赤線が線形）。

線形を閉じる

線形の始点と終点をつなげて閉じた図形にする場合、最後に"Z"と書く（大文字小文字のどちらでもよい）。

例：三角形を書く場合

三角形を書く場合.xml

<Path Stroke="Red" StrokeThickness="1" Data="M0,0 L10,0 5,8 z"/>

線形を複数書く

同じPathタグ内でもう1本線形を引く場合は、その直前にかいた座標から空白をあけて、また始点を表す文字と座標を書く。
このとき"M"と書くと親要素から見た位置で、"m"と書くと直前に書いた線形終点から見た位置で座標を設定することになる。

例：

複数の線形を含むPath.xml

<Path Stroke="Red" StrokeThickness="1" Data="M1,1 l10,0 m0,1 l0,5"/>

補足：
・これまでに登場した”M"とか”L"という英文字は、コマンドを表す。
MはMoveコマンド、LはLineコマンド、ZはCloseコマンドというそうだ。

・直線をひくコマンドは他にもありVerticalLineコマンドとHorizontalLineコマンドがある。
VerticalLineコマンドは"V"か"v"と書き、座標はY座標のみで指定できる。
HorizontalLineコマンドは"H"か"h"と書き、座標はX座標のみで指定できる。
大文字と小文字の違いは他のコマンドと同様で、あとに指定する座標が絶対座標か相対座標かの違いである。