Adnan Mohsin January 08, 2017 Comments 2.00

"Vector Graphics in WPF

LINE

How to create a Line in WPF?

In WPF The line shape can easily be created in XAML. The following code snippet creates a Line by setting its start point (X1, Y1) to (20, 20) and end point (X2, Y2) to (300, 300). That means a line is drawn from point (20, 20) to (300, 300). The code  can also set the color of the line to red and width 4 as shown below

<Line

    X1="20" Y1="20"

    X2="300" Y2="300"

    Stroke="Red"

    StrokeThickness="4" />

Rectangle

How to create a Rectangle in WPF?

The Rectangle element represents a Silverlight Rectangle control in XAML.

<Rectangle/>

The following  code snippet creates a rectangle by setting its width and height properties to 100 and 50 respectively. The code also sets the black stroke of width 4. 

<Rectangle

    Width="100"

    Height="50"

    Fill="Blue"

    Stroke="Black"

    StrokeThickness="4" />

 

<Rectangle

    Width="100"

    Height="50"

    Fill="Blue"

    Stroke="Black"

    StrokeThickness="4"

    RadiusX="20"

    RadiusY="20" />

 Formatting a Rectangle 

We can also use the Fill property of the Rectangle in WPF to draw a rectangle with any kind of brush including a solid brush, linear gradient brush, radial gradient brush, or an image brush. The following  code uses linear gradient brushes to draw the background and foreground of a Rectangle.

 

<Rectangle

    Width="100"

    Height="50"          

    Stroke="Black"

    StrokeThickness="4" > 
    
    <Rectangle.Fill>

        <LinearGradientBrush StartPoint="0,0" EndPoint="1,1" >

            <GradientStop Color="Blue" Offset="0.1" />

            <GradientStop Color="Orange" Offset="0.25" />

            <GradientStop Color="Green" Offset="0.75" />

            <GradientStop Color="Red" Offset="1.0" />

        </LinearGradientBrush>

    </Rectangle.Fill>

</Rectangle>

http://www.csharptutor.com/Uploads/Originals/vector-graphics-in-wpf/PostImages/1.jpg

 How to Set Image as Background of a Rectangle in WPF?

To set an image as background of a Rectangle, we can set an image brush as the Fill of the Rectangle. The code sets fills the rectangle with an image.   

<Rectangle.Fill >

    <ImageBrush ImageSource="dock.jpg" />

</Rectangle.Fill >

http://www.csharptutor.com/Uploads/Originals/vector-graphics-in-wpf/PostImages/5.jpg

How to draw a Semi-transparent Rectangle in WPF?

The Opacity property represents the transparency of a Rectangle. The value of Opacity is between 0 and 1, where 0 is fully transparent and 1 is fully opaque. The code generates a semi-transparent shape.

<Rectangle

    Width="100"

    Height="50"          

    Stroke="Black"

    StrokeThickness="4"

    Opacity="0.5">

http://www.csharptutor.com/Uploads/Originals/vector-graphics-in-wpf/PostImages/1.jpg

Ellipse

How to Create  an Ellipse in WPF?

The Ellipse element represents a Ellipse control in XAML such as:

<Ellipse/>

The following code snippet creates an Ellipse by setting its width and height properties to 100 and 50 respectively. The code also sets the black stroke of width 4. 

<Ellipse

    Width="100"

    Height="50"

    Fill="Blue"

    Stroke="Black"

    StrokeThickness="4" />

 

http://www.csharptutor.com/Uploads/Originals/vector-graphics-in-wpf/PostImages/6.jpg

If we create an ellipse with an equal width and height, it will become a circle. The following code snippet creates a circle :

<Ellipse

    Width="100"

    Height="100"

    Fill="Blue"

    Stroke="Black"

    StrokeThickness="4" />

http://www.csharptutor.com/Uploads/Originals/vector-graphics-in-wpf/PostImages/7.jpg

 Formatting an Ellipse

We can apply  the Fill property of the Ellipse to draw an Ellipse with any kind of brush including a solid brush, linear gradient brush, radial gradient brush, or an image brush. The  following code uses linear gradient brushes to draw the background and foreground of a Ellipse.

<Ellipse

    Width="100"

    Height="50"          

    Stroke="Black"

    StrokeThickness="4" >
 
<Ellipse.Fill>

        <LinearGradientBrush StartPoint="0,0" EndPoint="1,1" >

            <GradientStop Color="Blue" Offset="0.1" />

            <GradientStop Color="Orange" Offset="0.25" />

            <GradientStop Color="Green" Offset="0.75" />

            <GradientStop Color="Red" Offset="1.0" />

        </LinearGradientBrush>

