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.
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
Ask Your Question
Got a programming related question? You may want to post your question here