Write text inside shapes using Border control in wpf

We know that WPF Shapes (such as ellipse,rectangle etc) are not container control, so we can put some text directly inside them or we will have to work extra for doing that but we can do this with the help of Border control very easily. Continue reading “Write text inside shapes using Border control in wpf”

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