XAML Path Element

The <Path /> element of XAML is used to draw and fill a path. The Data attribute of the Path represents various points in the path. Here M represents MoveTo command and C represents the absolute path. Capital H represents the LineTo command.

The following code draws a path.

<Path Data="M 200,40 C 50,90 200,250 200,75 H 480" Stroke="Black"
   StrokeThickness="4"/>

The output looks like Figure 1.

Figure 1. Drawing a path

Similar to the rectangle and ellipse, the Fill attribute fills a path with a color.

<Path Data="M 200,40 C 50,90 200,250 200,75 H 480" Stroke="Black"
   StrokeThickness="4" Fill="yellow"/>

The output looks like Figure 2.

Figure 2.  Filling a path

As any other XAML attributes, we can add Data attribute within <Path.Data /> tag as shown below. In this code, I put a geometry ellipse an rectangle (rounded) to generate a complex drawing.

<!-- Create a Graphics Path -->
 <Path Stroke="Black" StrokeThickness="1" >
 <!-- Fill graphics path with a gradient brush -->
 <Path.Fill>
         <LinearGradientBrush>
              <GradientStop Offset="0" Color="Red"/>
              <GradientStop Offset="1" Color="Green"/>
         </LinearGradientBrush>
    </Path.Fill>

 <!-- Add graphics path data  -->
   <Path.Data>
    <GeometryGroup FillRule="EvenOdd">
       <EllipseGeometry Center="120,120" RadiusX="100" RadiusY="100" />             
       <RectangleGeometry Rect="120,70 200 100" RadiusX="10" RadiusY="10" />
    </GeometryGroup>   
   </Path.Data>
 </Path>

The output looks like Figure 3.

Figure 3.  A path with geometry objects in it