Thursday, July 29, 2010

XAML Geometry Path Markup Syntax Summary

WPF/Silverlight has quite a nice syntax for defining paths in XAML.  The documentation explaining the syntax is quite verbose, which is a good thing, but i wrote this post to provide an at-a-glance summary of the various components:

Letter

Description

Syntax

Example

M

Move M startPoint M 0,0

L

Line L endPoint L 20,30

H

Horizontal line H x-coordinate H 90

V

Vertical line V y-coordinate V 90

C

Cubic Bezier curve C controlPoint1 controlPoint2 endPoint C 1,2 2,4 3,2

Q

Quadratic Bezier curve Q controlPoint endPoint Q 1,2 3,2

S

Smooth cubic Bezier curve S controlPoint2 endPoint S 1,2 3,2

T

Smooth quadratic Bezier curve T controlPoint endPoint T 1,2 3,2

A

Elliptical arc A size rotationAngle isLargeArcFlag sweepDirectionFlag endPoint A 2 40 1 1 2,2

Z

Close the current figure Z Z

Notes

  • When sequentially entering more than one command of the same type, you can omit the duplicate command entry, eg - L 100,200 300,400 is equivalent to L 100,200 L 300,400
  • An uppercase command letter denotes absolute values
  • A lowercase command letter denotes relative values: the control points for that segment are relative to the end point of the preceding example
  • Instead of a standard numerical, you can also use the following special values: Infinity, –Infinity, NaN
  • You may also use scientific notation, eg - +1.e17

No comments: