.NET 4.0+

WPF Shapes - Line

by Richard Carr, published at http://www.blackwasp.co.uk/WPFLine.aspx

The one hundred and nineteenth part of the Windows Presentation Foundation Fundamentals tutorial begins to look at the two-dimensional drawing features of WPF. This article describes the Line class.

Drawing Classes

Windows Presentation Foundation includes a number of classes that allow you to create two-dimensional vector images. You can draw lines, rectangles, ellipses and polygons using lines and filled areas. Unlike bitmap images, which can be displayed using the Image control, vectors can be scaled and transformed without distortion or pixellation.

In this article, and those that follow, we'll look at six drawing classes that can be added to windows using pure XAML. We'll see how they can be formatted to change the style of lines and fills. We'll also see how the same formatting, defined using pens and brushes, can be applied to other WPF controls. Later in the tutorial we'll use two-dimensional shapes when replacing control templates, allowing advanced customisation of the standard controls.

Line

The first of the drawing classes that we'll consider is Line. This draws a simple, straight line between two points. The two points are defined using two pairs of X and Y co-ordinates. Both co-ordinate pairs are defined relative to the top-left corner of the invisible bounding box that surrounds the line.

Let's demonstrate with a simple example. Create a new WPF application project in Visual Studio named, "LineDemo". Once loaded, replace the XAML of the main window with the following code:

<Window x:Class="LineDemo.MainWindow"
        xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
        xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
        Title="Line Demo" Height="150" Width="200">
    <StackPanel>
        <Line X1="10" Y1="10" X2="175" Y2="50" Stroke="Black" StrokeThickness="10" />
    </StackPanel>
</Window>

In this example code, a Line is defined within a StackPanel. The co-ordinates for the start point of the line are defined in the X1 and X2 properties. X1 and Y1 are both set to 10, so the start point is ten device independent units from the left of the control's bounding box and ten units from the top. This means that the line will not start in the top corner of the window.

The X2 and Y2 attributes define the end point for the line, again relative to the bounding box. Stroke sets the pen used to draw the line. In this case the value, "Black", means that the line will use a solid black colour. The StrokeThickness property defines the width of the line. This defaults to zero, so if you do not explicitly provide a value, the line will not be visible.

Run the program to see the results.

Layout

Drawing objects follow the same layout rules as other controls. The nature of the drawing classes means that they are commonly used within a Canvas, so are positioned using co-ordinates. However, they can equally be used within any other layout control.

As described earlier, a line is defined using two pairs of co-ordinates within an imaginary bounding box. When lines are positioned within a container control, the rules are applied to this invisible box. For example, in a StackPanel with vertical orientation, the bounding boxes, and therefore the lines, will be stacked one above the other.

To demonstrate, replace the StackPanel in the sample code with the XAML below:

<StackPanel>
    <Line X1="0" Y1="0" X2="180" Y2="50" Stroke="Red" StrokeThickness="1" />
    <Line X1="0" Y1="50" X2="180" Y2="0" Stroke="Blue" StrokeThickness="1" />
</StackPanel>

The updated example includes two lines within a StackPanel. To show the layout, the stroke thickness is one pixel and the lines now fill the bounding boxes. This means that they touch.

Canvas Co-ordinates

When you use Lines within a Canvas control, there are two sets of co-ordinates to consider. The first are those of the lines, defined in X1, Y1, X2 and Y2. These still position the start and end points of the line within a bounding box. In addition, the Canvas control includes attached properties that position the box containing the line. The combination of co-ordinates determines the final layout.

For the final example we'll demonstrate the combination of Canvas and Line co-ordinates. Replace the StackPanel with the following Canvas:

<Canvas>
    <Line X1="0" Y1="0" X2="150" Y2="0" Stroke="Red" StrokeThickness="10"
          Canvas.Top="20" Canvas.Left="10" />
    <Line X1="0" Y1="0" X2="150" Y2="0" Stroke="Green" StrokeThickness="10"
          Canvas.Top="60" Canvas.Left="20" />
    <Line X1="0" Y1="0" X2="150" Y2="0" Stroke="Blue" StrokeThickness="10"
          Canvas.Top="100" Canvas.Left="30" />
</Canvas>

In this example there are three lines, all with the same X and Y co-ordinates. However, each line has a different set of values for the attached Canvas.Left and Canvas.Top properties. The end result is that the three lines are identical in shape but appear in different positions in the canvas.