Share via

  • Article

Path

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

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 a path-specific mini-language or with an object model.

<Path   .../>

Properties

Canvas.Left, Canvas.Top, Canvas.ZIndex, Clip, Cursor, Data, Effect (Silverlight 3), Fill (Shape), Grid.Column (Silverlight 2), Grid.ColumnSpan (Silverlight 2), Grid.Row (Silverlight 2), Grid.RowSpan (Silverlight 2), Height (UIElement), HorizontalAlignment (Silverlight 2), Margin (Silverlight 2), MaxHeight (Silverlight 2), MaxWidth (Silverlight 2), MinHeight (Silverlight 2), MinWidth (Silverlight 2), Name (DependencyObject), Opacity (UIElement), OpacityMask, Projection (Silverlight 3), RenderTransform, RenderTransformOrigin, Resources, Stretch (Shape), Stroke (Shape), StrokeDashArray, StrokeDashCap, StrokeDashOffset, StrokeEndLineCap, StrokeLineJoin, StrokeMiterLimit, StrokeStartLineCap, StrokeThickness, Style (Silverlight 2), Tag, Triggers, VerticalAlignment (Silverlight 2), Visibility, Width (UIElement)

Managed Equivalent

Path

Remarks

Fundamentally, a Path is a Shape object. However, a Path can be used to create much more complex two-dimensional graphics than other Shape objects. The Path object can draw closed or open shapes, lines, and curves. For a description of the shapes that the Path element supports, see the Data property

A Path supports two parallel techniques for declaring its contents: as an object model using discrete geometries declared in markup or code, or as a mini-language declared in markup. The geometry object model can use the GeometryGroup object as data to specify a composite of multiple geometries.

The mini-language is analogous to a pathing language output used in some graphics tools. For more information about using the mini-language definition format for Path in markup, see Path Markup Syntax.

NoteNote:

For best performance, avoid explicitly setting the Width and Height of a Path. Setting the Width and Height will result in additional stretching, which has a performance cost. Instead, rely on the explicitly set coordinates of the Path and its contained data to control its shape and position. In effect, the Path will have a natural height and width, although those values are not reported to the object model. For more information, see the Stretch (Shape) property.

For more information on basic concepts, see Geometries. Note that the Geometries topic is written primarily for users of the managed API, and may not have code examples or specific information that address the JavaScript API scenarios.

Example

The following example uses a Path object to draw an ellipse.

An EllipseGeometry drawn at (50,50)

Yellow circle

<Canvas  
  xmlns="https://schemas.microsoft.com/winfx/2006/xaml/presentation" 
  xmlns:x="https://schemas.microsoft.com/winfx/2006/xaml"> 
  
  <Path Fill="Gold" Stroke="Black" StrokeThickness="1">
    <Path.Data>
      <EllipseGeometry Center="50,50" RadiusX="50" RadiusY="50" />
    </Path.Data>
  </Path> 
</Canvas>

See Also

Reference

Shape

Stretch (Shape)