AutoEventWireup="true" CodeFile="canvas.aspx.cs" Inherits="tutorials_controls_tutorialtemplate_Canvas"
Title="Silverlight Canvas 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 Canvas Tutorials</td>
</tr>
<tr>
<td class="ArticleContents">
Canvas defines an area within which you can position child elements. Child elements
can be anything like shapres, textblock etc.
</td>
</tr>
<tr>
<td colspan="2">
</td>
</tr>
</table>
</asp:Content>
<asp:Content ID="Content3" ContentPlaceHolderID="PlaceHolderForContents" runat="Server">
<div class="ArticleContents">
Every .xaml file must contain a canvas object and this servers as a root element.
All child elements can be declared as inner XML. Following are some important properties
that are very useful.
<table width="100%" class="TutoPropPlaceHolder" border="1" cellpadding="2" cellspacing="1">
<tr>
<td class="DemoCP">
Background</td>
<td>
Specifies the background color of the canvas.
</td>
</tr>
<tr>
<td class="DemoCP">
Canvas.Left</td>
<td>
Gets or sets the distance between the left side of the element from its parent element.
</td>
</tr>
<tr>
<td class="DemoCP">
Canvas.Top</td>
<td>
Gets or Sets the distance between the top side of the element from its parent element.
</td>
</tr>
<tr>
<td class="DemoCP">
Canvas.ZIndex</td>
<td>
Gets or sets the value of the Z-order object within the canvas.
</td>
</tr>
<tr>
<td class="DemoCP">
Cursor</td>
<td>
Gets or sets the cursor that displays when Mouse pointer is over the canvas.
</td>
</tr>
<tr>
<td class="DemoCP">
Height</td>
<td>
Gets or sets the height of the canvas object.
</td>
</tr>
<tr>
<td class="DemoCP">
Width</td>
<td>
Gets or sets the width of the canvas object.
</td>
</tr>
<tr>
<td class="DemoCP">
Name</td>
<td>
Gets or sets the unique name of the object.
</td>
</tr>
<tr>
<td class="DemoCP">
Opacity</td>
<td>
Gets or sets the degree of the object's opacity (between 0 to 1.0 where 1.0 is the
full and 0 means transparent).
</td>
</tr>
<tr>
<td class="DemoCP">
OpacityMask</td>
<td>
Gets or sets the brush used to alter the opacity of the regions of the object.
</td>
</tr>
<tr>
<td class="DemoCP">
GetFocus</td>
<td>
Occurs when the object gets focus.
</td>
</tr>
<tr>
<td class="DemoCP">
KeyDown</td>
<td>
Occurs when any key is pressed while the object has focus.
</td>
</tr>
<tr>
<td class="DemoCP">
KeyUp</td>
<td>
Occurs when any key is released while the object has focus.
</td>
</tr>
<tr>
<td class="DemoCP">
LostFocus</td>
<td>
Occurs when object looses the focus.
</td>
</tr>
</table>
<!-- START - Demo Section -->
<table class="DemoPlaceHolder" border="1" cellpadding="2" cellspacing="4">
<tr>
<td class="DemoTitle" style="width:50%;">
DEMO : Canvas Objects and its child objects
</td>
<td align="right">
<a class="DemoShowSource" href="../../misc/codeviewer/default.aspx?pagename=~/tutorials/silverlight/canvas.aspx"
target="_blank">Show Source Code</a>
</td>
</tr>
<tr valign="top">
<td>
This is a Simple canvas object with specified height and width.
<pre>
<Canvas
xmlns="http://schemas.microsoft.com/client/2007" xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml">
<Rectangle Height="75" Width="150" Fill="LightBlue" Stroke="Green"
StrokeThickness="2" Canvas.Left="5" Canvas.Top="5"></Rectangle>
</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">
<Rectangle Height="50" Width="150" Fill="LightBlue" Stroke="Green" StrokeThickness="2" Canvas.Left="5" Canvas.Top="5"></Rectangle>
</Canvas>
</script>
<!-- END - Define XAML content. -->
<div id="pluginHost1">
<script language="javascript" type="text/javascript">
createSilverlightPlugin('pluginHost1', '200', '75', '#xamlScript1')
</script>
</div>
</td>
</tr>
<tr valign="top">
<td>
Here you can see several child object inside the canvas object. By default, the ZIndex of the child element are determined in the sequence they are declared.
<pre>
<Canvas
xmlns="http://schemas.microsoft.com/client/2007" xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml">
<Rectangle Height="30" Width="150" Fill="LightBlue" Stroke="Green"
StrokeThickness="2" Canvas.Left="5" Canvas.Top="5"></Rectangle>
<Rectangle Height="30" Width="150" Fill="LightGreen" Stroke="Blue"
StrokeThickness="2" Canvas.Left="15" Canvas.Top="15"></Rectangle>
<Rectangle Height="30" Width="150" Fill="LightPink" Stroke="Red"
StrokeThickness="2" Canvas.Left="25" Canvas.Top="25"></Rectangle>
</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">
<Rectangle Height="50" Width="150" Fill="LightBlue" Stroke="Green" StrokeThickness="2" Canvas.Left="5" Canvas.Top="5"></Rectangle>
<Rectangle Height="50" Width="150" Fill="LightGreen" Stroke="Blue" StrokeThickness="2" Canvas.Left="15" Canvas.Top="25"></Rectangle>
<Rectangle Height="50" Width="150" Fill="LightPink" Stroke="Red" StrokeThickness="2" Canvas.Left="25" Canvas.Top="45"></Rectangle>
</Canvas>
</script>
<!-- END - Define XAML content. -->
<div id="pluginHost2">
<script language="javascript" type="text/javascript">
createSilverlightPlugin('pluginHost2', '200', '150', '#xamlScript2')
</script>
</div>
</td>
</tr>
<tr valign="top">
<td>
Here the the same above code except that the ZIndex has been specified for all three objects. Notice the overlapping pattern of these three rectangles.
<pre>
<Canvas
xmlns="http://schemas.microsoft.com/client/2007"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml">
<Rectangle Height="30" Width="150" Fill="LightBlue"
Stroke="Green" StrokeThickness="2" Canvas.Left="5" Canvas.Top="5"></Rectangle>
<Rectangle Height="30" Width="150" Fill="LightGreen"
Stroke="Blue" StrokeThickness="2" Canvas.Left="15" Canvas.Top="15"></Rectangle>
<Rectangle Height="30" Width="150" Fill="LightPink"
Stroke="Red" StrokeThickness="2" Canvas.Left="25" Canvas.Top="25"></Rectangle>
</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">
<Rectangle Height="50" Width="150" Fill="LightBlue" Stroke="Green" StrokeThickness="2" Canvas.Left="5" Canvas.Top="5" Canvas.ZIndex="3"></Rectangle>
<Rectangle Height="50" Width="150" Fill="LightGreen" Stroke="Blue" StrokeThickness="2" Canvas.Left="15" Canvas.Top="25" Canvas.ZIndex="2"></Rectangle>
<Rectangle Height="50" Width="150" Fill="LightPink" Stroke="Red" StrokeThickness="2" Canvas.Left="25" Canvas.Top="45" Canvas.ZIndex="1"></Rectangle>
</Canvas>
</script>
<!-- END - Define XAML content. -->
<div id="pluginHost3">
<script language="javascript" type="text/javascript">
createSilverlightPlugin('pluginHost3', '200', '150', '#xamlScript3')
</script>
</div>
</td>
</tr>
<tr valign="top">
<td>
Below code demonstrate that you can declare many child canvas object inside a parent canvas object.
<pre>
<Canvas
xmlns="http://schemas.microsoft.com/client/2007"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml">
<Rectangle Height="30" Width="150" Fill="LightBlue"
Stroke="Green" StrokeThickness="2" Canvas.Left="5" Canvas.Top="5"></Rectangle>
<Rectangle Height="30" Width="150" Fill="LightGreen"
Stroke="Blue" StrokeThickness="2" Canvas.Left="15" Canvas.Top="15"></Rectangle>
<Rectangle Height="30" Width="150" Fill="LightPink"
Stroke="Red" StrokeThickness="2" Canvas.Left="25" Canvas.Top="25"></Rectangle>
</Canvas>
</pre>
</td>
<td>
<!-- START - Define XAML content. -->
<script type="text/xaml" id="xamlScript4">
<?xml version="1.0"?>
<Canvas
xmlns="http://schemas.microsoft.com/client/2007" xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml">
<Canvas Background="Green" Height="50" Width="50" Canvas.Left="10" Canvas.Top="10"></Canvas>
<Canvas Background="Red" Height="50" Width="50" Canvas.Left="100" Canvas.Top="50"></Canvas>
</Canvas>
</script>
<!-- END - Define XAML content. -->
<div id="pluginHost4">
<script language="javascript" type="text/javascript">
createSilverlightPlugin('pluginHost4', '200', '150', '#xamlScript4')
</script>
</div>
</td>
</tr>
</table>
<!-- END - Demo Section -->
</div>
</asp:Content>
<asp:Content ID="Content4" ContentPlaceHolderID="PlaceHolderFooter" runat="Server">
</asp:Content>
Go Top