Path Markup Syntax

Microsoft Silverlight will reach end of support after October 2021. Learn more.

Silverlight supports a powerful and complex mini-language that you can use to describe geometric paths in Extensible Application Markup Language (XAML).

This topic contains the following sections.

  • Prerequisites
  • Path Mini-Language
  • Move Command
  • Draw Commands
  • Close Command
  • Point Syntax
  • Special Values
  • Related Topics

Prerequisites

You should be familiar with the basic features of Geometry objects. For more information, see Geometries.

Path Mini-Language

Silverlight provides a mini-language for describing geometric paths as values of attributes in XAML. You use this mini-language when setting a property of type Geometry, such as the Clip property of a UIElement or the Data property of a Path element. The following example uses the path attribute syntax to create a shape.

Run this sample

<Canvas>
  <Path Stroke="Black" Fill="Gray"
    Data="M 10,100 C 10,300 300,-200 300,100" />
</Canvas>

Separators and White Space

For brevity, a single space is shown in the syntax sections that follow, but multiple spaces are also acceptable wherever a single space is shown.

Two numbers do not need to be separated by a comma or white space if the resulting string is unambiguous. For example, 2..3 is interpreted as two numbers: "2." and ".3". Similarly, 2-3 consists of the two numbers "2" and "-3".

Spaces are not required before or after commands.

Syntax

The XAML path syntax consists of an optional FillRule value and one or more figure descriptions.

Path XAML attribute usage

<object property="[fillRule] figureDescription[ figureDescription]*" ... />

Term

Description

fillRule

FillRule

Specifies whether the path uses the EvenOdd or NonZero fill rule value:

  • F0 specifies the EvenOdd fill rule.

  • F1 specifies the Nonzero fill rule.

If you omit this command, the path uses the default behavior, which is EvenOdd. If you specify this command, you must place it first.

figureDescription

A figure composed of a move command, draw commands, and an optional close command.

moveCommand drawCommands [closeCommand]

moveCommand

A move command that specifies the start point of the figure.

drawCommands

One or more draw commands that describe the figure's contents.

closeCommand

An optional close command that closes the figure.

Move Command

Specifies the start point of a new figure. If a figure was previously started with a move command, but not closed with a close command, the open figure will be ended (not closed) when a new move command is issued.

Syntax

M startPoint

- or -

m startPoint

Term

Description

startPoint

Point

The start point of the figure.

An uppercase M indicates that startPoint is an absolute value; a lowercase m indicates that startPoint is an offset to the previous point, or (0,0) if none exists. If you list multiple points after the move command, a line is drawn to those points as if you had specified the line command.

Draw Commands

A draw command can consist of several shape commands. The following shape commands are available: line, horizontal line, vertical line, cubic Bezier curve, quadratic Bezier curve, smooth cubic Bezier curve, smooth quadratic Bezier curve, and elliptical arc.

You enter each command by using either an uppercase letter or a lowercase letter: uppercase letters denote absolute values, and lowercase letters denote relative values. The control points for a segment are relative to the end point of the preceding segment. When sequentially entering more than one command of the same type, you can omit the duplicate command entry; for example, L 100,200 300,400 is equivalent to L 100,200 L 300,400.

Line Command

Creates a straight line between the current point and the specified end point. l 20 30 and L 20,30 are examples of valid line commands.

Syntax

L endPoint

- or -

l endPoint

Term

Description

endPoint

Point

The end point of the line.

Horizontal Line Command

Creates a horizontal line between the current point and the specified x-coordinate. H 90 is an example of a valid horizontal line command.

Syntax

H x

- or -

h x

Term

Description

x

Double

The x-coordinate of the end point of the line.

Vertical Line Command

Creates a vertical line between the current point and the specified y-coordinate. v 90 is an example of a valid vertical line command.

Syntax

V y

- or -

v y

Term

Description

y

Double

The y-coordinate of the end point of the line.

Cubic Bezier Curve Command

