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
Windows 10 requirements
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

Path() Path() Path() Path()

Initializes a new instance of the Path class.

public : Path()public Path()Public Sub New()// This API is not available in Javascript.

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>
Value
Geometry Geometry Geometry Geometry

A description of the shape to be drawn.

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.
Value
DependencyProperty DependencyProperty DependencyProperty DependencyProperty

The identifier for the Data dependency property.

See Also