Events
Mar 17, 11 PM - Mar 21, 11 PM
Join the meetup series to build scalable AI solutions based on real-world use cases with fellow developers and experts.
Register nowThis browser is no longer supported.
Upgrade to Microsoft Edge to take advantage of the latest features, security updates, and technical support.
.NET Multi-platform App UI (.NET MAUI) path markup syntax enables you to compactly specify path geometries in XAML.
Path markup syntax is specified as a string value to the Path.Data
property:
<Path Stroke="Black"
Data="M13.908992,16.207977 L32.000049,16.207977 32.000049,31.999985 13.908992,30.109983Z" />
Path markup syntax is composed of an optional FillRule
value, and one or more figure descriptions. This syntax can be expressed as: <Path Data="
[fillRule] figureDescription [figureDescription] * " ... />
In this syntax:
F0
is used to specify the EvenOdd fill rule, while F1
is used to specify the Nonzero fill rule. For more information about fill rules, see Fill rules.In the example above, the path markup syntax specifies a start point using the move command (M
), a series of straight lines using the line command (L
), and closes the path with the close command (Z
).
In path markup syntax, spaces are not required before or after commands. In addition, two numbers don't have to be separated by a comma or white space, but this can only be achieved when the string is unambiguous.
Tip
Path markup syntax is compatible with Scalable Vector Graphics (SVG) image path definitions, and so it can be useful for porting graphics from SVG format.
While path markup syntax is intended for consumption in XAML, it can be converted to a Geometry object in code by invoking the ConvertFromInvariantString
method in the PathGeometryConverter class:
Geometry pathData = (Geometry)new PathGeometryConverter().ConvertFromInvariantString("M13.908992,16.207977 L32.000049,16.207977 32.000049,31.999985 13.908992,30.109983Z");
The move command specifies the start point of a new figure. The syntax for this command is: M
startPoint or m
startPoint.
In this syntax, startPoint is a Point
structure that specifies the start point of a new figure. If you list multiple points after the move command, a line is drawn to those points.
M 10,10
is an example of a valid move command.
A draw command can consist of several shape commands. The following draw commands are available:
L
or l
).H
or h
).V
or v
).A
or a
).C
or c
).Q
or q
).S
or s
).T
or t
).Each draw command is specified with a case-insensitive letter. 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
.
The line command creates a straight line between the current point and the specified end point. The syntax for this command is: L
endPoint or l
endPoint.
In this syntax, endPoint is a Point
that represents the end point of the line.
L 20,30
and L 20 30
are examples of valid line commands.
For information about creating a straight line as a PathGeometry object, see Create a LineSegment.
The horizontal line command creates a horizontal line between the current point and the specified x-coordinate. The syntax for this command is: H
x or h
x.
In this syntax, x is a double
that represents the x-coordinate of the end point of the line.
H 90
is an example of a valid horizontal line command.
The vertical line command creates a vertical line between the current point and the specified y-coordinate. The syntax for this command is: V
y or v
y.
In this syntax, y is a double
that represents the y-coordinate of the end point of the line.
V 90
is an example of a valid vertical line command.
The elliptical arc command creates an elliptical arc between the current point and the specified end point. The syntax for this command is: A
size rotationAngle isLargeArcFlag sweepDirectionFlag endPoint or a
size rotationAngle isLargeArcFlag sweepDirectionFlag endPoint.
In this syntax:
size
is a Size
that represents the x- and y-radius of the arc.rotationAngle
is a double
that represents the rotation of the ellipse, in degrees.isLargeArcFlag
should be set to 1 if the angle of the arc should be 180 degrees or greater, otherwise set it to 0.sweepDirectionFlag
should be set to 1 if the arc is drawn in a positive-angle direction, otherwise set it to 0.endPoint
is a Point
to which the arc is drawn.A 150,150 0 1,0 150,-150
is an example of a valid elliptical arc command.
For information about creating an elliptical arc as a PathGeometry object, see Create an ArcSegment.
The 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. The syntax for this command is: C
controlPoint1 controlPoint2 endPoint or c
controlPoint1 controlPoint2 endPoint.
In this syntax:
Point
that represents the first control point of the curve, which determines the starting tangent of the curve.Point
that represents the second control point of the curve, which determines the ending tangent of the curve.Point
that represents the point to which the curve is drawn.C 100,200 200,400 300,200
is an example of a valid cubic Bezier curve command.
For information about creating a cubic Bezier curve as a PathGeometry object, see Create a BezierSegment.
The quadratic Bezier curve command creates a quadratic Bezier curve between the current point and the specified end point by using the specified control point. The syntax for this command is: Q
controlPoint endPoint or q
controlPoint endPoint.
In this syntax:
Point
that represents the control point of the curve, which determines the starting and ending tangents of the curve.Point
that represents the point to which the curve is drawn.Q 100,200 300,200
is an example of a valid quadratic Bezier curve command.
For information about creating a quadratic Bezier curve as a PathGeometry object, see Create a QuadraticBezierSegment.
The smooth cubic Bezier curve command creates a cubic Bezier curve between the current point and the specified end point by using the specified control point. The syntax for this command is: S
controlPoint2 endPoint or s
controlPoint2 endPoint.
In this syntax:
Point
that represents the second control point of the curve, which determines the ending tangent of the curve.Point
that represents the point to which the curve is drawn.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 the previous command was 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.
S 100,200 200,300
is an example of a valid smooth cubic Bezier curve command.
The smooth quadratic Bezier curve command creates a quadratic Bezier curve between the current point and the specified end point by using a control point. The syntax for this command is: T
endPoint or t
endPoint.
In this syntax, endPoint is a Point
that represents the point to which the curve is drawn.
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 was not a quadratic Bezier curve or a smooth quadratic Bezier curve command, the control point is assumed to be coincident with the current point.
T 100,30
is an example of a valid smooth quadratic cubic Bezier curve command.
The close command ends the current figure and creates a line that connects the current point to the starting point of the figure. Therefore, this command creates a line-join between the last segment and the first segment of the figure.
The syntax for the close command is: Z
or z
.
Instead of a standard numerical value, you can also use the following case-sensitive special values:
Infinity
represents double.PositiveInfinity
.-Infinity
represents double.NegativeInfinity
.NaN
represents double.NaN
.In addition, you may also use case-insensitive scientific notation. Therefore, +1.e17
is a valid value.
.NET MAUI feedback
.NET MAUI is an open source project. Select a link to provide feedback:
Events
Mar 17, 11 PM - Mar 21, 11 PM
Join the meetup series to build scalable AI solutions based on real-world use cases with fellow developers and experts.
Register nowTraining
Learning path
Use advance techniques in canvas apps to perform custom updates and optimization - Training
Use advance techniques in canvas apps to perform custom updates and optimization
Documentation
The .NET MAUI Path class can be used to draw curves and complex shapes.
.NET MAUI geometry classes enable you to describe the geometry of a 2D shape.
A .NET MAUI transform defines how to transform a Path object from one coordinate space to another coordinate space.