2D Graphics In WPF

Introduction

 

We all are familiar with 2D arrays in C#, every element is accessed by 2 points.

 

In the same way 2D graphics has elements much like shapes, where every point has 2 coordinates, X & Y. So if you want to draw a line you'll need 2 vertices, and each vertex will have 2 coordinates on the graph. e.g. point1 = 30,10 point2 = 220,10.

 

This will draw a straight line.

 

2D graphics in WPF

 

WPF provides various shapes & drawings to generate 2D graphics.

 

We will learn shapes such as Line, Ellipse, Rectangle, Path, Polyline & Polygon.

 

Without further ado let's learn them one by one.

 

Line

 

In order to draw a line in WPF we can use Line element.

 

It has properties such as X1,Y1 & X2,Y2. Use its X1 and Y1 properties to set its start point & X2 and Y2 properties to set its endpoint of the line.

 

Now you have set the points right, but we have to make the line visible as well, for that, we need to set its Stroke and StrokeThickness properties.

<!-- 1. Line -->
<Line x:Name="TwoDLine"
  X1="30" Y1="10"
  X2="220" Y2="10"
  Stroke="DarkGray"
  StrokeThickness="2"/>

Output 

 

Ellipse

 

To draw an ellipse, we must use the Ellipse element and specify its Width and Height. If you want its interior to be painted then you can use Fill property to specify the Brush. For setting up its border we can use its Stroke property to specify the Brush. The StrokeThickness property specifies the thickness of the ellipse's border.

<!-- 2. Ellipse -->
<Ellipse x:Name="TwoDEllipse"
Width = "75"
Height = "45"
Stroke="DarkGray"
Margin="10 0 0 0"
StrokeThickness="1">
    <Ellipse.Fill>
        <RadialGradientBrush>
            <GradientStop Offset = "0" Color = "AliceBlue"/>
            <GradientStop Offset = "1" Color = "LightBlue"/>
            <GradientStop Offset = "2" Color = "DarkBlue"/>
        </RadialGradientBrush>
    </Ellipse.Fill>
</Ellipse>

Rectangle

 

To draw a rectangle, we have a Rectangle element and same as ellipse we can specify its Width and Height.

 

If you want its interior to be painted then you can use Fill property to specify the Brush. For setting up its border we can use its Stroke property to specify the Brush. The StrokeThickness property specifies the thickness of the rectangle's border.

<!-- 3. Rectangle -->
 <Rectangle x:Name="TwoDRectangle"
 Width="75"
 Height="45"
 Margin = "10 0 0 0"
 Fill="LightBlue"
 Stroke="DarkGray"
 StrokeThickness="1"/>

Output

We can also have a rectangle with rounded corners, specify RadiusX and RadiusY properties. 

<!-- 3. Rectangle with Rounded corners -->
 <Rectangle x:Name="TwoDRectangle"
 Width="75"
 Height="45"
 Margin = "10 0 0 0"
 Fill="LightBlue"
 Stroke="DarkGray"
 StrokeThickness="1"
 RadiusX="10"
 RadiusY="10"/>

Output

 

 

Path

 

It defines path from Point-A to Point-B.

 

WPF provides two classes: StreamGeometry and PathFigureCollection.

The following example uses attribute syntax to create a StreamGeometry.

 

Path with StreamGeometry,

<!-- 4. Path -->
<Path x:Name="TwoDPath"
  Margin = "10 0 0 0"
  Height = "45"
  Width="75"
  Fill = "LightBlue"
  Stroke="DarkGray"
  StrokeThickness="1"
  Stretch = "Fill">
    <Path.Data>
        <PathGeometry x:Name="PathGeoMetry">
            <PathFigure StartPoint = "50,0" IsClosed = "True">
                <LineSegment Point = "100,50"/>
                <LineSegment Point = "50,100"/>
                <LineSegment Point = "0,50"/>
            </PathFigure>
        </PathGeometry>
    </Path.Data>
</Path>

Output

 

Path with PathFigureCollection,

<!-- 5. Path with PathFigureCollection-->
<Path  x:Name="TwoDPath2"
      Margin = "10"
      Height = "45"
      Width="75"
      HorizontalAlignment="Left"
      Stroke="DarkGray"
      StrokeThickness="1"
      Data = "M 50,150 A 120,60 50 1 0 100, 5"
      Stretch = "Fill"  />

Output

Polyline

 

To draw a Polyline, We have a Polyline element.  Use its Points property to specify each point.

 

For setting up its border we can use its Stroke property to specify the Brush. The StrokeThickness property specifies the thickness of the rectangle's border. 

<!-- 5. Polyline -->
<Polyline x:Name="TwoDPolyline"
    Points="20,50 40,100 60,50 80,100 100,50"
    Stroke="DarkGray"
    StrokeThickness="2" />

Output

Polygon

 

We can draw a closed shape with a polygon.

 

To draw a closed shape graph also known as a connected graph, we have to use Polygon and we can use its Points property to specify its points. A line is automatically drawn as soon as you start updating each point. Then we can use Fill property to color the shape, a Stroke property for border & StorkeThickness for the size of the border.

<!-- 6. Polygon -->
<Polygon x:Name="TwoDPolygon"
      Stroke="DarkGray"
      StrokeThickness="1"
      Fill="LightBlue"
      Points="5,5 30,5 70,50 100,80 90,120 5,80"
      Margin = "10" />

Output

 

Beautiful, it looks awesome.

 

Summary

 

In this article, we learned some of the basic shapes widely used in WPF such as Line, Ellipse, Rectangle, Path, Polyline & Closed shape like Polygon.

 

They are easy to use once you know where to place a point on a screen.

 

You can play around with them & make it more beautiful.

 

I hope you have grasped some information out of this article.

 

If you have any queries or just want to connect, You can contact me @

• LinkedIn
  
• Twitter
  
• Github
  

Thank you & Happy coding!