AutoEventWireup="true" CodeFile="drawing.aspx.cs" Inherits="tutorials_controls_tutorialtemplate_Drawing"
Title="Silverlight Drawing tutorials : DotNetFunda.com" %>
<asp:Content ID="Content1" ContentPlaceHolderID="PlaceHolderHeader" runat="Server">
</asp:Content>
<asp:Content ID="Content2" ContentPlaceHolderID="PlaceHolderForTitleAndIntro" runat="Server">
<table width="100%" cellpadding="2" cellspacing="0">
<tr valign="top" class="ArticleTitle">
<td style="padding-left: 10px;" valign="middle">
Silverlight Drawing Tutorials</td>
</tr>
<tr>
<td class="ArticleContents">
Silverlight supports basic vector graphics like Rectangle, Ellipse, Polyline, Polygon, Line elements. Generally these elements are used in drawing and paintings.
</td>
</tr>
<tr>
<td colspan="2">
</td>
</tr>
</table>
</asp:Content>
<asp:Content ID="Content3" ContentPlaceHolderID="PlaceHolderForContents" runat="Server">
<!-- START - Demo Section -->
<table class="DemoPlaceHolder" border="1" cellpadding="2" cellspacing="4">
<tr>
<td class="DemoTitle" style="width:50%;">
DEMO : Drawing objects
</td>
<td align="right">
<a class="DemoShowSource" href="../../misc/codeviewer/default.aspx?pagename=~/tutorials/silverlight/drawing.aspx"
target="_blank">Show Source Code</a>
</td>
</tr>
<tr valign="top">
<td>
Following code demonstrate the basic commonly used elements that are supported by Silverlight. These are Ellipse, Rectangle and Line elements.
<pre>
<Canvas
xmlns="http://schemas.microsoft.com/client/2007" xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml">
<Ellipse Height="50" Width="50" Canvas.Left="5" Canvas.Top="5"
Fill="Red" Stroke="Black" StrokeThickness="2"></Ellipse>
<Rectangle Height="50" Width="150" Canvas.Left="25"
Canvas.Top="25" Fill="Yellow" Stroke="Blue" StrokeThickness="3"></Rectangle>
<Line X1="180" Y1="10" X2="10" Y2="60" Stroke="Maroon" StrokeThickness="5"></Line>
</Canvas>
</pre>
</td>
<td>
<!-- START - Define XAML content. -->
<script type="text/xaml" id="xamlScript1">
<?xml version="1.0"?>
<Canvas
xmlns="http://schemas.microsoft.com/client/2007" xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml">
<Ellipse Height="100" Width="100" Canvas.Left="5" Canvas.Top="5" Fill="Red" Stroke="Black" StrokeThickness="2"></Ellipse>
<Rectangle Height="125" Width="125" Canvas.Left="50" Canvas.Top="50" Fill="Yellow" Stroke="Blue" StrokeThickness="3"></Rectangle>
<Line X1="180" Y1="10" X2="10" Y2="170" Stroke="Maroon" StrokeThickness="5"></Line>
</Canvas>
</script>
<!-- END - Define XAML content. -->
<div id="pluginHost1">
<script language="javascript" type="text/javascript">
createSilverlightPlugin('pluginHost1', '200', '200', '#xamlScript1')
</script>
</div>
</td>
</tr>
<tr valign="top">
<td>
Apart from Ellipse, Rectangle and Line, Silverlight also supports Polyline, Polygon and Path elements. Path element is exciting element that is used to draw complex shapes.
<pre>
<Canvas
xmlns="http://schemas.microsoft.com/client/2007"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml">
<Polygon Points="10, 10, 10, 100, 100, 100, 100, 10"
Fill="#dedede" Stroke="Black" StrokeThickness="2"></Polygon>
<Polyline Points="105, 105, 105, 145, 145, 145, 145, 50, 5, 150, 185, 185"
Stroke="Red" StrokeThickness="3"></Polyline>
</Canvas>
</pre>
</td>
<td>
<!-- START - Define XAML content. -->
<script type="text/xaml" id="xamlScript2">
<?xml version="1.0"?>
<Canvas
xmlns="http://schemas.microsoft.com/client/2007" xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml">
<Polygon Points="10, 10, 10, 100, 100, 100, 100, 10" Fill="#dedede" Stroke="Black" StrokeThickness="2"></Polygon>
<Polyline Points="105, 105, 105, 145, 145, 145, 145, 50, 5, 150, 185, 185" Stroke="Red" StrokeThickness="3"></Polyline>
</Canvas>
</script>
<!-- END - Define XAML content. -->
<div id="pluginHost2">
<script language="javascript" type="text/javascript">
createSilverlightPlugin('pluginHost2', '200', '200', '#xamlScript2')
</script>
</div>
</td>
</tr>
<tr valign="top">
<td>
As written earlier, Path element is used to draw complexx type of shaps. To use Path element we need to set a special type of attribute called Data.
The Data attribute string contains several single character string and all have different meaning. <br />
<b>M</b> denotes the start point in the absolute value<br />
<b>m</b> denotes the start point in an offset to the previous point<br />
<b>L</b> denotes the stright line between the current line and the specified point<br />
<b>H</b> denotes the horizontal line between the current point and the specified x-cordinate<br />
<b>V</b> denotes the vertical line between the current point and the specified y-cordinate<br />
<b>C</b> denotes a cubic Bezier curve between the current point and specified end point by using the two specified control points<br />
<b>Q</b> denotes the quadratic Bezier curve point between the current point and the specified end point by using a specified control point<br />
<b>S</b> denotes a cubit Bezier curve between the current point and specified end point by using the two specific control points, here the first control point is assumed to be the reflection of the second control point<br />
<b>A</b> denotes the elliptical arc between the current point and the specified end point<br />
<b>Z</b> denotes the end of the current shape and creates the line that connect the current point to the starting point.<br />
<pre>
<Canvas
xmlns="http://schemas.microsoft.com/client/2007"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml">
<Path Data="M 10,20 C 10,200 200,-100 175,100Z"
Stroke="Orange" Fill="Pink" Canvas.Left="10" Canvas.Top="10" />
<Path Data="M 10, 150, 30, 150, 30, 300, 20, 350, 10, 300 Z"
Stroke="Blue" Fill="LightBlue" Canvas.Left="5" Canvas.Top="5" />
<Path Data="M 50, 150, 175, 375, 50, 375, 175, 150 Z"
Stroke="Red" Fill="Yellow" Canvas.Left="5" Canvas.Top="5" />
</Canvas>
</pre>
</td>
<td>
<!-- START - Define XAML content. -->
<script type="text/xaml" id="xamlScript3">
<?xml version="1.0"?>
<Canvas
xmlns="http://schemas.microsoft.com/client/2007" xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml">
<Path Data="M 10,20 C 10,200 200,-100 175,100Z" Stroke="Orange" Fill="Pink" Canvas.Left="10" Canvas.Top="10" />
<Path Data="M 10, 150, 30, 150, 30, 300, 20, 350, 10, 300 Z" Stroke="Blue" Fill="LightBlue" Canvas.Left="5" Canvas.Top="5" />
<Path Data="M 50, 150, 175, 375, 50, 375, 175, 150 Z" Stroke="Red" Fill="Yellow" Canvas.Left="5" Canvas.Top="5" />
</Canvas>
</script>
<!-- END - Define XAML content. -->
<div id="pluginHost3">
<script language="javascript" type="text/javascript">
createSilverlightPlugin('pluginHost3', '200', '400', '#xamlScript3')
</script>
</div>
</td>
</tr>
</table>
</asp:Content>
<asp:Content ID="Content4" ContentPlaceHolderID="PlaceHolderFooter" runat="Server">
</asp:Content>
Go Top