[WPF]1行で図形を描画する

はじめに

実装するなかで以下のような左向きの矢印を含む見た目のボタンをどうやって描画しているのか見ていたところ、ButtonのBackgroundにて図形を描画し表示している手法を見かけました。

<GeometryDrawing Brush="#FFA0A0A0" Geometry="F1 M 0,4.7 L 0,9.4 L 0,0 Z " />

当初何をしているのかさっぱりだったのですが、実はXmlでUI要素をLineSegment Pointが・・・のように多くのタグを含めて実装するのと同じことを1行のGeometryで指定するという手法だったのです。

パス マークアップ構文

• 公式
  • パス マークアップ構文というそうでジオメトリをよりコンパクトに指定するために使用できる強力で複雑なミニ言語があるみたいです。
• わかりやすかった記事
  以下抜粋

  F 値 - Geometry.FillRule プロパティを設定します。EvenOddの場合は0を、NonZeroの場合は1を使用します。このコマンドは、文字列の先頭に表示する必要があります（使用する場合）。
  M x,y - ジオメトリの新しい PathFigure を作成し、その始点を設定します。このコマンドは、Fを除く他のコマンドの前に使用する必要がありますが、描画シーケンス中に使用して、座標系の原点を移動させることもできます。(Mはmoveの略)。
  L x,y - 指定した点までのLineSegmentを作成します。
  H x - 指定されたX値を使用し、Y値を一定に保つ水平方向のLineSegmentを作成します。
  V y - 指定されたY値を使用し、X値を一定に保ったまま、垂直方向の線分を作成します。
  A radiusx, radiusY, degrees isLargeArch, isClockwise x,y - 指定した点までのArcSegmentを作成します。円弧を記述する楕円の半径、円弧を回転させる度数、IsLargeArcとSweepDirectionプロパティを設定するブール値フラグを指定することができます。
  C x1,y1 x2,y2 x,y - (x1, y1) と (x2, y2) の制御点を使用して、指定されたポイントに BezierSegment を作成する。
  Q x1,y1 x,y - (x1, y1)を制御点とするQuadraticBezierSegmentを指定されたポイントに作成します。
  S x2,y2 x,y - 前のBezierSegmentの2番目の制御点を新しいBezierSegmentの最初の制御点として使用し、滑らかなBezierSegmentを作成する。
  Z - 現在のPathFigureを終了し、IsClosedをtrueに設定します。IsClosedをtrueに設定したくない場合は、このコマンドを使用する必要はありません。代わりに、新しいPathFigureを開始したり、文字列を終了したりする場合は、単にMを使用してください。

こういった構文を

<Path Stroke=”Black”>
    <Path.Data>
        <PathGeometry>
            <PathFigure IsClosed=”true” StartPoint=”10,100″>
                <LineSegment Point=”100,100″ />
                <LineSegment Point=”100,50″ />
            </PathFigure>
        </PathGeometry>
    </Path.Data>
</Data>

↓
こう圧縮できる

<Path Stroke=”Blue” Data=”M 10 100 L 100 100 L 100 50 Z” />

さいごに

可読性に若干難ありなので複雑な図形であったり変更が入る可能性のある図形に用いるのは危なそうですが、ちょっとしたボタンの見栄えに使うなど今後変更がなさそうな部分にさくっと用いる分には画像を探す手間も省け、シンプルに記述できて良さそうです。