</Ellipse.Fill>

</Ellipse>

http://www.csharptutor.com/Uploads/Originals/vector-graphics-in-wpf/PostImages/8.jpg

How to Set an Image as Background of a Ellipse?

To set an image as a background of an Ellipse, we can set an image brush as the Fill of the Ellipse. The code sets fills the Ellipse with an image.   

<Ellipse.Fill >

    <ImageBrush ImageSource="dock.jpg" />

</Ellipse.Fill >

How to Draw a Semi-transparent Ellipse?

The Opacity property represents the transparency of an Ellipse. The value of Opacity is between 0 and 1, where 0 is fully transparent and 1 is fully opaque. The code listed generates a semi-transparent ellipse.

<Ellipse

    Width="100"

    Height="50"          

    Stroke="Black"

    StrokeThickness="4"

    Opacity="0.5">

Polyline

How to Create a Polyline in WPF?

The Polyline element represents a Silverlight Polyline control in XAML.

 <Polyline/>

 The Polyline element in XAML creates a polyline shape. The following code snippet creates a polyline by setting its Points property. The code also sets the black stroke of width 4. 

<Polyline

    Points="10,100 100,200 200,30 250,200 200,150"

    Stroke="Black"

    StrokeThickness="4" />

Polygon

How to create a Polygon?

The Polygon element in XAML creates a polygon shape. The code snippet in creates a polygon by setting its Points property to the connected points in a polygon. The code also sets the black stroke of width 4 and fills it with yellow color. 

<Polygon Points="50, 100 200, 100 200, 200 300, 30"

    Stroke="Black" StrokeThickness="4"

    Fill="Yellow" />

 Formatting a Polygon

We can use the Fill property of the Polygon to draw a Polygon with any kind of brush including a solid brush, linear gradient brush, radial gradient brush, or an image brush. The code uses linear gradient brushes to draw the background and foreground of a Polygon.

<Polygon Points="50, 100 200, 100 200, 200 300, 30"

    Stroke="Black" StrokeThickness="4" Opacity="0.5" >

    <Polygon.Fill>

            <LinearGradientBrush StartPoint="0,0" EndPoint="1,1" >

                <GradientStop Color="Blue" Offset="0.25" />                   

                <GradientStop Color="Green" Offset="0.50" />

                <GradientStop Color="Red" Offset="0.75" />

            </LinearGradientBrush>

     </Polygon.Fill>

</Polygon>

 Setting Image as Background of a Polygon

To set an image as background of a Polygon, we can set an image brush as the Fill of the Polygon. The code sets fills the Polygon with an image.   

<Polygon.Fill >

    <ImageBrush ImageSource="dock.jpg" />

</Polygon.Fill >

Drawing a Semi-transparent Polygon

The Opacity property represents the transparency of a Polygon. The value of Opacity is between 0 and 1, where 0 is fully transparent and 1 is fully opaque. The code listed generates a semi-transparent shape.

<Polygon Points="50, 100 200, 100 200, 200 300, 30"

    Stroke="Black" StrokeThickness="4" Opacity="0.5" >

 

Design
8/10
Support
2/10
Development
4.5/10

7.5

Awesome
3.50
Summary

In this article we studied how to use vector graphics in WPF which includes drawing Line, Rectangle, Ellipse Polyline and Polygon. Also we have studied filling property, background image and opacity.

Search widget

Banner

Latest posts

Design Patterns Design Patterns in Programming

What is a Design Pattern? According to MSDN, "A design pattern is a description of a set of interacting classes that provide a framework for a solution to a generalized problem in a specific context or environment. In other words, a pattern suggests a solution to a particular problem or issue in object-oriented software development.”

May 05, 2017 16 0

C# Ref and Out parameters in C Sharp

This tutorial explains the concepts of Ref and Out Keywords in C # programming. These two keywords are also frequently asked in most interviews.

January 15, 2017 16 0

WPF Vector Graphics in WPF

In this article, I will discuss how we can create a Line, Rectangle, ellipse and Polygon control in WPF at design-time using XAML and at run-time using C#.I will also explain their properties to format such as fill property. After that, i will show you to set an image as the background of any shape object.

January 08, 2017 16 0

C# What is the difference between an Abstract Class and an Interface

One question is always out there in most interviews. What is the difference between an Abstract Class and an Interface and why do you use one over the other? It seems like a simple question but most often, the answer to this question is not sufficient for the interviewer and can cost a job. So, I have decided to write an article about them and have tried to explain it.

December 26, 2016 16 0