Creates a cubic Bezier curve between the current point and the specified end point by using the two specified control points (controlPoint1 and controlPoint2). C 100,200 200,400 300,200 is an example of a valid curve command.

Syntax

C controlPoint1 controlPoint2 endPoint

- or -

c controlPoint1 controlPoint2 endPoint

Term

Description

controlPoint1

Point

The first control point of the curve, which determines the starting tangent of the curve.

controlPoint2

Point

The second control point of the curve, which determines the ending tangent of the curve.

endPoint

Point

The point to which the curve is drawn.

Quadratic Bezier Curve Command

Creates a quadratic Bezier curve between the current point and the specified end point by using the specified control point (controlPoint). q 100,200 300,200 is an example of a valid quadratic Bezier curve command.

Syntax

Q controlPoint endPoint

- or -

q controlPoint endPoint

Term

Description

controlPoint

Point

The control point of the curve, which determines the starting and ending tangents of the curve.

endPoint

Point

The point to which the curve is drawn.

Smooth Cubic Bezier Curve Command

Creates a cubic Bezier curve between the current point and the specified end point. The first control point is assumed to be the reflection of the second control point of the previous command relative to the current point. If there is no previous command or if the previous command is not a cubic Bezier curve command or a smooth cubic Bezier curve command, the first control point is assumed to be coincident with the current point. The second control point, the control point for the end of the curve, is specified by controlPoint2. For example, S 100,200 200,300 is a valid smooth cubic Bezier curve command.

Syntax

S controlPoint2 endPoint

- or -

s controlPoint2 endPoint

Term

Description

controlPoint2

Point

The control point of the curve, which determines the ending tangent of the curve.

endPoint

Point

The point to which the curve is drawn.

Smooth Quadratic Bezier Curve Command

Creates a quadratic Bezier curve between the current point and the specified end point. The control point is assumed to be the reflection of the control point of the previous command relative to the current point. If there is no previous command or if the previous command is not a quadratic Bezier curve command or a smooth quadratic Bezier curve command, the control point is coincident with the current point.

Syntax

T controlPoint endPoint

- or -

t controlPoint endPoint

Term

Description

controlPoint

Point

The control point of the curve, which determines the starting tangent of the curve.

endPoint

Point

The point to which the curve is drawn.

Elliptical Arc Command

Creates an elliptical arc between the current point and the specified end point.

Syntax

A size rotationAngle isLargeArcFlag sweepDirectionFlag endPoint

- or -

a size rotationAngle isLargeArcFlag sweepDirectionFlag endPoint

Term

Description

size

x, y pair

The x-radius and y-radius of the arc.

rotationAngle

Double

The rotation of the ellipse, in degrees.

isLargeArcFlag

Set to 1 if the angle of the arc should be 180 degrees or greater; otherwise, set to 0.

sweepDirectionFlag

Set to 1 if the arc is drawn in a positive-angle direction; otherwise, set to 0.

endPoint

Point

The point to which the arc is drawn.

Close Command

The close command ends the current figure and creates a line that connects the current point to the starting point of the figure. This command creates a line-join (corner) between the last segment and the first segment of the figure.

After the figure is closed with the close command, a new figure is implicitly created at the closed figure’s starting point, which is also the point specified by the last move command. This enables drawing with draw commands immediately after closing a figure and allows for more concise syntax when figures, such as a pinwheel pattern, share the same starting point. To use a different figure starting point, specify another move command.

Syntax

Z

- or -

z

Point Syntax

Point syntax describes the x-coordinate and y-coordinate of a point.

Syntax

x,y

- or -

x y

Term

Description

x

Double

The x-coordinate of the point.

y

Double

The y-coordinate of the point.

Special Values

You can also use the following special values instead of the standard numerical values. These values are case-sensitive.

Value

Description

Infinity

Represents the positive infinity Double value (Double.PositiveInfinity).

-Infinity

Represents the negative infinity Double value (Double.NegativeInfinity).

NaN

Represents the NaN Double value (Double.NaN).

You may also use scientific notation. For example, +1.e17 is a valid value.

See Also

Reference

Concepts

Other Resources