Creating a 'Path' Object in Silverlight

What is a ‘path’? A Xaml tag or object that defines a complex shape or polygon of some kind via a connected line which may make be an actual polygon and or consist of points, lines and arch’s. Everything from character to slices of a pie chart can be built using ‘paths’. Typically the ‘path’ is defined by its data property so typically a path is going to be something like this:

<Path Name=”MyPath” Stroke=”…” Fill=”…” Data=”…” …/>

At the very least, you may also use Canvas.Left and Canvas.Top or just place it in a canvas etc as well. A designer normally would be abstracted from actually building a path by hand but in cases such as building a pie chart one might want to write code to dynamically build slices of the pie chart programmatically and so therefore would want to know the syntax of the ‘data’ property on a path so they could compute it in their code.

How do I define a Path myself? To start with you must define a start point which is designated by ‘m’ (not case sensitive) and a point such as ‘M 10, 10’. You also need to define an end point which could be the same point so something like ‘L 10, 10’. So lets check out the types of things I can pass in.

If our start point is say ‘M 10, 10’ and we want to draw a horizontal line we can then do use the horizontal line command like this: ‘H x’ which might look like this then: ‘M 10, 10 H 150’. Next we can draw a line down using the vertical line command like this: ‘M 10, 10 H 150 V 150’ and if you use the L point from earlier we get a horizontal line and then a vertical line and a line from that point back to where we started which creates a triangle. (see the Path Sample Part 1).

So to get creative we can then use the Cubic Bezier Curve Command designated by ‘C’ so from the end point of our vertical line command we can then draw a Curve using 2 control points like this: ‘C 100, 100 200, 200 50, 50’. This shape would then give us this funky triangle shape with a weird ‘foot’ at the bottom.

We can also use the Quadratic Bezier Curve Command which would be ‘Q point1 end point’ where point 1 is our control point we could use the ‘Smooth Cubic Bezier Curve Command that is ‘S point1 end point where point1 is the control point for a regular curve or use ‘T’ to make the curve quadratic.

My favorite command is the Elliptical Arc Command which can be used to create a slice curve such as the curve of a pie slice. The syntax is ‘A size rotationAngle isLargeArcAngle sweepDirectionFlag endpoint’. These are the following:

· Size: this is the radius of the arch in pixels

· Rotation Angle: is the angle of rotation of the curve in degrees

· ‘Is Large Arc Angle’: is a flag that sets the render of the arch to be 180 degrees or greater if set to 1 where the default is 0

· ‘Sweep Direction Flag’: is a flag determining if the arc is to be drawn from a positive angle or not from the point if set to 1 but default is 0

· ‘End Point’ is just that the X,Y end point of our Arc

So if we use an arc definition like this: A 50, 50 200 1 0 100, 100 added to our sample (see Path Sample 3) we get a crazy but cool shape. That you really have to see to understand… note how the fill is applied effectively making 2 ‘shapes’. The entire definition would look like this:

<Path Name="PathElement" Data="M 10, 10 H 150 V 150

C 155,155 160,160 140,165

A 50, 50 200 1 0 100,100

L 10, 10"

Stroke="#3c5f0c" StrokeThickness="3"

Fill="#728f4a"

/>

Check out the SDK for more detailed on Path definition syntax or paths in general.