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 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 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.
<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 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.
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
<Path Data="M50.0000011012083,0.5L99.5000021617096,99.5L0.500000040707015,99.5z" Stroke="Black"
StrokeThickness="4" Fill="Yellow"/>
Example
2: Draw Curve
<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"
/>
In
the above example we gave path data from Microsoft expression blend.
Happy Programming!!
Don’t forget to leave your feedback
and comments below!
If you have any query mail me to Sujeet.bhujbal@gmail.com
Regards
Sujeet Bhujbal
--------------------------------------------------------------------------------
Personal Website :-http://sujitbhujbal.wordpress.com/
Facebook :-www.facebook.com/sujit.bhujbal
CodeProject:-http://www.codeproject.com/Members/Sujit-Bhujbal
Linkedin :-http://in.linkedin.com/in/sujitbhujbal
Stack-Exchange: http://stackexchange.com/users/469811/sujit-bhujbal
Twitter :-http://twitter.com/SujeetBhujbal
JavaTalks :-http://www.javatalks.com/Blogger/sujit9923/
-----------------------------------------------------------------------------------