Shapes and Custom Drawing in WPF/Silverlight

Wednesday 6 March 2013

Shapes and Custom Drawing in WPF/Silverlight

Shapes and Custom Drawing in WPF/Silverlight

In this article I will tell you how to create shape and create custom drawing using path property.

There are three common properties for shape listed below.

1. Fill :- This property is used to fill shape with color.
2. Stroke :- This property describes border color for the shape.
3. StokeThickness :- This property set shape border thickness.

Now, we will discuss various shapes into details.

1.Line

The Line element of XAML draws a line between two points.

There are four attributes to draw a line (X1,Y1,X2,Y2) represents start point and end point for X and Y co-ordinates of line.

<Line Stroke="#000fff" StrokeThickness="2" X1="100" Y1="100"

X2="300" Y2="100"/

2. Rectangle

The Rectangle element of XAML draws a rectangle

</Rectangle>

<Rectangle Width="120" Height="100" RadiusX="40" RadiusY="40"

Stroke="Green" StrokeThickness="5" Fill="Black">

</Rectangle>

In the above figure, first is simple rectangle and second figure indicates rounded rectangle. For drawing rounded rectangle we have to set two more properties RadiusX and RadiusY for round corner.

Ellipse

This shape create ellipse to circle in specified width and height.

Polyline

This shape is used draw a series of connected strait line.

<Polyline Points="0,50 20,0 40,50 60,0 80,50 100,0 120,50 -4,50"

Stroke="Black"

StrokeThickness="10"

Canvas.Left="75"

Canvas.Top="50" />

Polygon

This shape is used for draw a polygon, which is a connected series of lines that form a closed shape.
Following example shows how to creates different types of shapes using polygon

Example :

<Polygon Points="100,0 75,75 100,100 125,75"

Stroke="Black" StrokeThickness="2" Fill="AliceBlue"/>

<Polygon Points="100,100 125,125 100,200 75,125"

Stroke="Yellow" StrokeThickness="2" Fill="Black"/>

<Polygon Points="100,100 125,75 200,100 125,125"

Stroke="Red" StrokeThickness="2" Fill="Azure"/>

<Polygon Points="100,100 75,125 0,100 75,75"

Stroke="Blue" StrokeThickness="2" Fill="BlanchedAlmond"/>

Custom shape using Path

Now I will tell you how to create custom shapes using Path and Data property of Path element.

Path class is used to draw Curves and complex shapes. it describes using Geometry object. There are a various types of Geometry objects describes shapes are LineGeometry, RectangleGeometry, and EllipseGeometry.

Example 1: Draw Triangle