Line shape in WPF

WPF provides a number of ready-to-use Shape objects. All shape objects inherit from the Shape class. Available shape objects include Ellipse, Line, Path, Polygon, Polyline, and Rectangle. Shape objects share the following common properties.

Stroke : Describes how the shape’s outline is painted.
StrokeThickness : Describes the thickness of the shape’s outline.
Fill : Describes how the interior of the shape is painted.

in this article we learn that how to draw various type of line shape.

The Line class enables you to draw a line between two points. The following example shows several ways to specify line coordinates and stroke properties.

Draws a diagonal line

<Window x:Class="MainWindow"
        xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
        xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
        Title="wpfEllipse"  Width="300" Height="300">
    <Canvas Height="200" Width="250">
       <Line
    X1="50" Y1="50"
    X2="200" Y2="100"
    Stroke="Black"
    StrokeThickness="4" />
 </Canvas>
</Window>

above code produce this result:

Draw the line shape in WPF. The Line class enables you to draw a line between two points

Draws a diagonal line with gradient effect

<Window x:Class="MainWindow"
        xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
        xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
        Title="Line in WPF"  Width="292" Height="182">
    <Canvas Height="150" Width="250">
        <Line
    X1="10" Y1="10"
    X2="100" Y2="150"
    StrokeThickness="4"
    Canvas.Left="100">
            <Line.Stroke>
                <RadialGradientBrush GradientOrigin="0.5,0.5" Center="0.5,0.5" RadiusX="0.5" RadiusY="0.5">
                    <RadialGradientBrush.GradientStops>
                        <GradientStop Color="Red" Offset="0" />
                        <GradientStop Color="green" Offset="0.75" />
                    </RadialGradientBrush.GradientStops>
                </RadialGradientBrush>
            </Line.Stroke>
        </Line>
    </Canvas>
</Window>

above code produce this result:

gradient line in WPF

Draws a horizontal line

you can draw horizantal line in xaml with same Y1and Y2 points.

<Window x:Class="MainWindow"
        xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
        xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
        Title="Line in WPF"  Width="292" Height="182">
    <Canvas Height="150" Width="250">
     <Line
     X1="10" Y1="60"
     X2="240" Y2="60"
     Stroke="Black"
     StrokeThickness="4"/>
    </Canvas>
</Window>

above code produce this result:

horizontal line in WPF

Draws a vertical line

you can draw vertical line in xaml with same X1 and X2 points.

<Window x:Class="MainWindow"
        xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
        xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
        Title="Line in WPF"  Width="292" Height="182">
    <Canvas Height="146" Width="98">
     <Line
     X1="50" Y1="10"
     X2="50" Y2="140"
     Stroke="Black"
     StrokeThickness="4"/>
    </Canvas>
</Window>

above code produce this result:

vertical line in WPF

2 thoughts on “Line shape in WPF”

  2. Thanks
    I was wondering if any one can help me to answer this question?
    for example for the table below I can draw 2 curves : one for x , one for y but my question is that if the figures change(2.4 changes to 3) how automatically it can be updated and draw the curves ?
    x y
    6 2.4 6.5
    7 1.4 4.3
    8 3.6 1.3
    9 2.5 3.5

Comments are closed.