Social Icons

Thursday, 25 April 2013

Basic Drawings and Shapes in WPF using XAML Tags Overview

Working with 2D Graphics and Shapes in WPF


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.


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.

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.

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

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


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:


It is a connected series of lines that form a closed shape.
It has also same properties as Polyline

Code for above Polygone


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

No comments:

Post a Comment

Please Give your Valuable Suggestions,Questions and Comments to improve my blog.