XAML Path

The element of XAML is used to draw and fill paths. This article shows how to use the Path element to draw and fill paths in XAML.
  • 5293
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.

 DrawingGraphicsObjectsImg5.gif

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.

 DrawingGraphicsObjectsImg6.gif

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.

 PathImg8.gif


Figure 3.  A path with geometry objects in it
 

Ask Your Question 
 
Got a programming related question? You may want to post your question here
 

 

 

 

 

 

© 2019 DotNetHeaven. All rights reserved.