Basic Drawings and Shapes in WPF using XAML Tags Overview

Working with 2D Graphics and Shapes in WPF

Introduction:

In my Previous Articles i explained WPF Architecture Overview, Working or Consuming Three Tier Architecture in .Net Application and etc.Now i will explain How to draw different types of shapes and drawings using WPF XAML Tags.

Description:

WPF Provides number of Shape of objects to draw 2D Graphics and Shapes. Available shape objects include Line, Path, Polygon, Polyline, Ellipse and Rectangle. These  Shape objects share some common properties.

Stroke: Describes how the shape outlined is painted.

StrokeThickness:  Thickness of  shapes outline.

Fill: How the interior of shape is filled.

Point Coordinates in WPF

 Very first time we may confuse that what is coordinates i.e points (left,top) i.e left distance,top distance in the container control.

Drawing Line in WPF

Line tag of XAML use to draw a line. It has X1,Y1  X2,Y2  Starting and ending points attributes and Common Shape object attributes like Stroke, StrokeThickness.

<line Stroke="Blue" StrokeThickness="2" X1="100" Y1="100" X2="400" Y2="100"/>

The above code draws following line starting point (100,100) and ending Point(400,100) which looks like below

 

 Creating line in code behind file wpf

Using following code you can create line in code behind file.

//drawing line from (150,200) to (300,350) Line ObjLine = new Line(); ObjLine.X1 = 200; ObjLine.Y1 = 200; ObjLine.X2 = 300; ObjLine.Y2 = 350; ObjLine.Stroke = System.Windows.Media.Brushes.Red; ObjLine.StrokeThickness = 2; this.maincanvas.Children.Add(ObjLine);//adding line object children to container canvas

The below image shows line for above code

 

Drawing Ellispe in WPF

Ellipse tag of Xaml used for creating Ellipse and Circle(equal height and width). Ellipse has attributes Height, Width, Fill, StrokeThickness,Stroke. Fill attribute fills the ellipse with specified color.

The following code draws an ellipse with height 100 and width 200

<ellipse Stroke="RoyalBlue" StrokeThickness="2" Fill="GreenYellow" Height="100" Width="200" Canvas.Left="103" Canvas.Top="12" />

Below image shows ellipse for above code  

Drawing ellipse with stoke RoyalBlue and filling with GreenYellow

Rectangle Creation in WPF:

To draw a Rectangle use the Rectangle tag of XAML that has the following important Properties.

Width and Height:

used to specify width and height of the Rectangle.
RadiusX and RadiusY: Used to specify the horizantal and vertical radius for the rectangle to make the corner's of the Rectangle rounded corner. By default it is (0,0).
Fill: Used to specify the color with which Rectangle has to be filled.
Storke, StrokeThickness, StrokeDashArray are common as described in Beginning of the post.

Rectangle with Square corners and rounded corners

Code:

<rectangle Width="107" Name="r" Height="119" Stroke="YellowGreen" Fill="Blue" StrokeThickness="5" Canvas.Left="49" Canvas.Top="171" /> <rectangle Canvas.Left="211" Canvas.Top="171" Fill="Blue" Height="119" Name="rectangle1" Stroke="YellowGreen" RadiusX="30" RadiusY="30" StrokeThickness="5" Width="107" />

Polyline:

Polyline is combination of mutliple lines and to draw a polyline use <polyline> of XAML that had the following important Properties.

Points:  Used to specify the list of points using which the polyline has to be drawn. 

Note :Point (dist from left, distance from top)

Stroke, StorkeThickness, StrokeDashArray, Fill are common as above.

Polyline stroke red and Filled with Blue colors

code for above example:

<canvas> <polyline Canvas.Top="200" Canvas.Left="40" Points="0,30 230,30 115,120 0,30 0,115 115,120 " Fill="Blue" Stroke="Red" StrokeThickness="5" /> </Canvas>

Polygon:

It is a connected series of lines that form a closed shape.

It has also same properties as Polyline

Code for above Polygone

<canvas> <polygon Stroke="Black" StrokeThickness="4" Fill="Blue" Points="70,110 280,10 70,180 10,49 "/> </Canvas>

Conclusion:

This is all about drawing Shapes in XAML. In my next article i will explain drawing shapes using Data Property of Path element. Don't forget to share and Comment for your friends if you like this article.

Related Tutorials

• Architecture of WPF.
• Creation of Three Tier Architecture in .Net Application.
• Difference between App.config and Web.Config
• Asp.Net Validation Controls Tutorial
• Asp.Net Ajax Tutorials
• Difference between Machine.Config and Web.Config in Asp.Net Framework.
• Basic Drawings and Shapes in WPF.
• How to read and write key values from and to App.config Settings file .Net Windows Application.
• How to Use RangeValidator Control in Asp.Net with Example.
• Asp.Net Ajax Server Controls, Ajax Control Toolkit Download and Installation Tutorial.
• How to Use ViewState in Asp.Net(State Management Techniques).
• How to use Hidden Field in Asp.Net with Example(State Managemet Techniques).
• Beginners Tutorial on How to use QueryStrings in Asp.Net(State Management Techniques).
• Asp.Net Cookie Usage Overview with example(State Management Techniques).
• Access Specifiers or Modifiers in C# with example(Oops Concept).