Click here to Skip to main content
Click here to Skip to main content
Go to top

Shapes and Custom Drawing in WPF/Silverlight

, 7 Mar 2013
Rate this:
Please Sign up or sign in to vote.
In this article I will tell you how to create shapes and create custom drawings using the Path property.

Introduction 

In this article I will tell you how to create shapes and create a custom drawing using the Path property.

Using the code

There are three common properties for shapes, 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 the 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 the start point and end point for the X and Y co-ordinates of a 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 Width="300" Height="100" Fill="Black" Stroke="red" StrokeThickness="5">
</Rectangle>
    <Rectangle Width="120" Height="100" RadiusX="40" RadiusY="40" Stroke="Green" StrokeThickness="5" Fill="Black">
</Rectangle>

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

Ellipse

This shape creates an ellipse to a circle in the specified width and height.

<Ellipse Height="100" Width="300" StrokeThickness="0.4" 
   Opacity="0.5" Stroke="Black"  Fill="Gold"/>

Polyline

This shape is used draw a series of connected straight lines.

<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 drawing a polygon, which is a connected series of lines that form a closed shape. The following example shows how to create different types of shapes using a 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 the Data property of the Path element. The Path class is used to draw curves and complex shapes. It is described using the Geometry object. There are a various types of Geometry objects that describe shapes: LineGeometry, RectangleGeometry, and EllipseGeometry.

Example 1: Draw Triangle

<Path Data="M50.0000011012083,0.5L99.5000021617096,99.5L0.500000040707015,99.5z" Stroke="Black"
  StrokeThickness="4" Fill="Yellow"/>

Example 2: Draw Arc

<Path Data="M25,0.5C38.5309753417969,0.5,49.5,9.23044681549072,49.5,20" Stroke="Black"
 StrokeThickness="5" Fill="Yellow" Margin="0,33,0,0"/>

Example 3: Draw Arrow

<Path Data="M20.125,32L0.5,12.375L10.3125,12.375L10.3125,0.5L29.9375,0.5L29.9375,12.375L39.75,12.375z" 
  Stroke="Black" StrokeThickness="5" Fill="Yellow" Margin="162,33,0,0" />

In the above example we gave the path data from Microsoft Expression Blend.

Happy programming!!

Don’t forget to leave your feedback and comments below!

If you have any queries, mail me at Sujeet.bhujbal@gmail.com.

License

This article, along with any associated source code and files, is licensed under The Code Project Open License (CPOL)

Share

About the Author

Sujit Bhujbal
Software Developer (Senior)
India India
Sujit Bhujbal is Senior Software Engineer having over 6 + years of Experience in Asp.net 3.5,WPF,WCF and has worked on various platforms. He worked during various phases of SDLC such as Requirements and Analysis, Design and Construction, development, maintenance, Testing, UAT.
 
He is Microsoft Certified Technology Specialist (MCTS) in Asp.net /WCF Applications. He worked at various levels and currently working as a Senior Software Engineer.
 
His core areas of skill are Web application development using WPF,WCF , C#.Net, ASP.Net 3.5, WCF, SQL Server 2008, CSS, Java script Web design using HTML, AJAX and Crystal Reports
 
He is proficient in developing applications using SilverLight irrespective of the language, with sound knowledge of Microsoft Expression Blend and exposure to other Microsoft Expression studio tools.

 
------------------------------------------------------------------------
Blog: Visit Sujit Bhujbal
 
Personal Website :-Visit sujit Bhujbal Personal Site
 
Facebook :- Sujit Bhujbal Facebook
 
CodeProject:- Sujit Bhujbal codeproject
 
DotNetHeaven:- DotNetHeaven

CsharpCorner:-CsharpCorner
 
Linkedin :-Linkedin
 
Stack-Exchange: Stack-Exchange
 
Twitter :-Twitter
 
JavaTalks :-JavaTalk
 
------------------------------------------------------------------------
Follow on   Twitter   LinkedIn

Comments and Discussions

 
QuestionPlease let me know how to create path for curlybrace shape Pinmembersateesh munagala20-Feb-14 17:57 

General General    News News    Suggestion Suggestion    Question Question    Bug Bug    Answer Answer    Joke Joke    Rant Rant    Admin Admin   

Use Ctrl+Left/Right to switch messages, Ctrl+Up/Down to switch threads, Ctrl+Shift+Left/Right to switch pages.

| Advertise | Privacy | Mobile
Web03 | 2.8.140916.1 | Last Updated 7 Mar 2013
Article Copyright 2013 by Sujit Bhujbal
Everything else Copyright © CodeProject, 1999-2014
Terms of Service
Layout: fixed | fluid