Data Property
Collapse the table of content
Expand the table of content

Path.Data Property

[ This article is for Windows Phone 8 developers. If you’re developing for Windows 10, see the latest documentation. ]

Gets or sets a Geometry that specifies the shape to be drawn.

Namespace:  System.Windows.Shapes
Assembly:  System.Windows (in System.Windows.dll)
XMLNS for XAML: Not mapped to an xmlns.

public Geometry Data { get; set; }
<Path Data="moveAndDrawCommands"/>

XAML Values


A single object element that derives from Geometry. This can be one of the following:


This is a complex syntax that cannot be adequately summarized here.

Property Value

Type: System.Windows.Media.Geometry
A description of the shape to be drawn.

Dependency property identifier field: DataProperty

To draw simple shapes, use the EllipseGeometry, LineGeometry, and RectangleGeometry objects. To draw curves, arcs, or complex shapes, use the PathGeometry object. To create a composite geometry, use a GeometryGroup.

Because a GeometryGroup is itself a Geometry, you can either specify single geometries or multiple geometries to populate the <Path.Data> property element in XAML. In the single geometry child case, there is no GeometryGroup collection, and the value of Data is the single geometry. If you specify multiple geometries, the value of Data is a GeometryGroup whose Children contain each of the geometries defined as child elements in XAML.

The following example uses a Path to draw an ellipse.

  <Path Fill="Gold" Stroke="Black" StrokeThickness="1">
      <EllipseGeometry Center="50,50" RadiusX="50" RadiusY="50" />

The following illustration shows the rendered Path.

Rendered path

Yellow Circle.

In XAML, you can also use a special abbreviated syntax as the value for the Data property. The following example uses this abbreviated syntax to specify the shape of a Path.

  <Path Stroke="DarkGoldenRod" StrokeThickness="3"
    Data="M 100,200 C 100,25 400,350 400,175 H 280"/>

The following illustration shows the rendered Path.

Path illustration

Output of the sample.

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. Path data parameters are case-sensitive. The capital M indicates an absolute location for the new current point. A lowercase m would indicate relative 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). This segment is indicated by the C command in the Data attribute string. Again, the capital C indicates an absolute path; a lowercase c would indicate a relative path.

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.

Windows Phone OS

Supported in: 8.1, 8.0, 7.1, 7.0

Windows Phone

© 2017 Microsoft