Path Path Path Path Class
Definition
Draws a series of connected lines and curves. The line and curve dimensions are declared through the Data property, and can be specified either with Move and draw commands syntax, or with an object model.
public : class Path : Shape, IPathpublic class Path : Shape, IPathPublic Class Path Inherits Shape Implements IPath// This API is not available in Javascript.
<Path .../>
- Inheritance
- Attributes
| Device family |
Windows 10 (introduced v10.0.10240.0)
|
| API contract |
Windows.Foundation.UniversalApiContract (introduced v1)
|
Inherited Members
Inherited properties
Inherited events
Inherited methods
Examples
This XAML example uses a Path with a GeometryGroup value as Data to draw a superimposed ellipse and rectangle shape.
<Canvas>
<Path Fill="Gold" Stroke="Black" StrokeThickness="1">
<Path.Data>
<GeometryGroup>
<EllipseGeometry Center="50,50" RadiusX="50" RadiusY="50"/>
<RectangleGeometry Rect="0,0,100,100" />
</GeometryGroup>
</Path.Data>
</Path>
</Canvas>
Constructors
Properties
Data Data Data Data
Gets or sets a Geometry that specifies the shape to be drawn.
public : Geometry Data { get; set; }public Geometry Data { get; set; }Public ReadWrite Property Data As Geometry// This API is not available in Javascript.
<Path>
<Path.Data>
singleGeometry
</Path.Data>
</Path>
Examples
The following example uses a Path to draw an ellipse.
<Canvas>
<Path Fill="Gold" Stroke="Black" StrokeThickness="1">
<Path.Data>
<EllipseGeometry Center="50,50" RadiusX="50" RadiusY="50" />
</Path.Data>
</Path>
</Canvas>
In XAML, you can also use Move and draw commands syntax as the value for the Data property. This example uses this syntax to specify the shape of a Path.
<Canvas>
<Path Stroke="DarkGoldenRod" StrokeThickness="3"
Data="M 100,200 C 100,25 400,350 400,175 H 280"/>
</Canvas>
The Data attribute string begins with the move to command, indicated by "M", which establishes a start point for the path in the coordinate system of the Canvas. Strings in the Move and draw commands syntax are case-sensitive and determine whether commands use relative (offset) or absolute coordinates. The first segment is a cubic Bezier curve beginning at (100,200) and ending at (400,175), drawn using the two control points (100,25) and (400,350).
The second segment begins with an absolute horizontal line to command "H", which specifies a line drawn from the preceding subpath's endpoint (400,175) to a new endpoint (280,175). Because it is a horizontal line to command, the value specified is an x-coordinate.
- See Also
DataProperty DataProperty DataProperty DataProperty
Identifies the Data dependency property.
public : static DependencyProperty DataProperty { get; }public static DependencyProperty DataProperty { get; }Public Static ReadOnly Property DataProperty As DependencyProperty// This API is not available in Javascript.
The identifier for the Data dependency property.