BlackWaspTM

This web site uses cookies. By using the site you accept the cookie policy.This message is for compliance with the UK ICO law.

Windows Presentation Foundation
.NET 4.0+

WPF Shapes - Path - Path Markup Syntax

The one hundred and thirty-second part of the Windows Presentation Foundation Fundamentals tutorial completes the examination of Paths. This article describes path markup syntax, which provides a shorter way to describe complex paths of lines, arcs and Bézier curves.

Path Markup Syntax

In the previous eight articles in this we've seen the capabilities of the Path class for drawing both simple and complex shapes. In this article, which is the last to consider drawing with Paths, we'll revisit the ability to combine lines, arcs and Bézier curves to make complex figures. However, rather than building shapes using lots of nested XAML elements, we will use a much more terse approach, via Path Markup Syntax.

Path markup syntax let you create complex geometry using segments that are defined using a single letter command. These are followed by one or more numeric arguments that describe the segments. To demonstrate, we'll create a simple example first, then add extra segments and figures using all of the available commands.

To begin, create a new WPF application in Visual Studio. Name the project, "PathMarkupDemo". Once the solution is ready, replace the XAML in the main window with the following code:

<Window x:Class="PathMarkupDemo.MainWindow"
        xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
        xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
        Title="WPF Path Demo"
        Height="300" Width="300">
    <Canvas>
        <Path Stroke="Black" StrokeThickness="3" Fill="PaleTurquoise"
              Data="M50,50 L100,100 L150,50"/>
    </Canvas>
</Window>

The above XAML includes some path markup language in the Data property. There are three commands shown. The first is "M". This indicates that a new figure is to be started. The current position is moved to the co-ordinates specified after the command but no lines are drawn. Each of the two "L" instructions tell WPF to draw a straight line from the current position to the provided co-ordinates, moving the current position to the end of the line.

The resultant figure is shown below. It appears as a triangular shape because the figure is filled. The two black lines are those drawn by the markup.

WPF Path with Path Markup Syntax

Horizontal and Vertical Lines

If you wish to draw horizontal or vertical lines, two further commands are available. "H" draws a horizontal line from the current position to the X co-ordinate provided as the single parameter. "V" draws a vertical line to the Y co-ordinate specified.

Modify the Data property for the Path as follows to add horizontal and vertical lines to the figure:

Data="M50,50 L100,100 L150,50 H200 V100"

You can see the results below:

Path Markup Syntax straight lines

Closing Figures

Figures can be open or closed. To automatically close a shape with a straight line between the final position and the original co-ordinates, add the "Z" command.

Add a Z to the end of the Data property:

Data="M50,50 L100,100 L150,50 H200 V100Z"

The shape is now closed:

Path Markup Syntax with closed path

1 February 2015